Js dynamically adds table data using insertRow and insertCell implementations

2020-03-30 03:04:38
OfStack
Effect:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405220914121.gif? 201442291444 ">

Code:

Js dynamically adds table data _2.html
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js Add table data dynamically _2  use insertRow and insertCell Method implementation </title> 

<script type="text/javascript"> 

var mailArr = [ 
{ "title": " a c# The problem ", "name": " Zhang SAN ", "date": "2014-03-21" }, 
{ "title": " a javascript The problem ", "name": " Li si ", "date": "2014-03-21" }, 
{ "title": " a c The problem ", "name": " 4 ", "date": "2014-03-21" }, 
{ "title": " a c++ The problem ", "name": " Zhao six ", "date": "2014-03-21" } 
]; 
var tab = null; 
window.onload = function () { 
loadTab(); 
// Future generations  
document.getElementById("selA").onclick = function() { 
if (document.getElementById("selA").checked == true) { 
seleAll(tab, true); 
} else { 
seleAll(tab, false); 
} 
}; 
//Delete all selected ones
document.getElementById("delSel").onclick = function() { 
//Iterate through all the input controls (except for the last all-optional checkbox)

var chks = document.getElementsByTagName('input'); 

for (var i = chks.length - 2; i >=0; i--) { 
var chk = chks[i]; 
if (chk.checked==true) { 
//Selected row deletion processing
var rowNow = chk.parentNode.parentNode; 
rowNow.parentNode.removeChild(rowNow); 
} else { 
alert("really"); 
} 
} 
}; 

}; 

function loadTab() { 
tab = document.getElementById("tb"); 
//Add the mailArr loop traversal mode to the table in tr mode
for (var rowindex = 0; rowindex < mailArr.length; rowindex++) { 
//var tr = tab.insertRow(-1);//-1 The last line  

var tr = tab.insertRow(tab.rows.length - 1);//Insert into the last two rows, and the last row is reserved for the selected row
var td1 = tr.insertCell(-1); 
td1.innerHTML = "<input type='checkbox'/>"; 
var td2 = tr.insertCell(-1); 
td2.innerHTML = mailArr[rowindex].title; 
var td3 = tr.insertCell(-1); 
td3.innerHTML = mailArr[rowindex].name; 
var td4 = tr.insertCell(-1); 
td4.innerHTML = mailArr[rowindex].date; 
} 
} 
//For the all select button to take effect, all rows of the table need to be traversed

function seleAll(mailTab, isSel) { 
for (var i = 0; i < mailTab.rows.length; i++) { 
var tr = mailTab.rows[i]; 
tr.cells[0].childNodes[0].checked = isSel; 
} 
} 
</script> 

</head> 
<body> 
<table id="tb" border="1" style="border-collapse: collapse;"> 
<tr> 
<th> The sequence </th> 
<th> The title </th> 
<th> Hair YouRen </th> 
<th> Take a time </th> 
</tr> 
<!--  Circulation increase  --> 


<!-- Future generations  --> 
<tr> 
<td colspan="4"> 
<input id="selA" type="checkbox" /><label for="selA"> Future generations </label> 
<a href="#" id="delSel"> delete </a></td> 
</tr> 
</table> 
</body> 
</html>