Javascript how to create a table of javascript two ways to draw a table
- 2020-03-30 00:50:59
- OfStack
1. InserRow () and insertCell() functions
The insertRow() function can take an argument, as follows:
InsertRow (index) : index starts at 0
This function adds a new row before the one at index, such as insertRow(0), before the first row. The default insertRow() function is equivalent to insertRow(-1), adding a new row to the end of the table. Generally, we use objtable.insertrow (objtable.rows.length) to add a row at the end of the table.
InsertCell () is used the same way as insertRow, so I won't say that again.
2. DeleteRow () and deleteCell() methods
The deleteRow() function can take an argument as follows: deleteRow(index) : index starts at 0
Similar to the above two methods, it simply deletes rows and cells at the specified location. The parameter 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:
var row=document.getElementById(" the Id");
var index=row.rowIndex;//It has this property, heh heh
objTable.deleteRow(index);
One of the problems I encountered in the process of using it is to tell you that when deleting rows in the table, if you delete a 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:
function clearRow(){
objTable= document.getElementById("myTable");
for( var i=1; i<objTable.rows.length ; i++ )
{
tblObj.deleteRow(i);
}
}
There are two problems with this code to remove the body of the original table. First of all, it can't be deleteRow(I), it should be deleteRow(1). Because the number of rows in the table changes when deleting rows in the table, this is the key to the problem. Rows.length is always getting smaller, and the number of rows deleted is always half less than expected, so the correct code for deleting rows in the table should look like this:
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. SetAttribute () method is adopted. The format is as follows: setAttribute(attribute, attribute value)
Note: this method can be used by almost any DOM object. The first parameter is the name of the property, such as: border. The second parameter is the value you want to set for the border, such as: 1
var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border",1);//Set the border to 1 for the table
Others, such as setting a height for a TD, get the TD object first and then use the setAttribute() method
var objCell = document.getElementById("myCell");
objCell.setAttribute("height",24);//Set the height of the cell to 24
There is a problem with setting the style when using. SetAttribute ("class","inputbox2") cannot be used. Instead, setAttribute("className","inputbox2") should be used. Hehe, I guess I have the same problem with other attributes. Some of them are inconsistent with the ones we have in DW.
B. Direct assignment
var objMyTable = document.getElementById("myTable");
objMyTable.border=1;//Set the border to 1 for the table
This method is also applicable to all, ha ha.
4. Create a table
Knowing the lines < Tr> And cells < Td> Then you can create the table.
Step 1: you need to have a table that you can dynamically change. I'm talking about a table that already has pages. We're going to set an id:myTable
var objMyTable = document.getElementById("myTable");
Step 2: create row and column objects
var index = objMyTable.rows.length-1;
var nextRow = objMyTable.insertRow(index);//I'm going to add the new row, and I'm going to add it from the second to the last row
//Cell number
var newCellCartonNo = nextRow.insertCell();
var cartonNoName = "IptCartonNo";
newCellCartonNo.innerHTML = " <input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";
newCellCartonNo.setAttribute("className","tablerdd");
Now that's it, you can simply create a row and column. I'll post the specific code below. Just very simple example, but the method is probably the above, ha ha, slowly groping it ~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> blu-ray -BlueShine</title>
<script language="JavaScript">
var Count=false,NO=1;
function addRow(){
Count=!Count;
//Add a line
var newTr = testTbl.insertRow(testTbl.rows.length);
//Add two columns
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//Sets the column contents and properties
if(Count){newTr.style.background="#FFE1FF";}
else {newTr.style.background="#FFEFD5";}
newTd0.innerHTML = '<input type=checkbox id="box4">';
NO++
newTd1.innerText=" The first "+ NO+" line ";
}
</script>
</head>
<body>
<table width="399" border=0 cellspacing="1" id="testTbl" style="font-size:14px;" >
<tr bgcolor="#FFEFD5">
<td width=6%><input type=checkbox id="box1"></td>
<td > The first 1 line </td>
<td > </td>
</tr>
</table>
<label>
<input type="button" value=" Insert row " onclick="addRow()" />
</label>
</body>
</html>
5. AppendChild () method
<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">
<!--
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>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
<p>
<input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" />
<input type="button" value="Remove Textbox" onclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>
<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">
<!--
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>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
<p>
<input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" />
<input type="button" value="Remove Textbox" onclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>