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

Author：Eve Cole Update Time：2025-01-28 04:00:02

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. It can be obtained by the following method and then deleted:

Copy the code code as follows:

var row=document.getElementById("row's Id");

var index=row.rowIndex;//There is this attribute, hehe

objTable.deleteRow(index);

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

Copy the code code as follows:

function clearRow(){

objTable= document.getElementById("myTable");

for( var i=1; i<objTable.rows.length ; i++ )

{

tblObj.deleteRow(i);

}

This code wants to delete the table 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 is always less than half of what is expected. Therefore, delete the table correctly. The line of code should look like this:

Copy the code code as follows:

function clearRow(){

objTable= document.getElementById("myTable");

var length= objTable.rows.length;

for(var i=1; i<length; 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 the code code as follows:

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

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

For other things, 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 the code code 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 others have the same problem, some The attributes are inconsistent with what we have in DW, haha, let’s explore by ourselves.

B. Direct assignment

Copy the code code as follows:

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

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

This method is also applicable to all, haha.

4. Create a table

Once you understand the addition and deletion of rows <tr> and cells <td>, you can create a table.

Step 1: You need to have a table that you want to 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 the code code as follows:

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

Step 2: Create row and column objects

Copy the code code 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 = "<input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";

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 the code code as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Blu-ray-BlueShine</title>

var Count=false,NO=1;

function addRow(){

Count=!Count;

//Add a row

var newTr = testTbl.insertRow(testTbl.rows.length);

//Add two columns

var newTd0 = newTr.insertCell();

var newTd1 = newTr.insertCell();

var newTd2 = newTr.insertCell();

//Set column content and attributes

if(Count){newTr.style.background="#FFE1FF";}

else {newTr.style.background="#FFEFD5";}

newTd0.innerHTML = '<input type=checkbox id="box4">';

NO++

newTd1.innerText="Line "+ NO+";

}

</script>

</head>

<body>

</tr>

</table>

<label>

</label>

</body>

</html>

5. appendChild() method

Copy the code code as follows:

<html>

<head>

<!--

var textNumber = 1;

function addTextBox(form, afterElement) {

// Increment the textbox number

textNumber++;

//Create the label

var label = document.createElement("label");

//Create the textbox

var textField = document.createElement("input");

textField.setAttribute("type","text");

textField.setAttribute("name","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

// Add the label's text

label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));

// Put the textbox inside

label.appendChild(textField);

// Add it all to the form

form.insertBefore(label,afterElement);

return false;

}

function removeTextBox(form) {

if (textNumber > 1) { // If there's more than one text box

// Remove the last one added

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

textNumber--;

}

//-->

</script>

<!--

label {

display:block;

margin:.25em 0em;

}

-->

</style>

</head>

<body>

<p>

</p>

</form>

</body>

</html>

<html>

<head>

<!--

var textNumber = 1;

function addTextBox(form, afterElement) {

// Increment the textbox number

textNumber++;

//Create the label

var label = document.createElement("label");

//Create the textbox

var textField = document.createElement("input");

textField.setAttribute("type","text");

textField.setAttribute("name","txt"+textNumber);

textField.setAttribute("id","txt"+textNumber);

// Add the label's text

label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));

// Put the textbox inside

label.appendChild(textField);

// Add it all to the form

form.insertBefore(label,afterElement);

return false;

}

function removeTextBox(form) {

if (textNumber > 1) { // If there's more than one text box

// Remove the last one added

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

textNumber--;

}

//-->

</script>

<!--

label {

display:block;

margin:.25em 0em;

}

-->

</style>

</head>

<body>

<p>

</p>

</form>

</body>

</html>