I recently read three O'Reilly books, which we generally call beast books (the name of one of my classmates is very similar to mine, lol), and I have always wanted to do a sample to practice my skills, because many companies use dynamic forms, so , I tried to use js to make a dynamic form, and used the firfox browser to debug it, because the firbug plug-in is better to use. Originally, I wanted to implement a small function. I didn’t want to do so much, just click the button to add a row. , and then more and more were added, and they became more and more beautiful. Post the source code so that everyone can learn together. If you have any questions, you can correct them. If you are a beginner in js, please be merciful.
ps: I don’t know why the line number is not displayed above. I haven’t used it for a long time. The notes are clearly written and everyone can learn together.
Copy the code code as follows:
<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>Dynamic Table</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">
/*Only some variables can be declared outside the function, and operation methods cannot be used because there is no function to call and execute it. */
//When loading the page, put the selection box in the table header, because it is a one-time use
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 column
var inp = document.createElement('input');
inp.type = 'checkbox';
//DOM Level 2 event registration
catchEvent(inp,'click',function(){ //Register function to judge different states
if(inp.checked ==true){
allSelect();
}else{
cancelSelect();
}
});
//catchEvent(inp,'click',allSelect);
//catchEvent(inp,'change',cancelSelect);
childtd[0].appendChild(inp);
}
//Add a row
//var count =0;//Add a column for counting
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 input also needs to add an array.
tr.appendChild(arrtd[i]);
}
tab.appendChild(tr);
newSort();
}
//Delete operation
function deleteRow(){
var parentTr = new Array();//First put the selected rows in 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 placed directly inside, why can't it be completely deleted? ? Is it because there is not enough response?
//tab.removeChild(parentTr);
}
}
for(var i = 0;i<parentTr.length;i++){ //This will delete all selected items
if(parentTr[i]){ //Here we need to first determine whether it is a null value. If it is not null, remove it. Otherwise, an error will be reported.
tab.removeChild(parentTr[i]);
}
}
newSort();
}
//If deletion is performed, re-sort
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];//Get all nodes in the second column starting from 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]);
}
}
//select all operation
function allSelect(){
var box = document.getElementsByName('selectbox');
for(var i= 0;i<box.length;i++){
box[i].checked = true;
}
}
//Cancel all selections
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>Dynamic table</h3>
<input type="button" value="Add" 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>Serial number</td><td>Question one</td><td>Question two</td><td>Question three</td></tr>
</table>
</body>
</html></span>