JavaScript Instance Tutorial: Dom method Creating and modifying tables

Article Introduction: JavaScript Instance Tutorial: Dom method to create and modify tables.

The <table> element is one of the most complex structures in HTML. To create a table, you would generally have to involve labels that represent table rows, cells, and the first class of the table. Because of the number of tags involved, creating and modifying tables using the core DOM method often involves writing a lot of code. Let's say we want to use the DOM to create the following HTML table:

<table border= "1" width= "100%" >
    <tbody>
        <tr>
            <td>cell 1,1</td>
            < Td>cell 2,1</td>
        </tr>
        <tr>
            <td>cell 1,2</td>
            <td>cell 2,2</td>
        </tr>
    </tbody>
</table>

If you use the core Dom method to create these elements, you need as much code as:

//CREATE table var table = document.createelement ("table"); table.border = 1; table.width = "100%";
Create tbody var tbody = document.createelement ("tbody");

Table.appendchild (TBODY);
Create the first line of var row1 = document.createelement ("tr");
Tbody.appendchild (ROW1);
var cell1_1 = document.createelement ("TD");
Cell1_1.appendchild (document.createTextNode ("Cell 1,1"));
Row1.appendchild (cell1_1);
var cell2_1 = document.createelement ("TD");
Cell2_1.appendchild (document.createTextNode ("Cell 2,1"));

Row1.appendchild (Cell2_1);
Create a second line of var row2 = document.createelement ("tr");
Tbody.appendchild (ROW2);
var cell1_2 = document.createelement ("TD");
Cell1_2.appendchild (document.createTextNode ("Cell 1,2"));
Row2.appendchild (cell1_2);
var cell2_2 = document.createelement ("TD");
Cell2_2.appendchild (document.createTextNode ("Cell 2,2"));

Row2.appendchild (cell2_2); Inserts a table into the document theme Document.body.appendChild (table); 

Obviously, the DOM code is very long and a bit less understood. To facilitate the building of tables, the HTML DOM also adds properties and methods to the <table>, <tbody>, and <tr> elements.

The properties and methods added for the <table> element are as follows:

• Caption: Holds the pointer to the <caption> element (if any);
• Tbodies: is a <tbody> element of htmlcollection;
• TFoot: Keep A pointer to the <tfoot> element (if any);
• THead: Holds a pointer to the <thead> element (if any)
• Rows: Is the htmlcollection of all rows in a table;
• Createthead (): Create <thead> elements, put them in the table, return the reference;
• Createtfoot (): Create <tfoot> elements, put them in the table, return the reference;
• Createcaption (); Create <caption> element, place it in table, return reference;
• Deletethead (); Delete <thead> element;
• Deletetfoot (); Delete <tfoot> element;
• Deletecaption (): delete <caption> elements;
• DeleteRow (POS): Deletes the row at the specified location;
• InsertRow (POS): Inserts a row into the rows collection at the specified location.

Adding properties and methods for <tbody> elements are:

• Rows: Preserves the htmlcollection of the Bank of <tbody> elements;
• DeleteRow (POS): Deletes the line where the position is made;
• InsertRow (POS): Inserts a row into the rows collection at the specified location, returning a reference to the newly inserted row.

The properties and methods added for the <tr> element are as follows:

• Cells: Preserving the htmlcollection of cells in the <tr> element;
• Deletecell (POS): Deletes the cell at the specified location;
• InsertCell (POS): Inserts a cell into the cells collection at the specified location, returning a reference to the newly inserted cell.

By using these properties and methods, you can dramatically reduce the amount of code needed to create a quote. For example, use these properties and methods to rewrite the preceding code as follows:

CREATE TABLE
var table = document.createelement ("table");
Table.border = 1;
Table.width = "100%";

Create Tbody
var tbody = document.createelement ("tbody");
Table.appendchild (tbody);
Tbody.insertrow (0);
Tbody.rows[0].insertcell (0);
Tbody.rows[0].cells[0].appendchild (document.createTextNode ("Cell 1,1"));
Tbody.rows[0].insertcell (1);
Tbody.rows[0].cells[1].appendchild (document.createTextNode ("Cell 2,1"));

Create the first row of
Tbody.insertrow (1);
Tbody.rows[1].insertcell (0);
Tbody.rows[1].cells[0].appendchild (document.createTextNode ("Cell 1,2"));
Tbody.rows[1].insertcell (1);
Tbody.rows[1].cells[1].appendchild (document.createTextNode ("Cell 2,2"));

Add a table to the document topic
Document.body.appendChild (table);

In this code, the code to create <table> and <tbody> has not changed. The difference is to create a two-line section that uses the table properties and methods defined by the HTML DOM. When the first row is created, the InsertRow () method is called through the <tbody> element, and the parameter 0--is passed in to indicate where the row should be inserted. After this code is executed, a row is automatically created and inserted into position 0 of the <tbody> element. So you can immediately refer to the newly inserted row through tbody.rows[0].

Cells are created in a very similar way by calling the Insertcell () method through the <tr> element and passing in the position of the placement cell. You can then refer to the newly inserted cell through Tbody.rows[0].cells[0] because the newly created cell is inserted at position 0 on this line.