Of Stack

Native javaScript makes the dynamic table of comments very clear

  • 2020-03-30 01:08:58
  • OfStack
Recently looked at 3 o 'reilly's book, we generally called an animals (like me the name of a classmate laughs), and then I've always wanted to do a example to headphones, because the company a lot of use dynamic form, so, I will try to use js to do dynamic form, use firfox browser to debug, because firbug plug-in with the better, it is to achieve the function of a small, didn't want to do so, click on the button to add a line to go, then the more the more, also more and more beautiful. Post the source code, we can learn together, there is a problem can also point out, js beginners, forget god mercy.

Ps: I don't know why it doesn't show the line number. It's been a long time. The notes are clearly written, and we work together. 

 
<span style="font-size:18px;"><!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=utf-8" /> 
<title> The dynamic form </title> 
<style type="text/css"> 
body{ background-color:#9CC; text-align:center} 
table{ margin:10px auto;} 
tr th { border: 1px solid #096;} 
td{border: 1px solid #096;} 
</style> 
<script type="text/javascript"> 
 

//Place a selection box in the header of the table when the page is loaded, because this is a one-time process
window.onload = function(){ 
var tab = document.getElementById('tab'); 
var firsttr = document.getElementsByTagName('tr')[0]; 
var childtd = firsttr.childNodes; 
//Add a selection box to the first row and first column
var inp = document.createElement('input'); 
inp.type = 'checkbox'; 

//DOM Leve 2 event registration
catchEvent(inp,'click',function(){ //The registration function is judged in different states
if(inp.checked ==true){ 
allSelect(); 
}else{ 
cancelSelect(); 
} 
}); 
//catchEvent(inp,'click',allSelect); 
//catchEvent(inp,'change',cancelSelect); 
childtd[0].appendChild(inp); 

} 

//Add a line
//var count =0;// Add a column for   count  
function addRow(){ 
//count++; 
var tab = document.getElementById('tab'); 
var firsttr = document.getElementsByTagName('tr')[0]; 
var childtd = firsttr.childNodes; 
var tr = document.createElement('tr'); 
var arrtd = new Array(); 
var arrinp = new Array(); 
for(var i =0;i<childtd.length;i++){ 
arrtd[i] = document.createElement('td'); 
arrinp[i] = document.createElement('input'); 
if(i==0){ 
arrinp[i].type = 'checkbox'; 
arrinp[i].name = 'selectbox'; 
}else if(i==1){ 
//arrinp[i] = document.createTextNode(count); 
arrinp[i] = document.createTextNode(''); 
} 
arrtd[i].appendChild(arrinp[i]);//Think about why you add arrays to input.
tr.appendChild(arrtd[i]); 
} 

tab.appendChild(tr); 
newSort(); 
} 
//Delete operation
function deleteRow(){ 
var parentTr = new Array();//Place the selected rows on an array
var box = document.getElementsByName('selectbox'); 
var tab = document.getElementById('tab'); 
for(var i = 0;i<box.length;i++){ 
if(box[i].checked==true){ 
var parent = box[i].parentNode; 
parentTr[i] = parent.parentNode;//If this is directly placed inside why can't it be completely removed? Is it because there's not enough reaction?
//tab.removeChild(parentTr); 
} 
} 
for(var i = 0;i<parentTr.length;i++){ //This will remove all the selected items
if(parentTr[i]){ //Here to determine whether the value is null, if it is not empty to remove, otherwise will report an error.
tab.removeChild(parentTr[i]); 
} 
} 
newSort(); 
} 

//If a delete is performed, sort again
function newSort(){ 
var text = new Array(); 
var child_td = new Array(); 
var arr_tr = document.getElementsByTagName('tr'); 
for(var i = 1;i<arr_tr.length;i++){ 
child_td[i] = arr_tr[i].childNodes[1];//Gets all the nodes in the second column starting with the second row
if(child_td[i].childNodes[0]){ 
child_td[i].removeChild(child_td[i].childNodes[0]); 
} 
text[i] = document.createTextNode(i); 
child_td[i].appendChild(text[i]); 

} 
} 
//selection
function allSelect(){ 
var box = document.getElementsByName('selectbox'); 
for(var i= 0;i<box.length;i++){ 
box[i].checked = true; 
} 
} 

//All deselect
function cancelSelect(){ 
var box = document.getElementsByName('selectbox'); 
for(var i = 0;i<box.length;i++){ 
if(box[i].checked == true){ 
box[i].checked =false; 
} 
} 
} 
//Event registration function
function catchEvent(eventobj,event,eventHandler){ 
if(eventobj.addEventListener){ 
eventobj.addEventListener(event,eventHandler,false); 
}else if(eventobj.attachEvent){ 
event = 'on'+event; 
eventobj.attachEvent(event,eventHandler); 
} 
} 

//catchEvent(add,'click',addRow); 

</script> 
</head> 

<body> 
<h3> The dynamic form </h3> 
<input type="button" value=" increase " id="add" onclick="addRow()" /> 
<input type="button" value=" Select all " onclick="allSelect()" /> 
<input type="button" value=" Cancel all " onclick="cancelSelect()" /> 
<input type="button" value=" delete " id="delete" onclick="deleteRow()"/> 
<table id="tab" cellpadding="5px" cellspacing="0px"> 
<tr><td></td><td> The serial number </td><td> Subject to a </td><td> Topic 2 </td><td> The title three </td></tr> 
</table> 
</body> 
</html></span>
Related articles: