How to create a table in javascript (two ways to draw a table in javascript)

How to create a table in javascript (two ways to draw a table in javascript)_Basic knowledge

WBOY

Release： 2016-05-16 17:09:55

Original

2142 people have browsed it

1. insertRow() and insertCell() functions

The insertRow() function can take parameters, in the following form:

insertRow(index): index starts from 0

This function adds a new row before the row of index, such as insertRow(0), which adds a new row before the first row. The default insertRow() function is equivalent to insertRow(-1), which adds a new row to the end of the table. Generally when we use it: objTable.insertRow(objTable.rows.length). It is to add a new row at the end of the table objTable.

The usage of insertCell() and insertRow is the same and will not be discussed here.

2. deleteRow() and deleteCell() methods

The deleteRow() function can take parameters, the form is as follows: deleteRow(index): index starts from 0

The same meaning as the above two methods is to delete the rows and cells at the specified position. Parameters to be passed in: Index is the position of the row in the table, which can be obtained by the following method and then deleted:

Copy code The code is as follows:

var row=document.getElementById("Id of row" ); 
var index=row.rowIndex;//There is this attribute, hey 
objTable.deleteRow(index);

Let me tell you about a problem I encountered during use. When deleting rows in the table, if you delete a certain row, the number of rows in the table will change immediately, so if you want to delete the table All lines, the following code is wrong:

Copy code The code is as follows:

function clearRow(){ 
 objTable= document. getElementById("myTable"); 

 for( var i=1; i { 
 tblObj.deleteRow(i); 
 } 
}

This code wants to delete the body of the original table. There are two problems. First of all, it cannot be deleteRow(i), it should be deleteRow(1). Because when deleting table rows, the number of rows in the table is changing. This is the key to the problem. rows.length is always getting smaller, and the number of deleted rows will always be less than half of what is expected. Therefore, delete the table correctly. The line of code should look like this:

Copy code The code is as follows:

function clearRow(){ 
 objTable= document. getElementById("myTable"); 
 var length= objTable.rows.length; 
 for( var i=1; i { 
 objTable.deleteRow(i); 
    } 
}

3. Dynamically set the properties of cells and rows

A. Use the setAttribute() method with the following format: setAttribute(attribute, attribute value)

Note: This method can be used for almost all DOM objects. The first parameter is the name of the attribute, for example: border, and the second parameter is the value you want to set for border, for example: 1

Copy code The code is as follows:

var objMyTable = document.getElementById("myTable");

objMyTable.setAttribute("border",1);//Set the border for the table to 1

Others, for example, if you want to set the height of a TD, you also need to obtain the TD object first, and then use the setAttribute() method

Copy code The code is as follows:

var objCell = document.getElementById("myCell");

objCell.setAttribute("height",24);//Set the height of the cell to 24

I encountered a problem with setting styles when using it. You cannot use setAttribute("class","inputbox2"); instead, you should use setAttribute("className","inputbox2"). Haha, I guess the same problem exists for others. The problem is that some attributes are inconsistent with what we have in DW. Haha, let’s explore it by ourselves.

B. Direct assignment

Copy code The code is as follows:

var objMyTable = document.getElementById("myTable");

objMyTable.border=1;//Set the border for the table to 1

This method is also applicable to all, haha.

4. Create a table

After understanding the addition and deletion of rows and cells , you can create a table.

Step one: You need to have a table that you can dynamically change. What I’m talking about here is a table that already exists on the page. We need to set an id: myTable

Copy code The code is as follows:

var objMyTable = document.getElementById("myTable");

Step 2: Create row and column objects

Copy code The code is as follows:

var index = objMyTable.rows.length-1;
var nextRow = objMyTable.insertRow(index);//The rows to be added are added from the second to last row

//Cell box number
var newCellCartonNo = nextRow.insertCell();
var cartonNoName = "IptCartonNo";
newCellCartonNo.innerHTML = " ";
newCellCartonNo.setAttribute("className","tablerdd");

That’s it, you can simply create a row and column. I've posted the specific code below. It’s just a very simple example, but the method is probably the above, haha, let’s explore slowly~

Copy code The code is as follows:

.org/1999/xhtml">

< title>Blu-ray-BlueShine

Line 1< /td>

5. appendChild() method

Copy code The code is as follows:

My Test Page