创建动态表格
1.1
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>TABLE01</title> 6 <script type="text/javascript"> 7 function add() { 8 var t = document.getElementById("tab"); 9 var r = t.insertRow(); 10 var c1 = r.insertCell(); 11 var c2 = r.insertCell(); 12 var c3 = r.insertCell(); 13 c1.innerHTML ="<input type='text'>"; 14 c2.innerHTML ="<input type='text'>"; 15 c3.innerHTML = "<button onclick='del(this)' > - </button>"; 16 } 17 function del(obj){ 18 var d = obj.parentNode.parentNode; 19 d.parentNode.removeChild(d); 20 } 21 </script> 22 </head> 23 <body> 24 <table border="1" cellpadding="0" cellspacing="2" id="tab"> 25 <tr> 26 <td width="150px" height="20px"> 编号 </td> 27 <td width="150px" height="20px"> 内容 </td> 28 <td width="38px" height="20px"> 删除 </td> 29 </tr> 30 </table> 31 <button onclick="add()" > + </button> 32 </body> 33 </html>
1.2
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS创建动态表格</title> 6 <script type="text/javascript"> 7 function delrow(obj){ 8 var tr = obj.parentNode.parentNode; 9 var table = document.getElementById("mytable"); 10 table.deleteRow(tr.rowIndex); 11 } 12 13 var count=2; 14 function addrow(){ 15 var table = document.getElementById("mytable"); 16 var tr = table.insertRow(); //插入一个新的 行 17 var td1 = tr.insertCell(); //插入一个新的 列 18 var td2 = tr.insertCell(); 19 var td3 = tr.insertCell(); 20 td1.innerHTML=count+"<input type='text'></input>"; 21 td2.innerHTML="<input type='text'></input>"; 22 td3.innerHTML="<input type ='button' value=' - ' onclick='delrow(this)'></input>"; 23 count++; 24 } 25 </script> 26 </head> 27 <body> 28 <table id = "mytable" border="1"> 29 <tr> 30 <td>1<input type="text"></input></td> 31 <td><input type="text"></input></td> 32 <td><input type ="button" value=" - " onclick="delrow(this)"></input></td> 33 </tr> 34 </table> 35 <input type ="button" value=" + " onclick="addrow()"></input> 36 </body> 37 </html>
创建动态表格，添加内容
2.1
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>TABLE02</title> 6 <script type="text/javascript"> 7 function add(){ 8 var name=document.getElementById("name").value; 9 var txt =document.getElementById("txt").value; 10 var t = document.getElementById("tab"); 11 var r = t.insertRow(); 12 var c1 = r.insertCell(); 13 c1.innerHTML=name; 14 var c2 = r.insertCell(); 15 c2.innerHTML=txt; 16 } 17 </script> 18 </head> 19 <body> 20 <div align="center"> 21 <form action="#" method="post" > 22 姓名: <input type="text" id="name"> 23 内容: <input type="text" id="txt" /> 24 <input type="button" value="添加" align="center" onclick="add()"/> 25 <input type="reset" value="重置"> 26 </form> 27 <br/> 28 <table id="tab" border="1" align="center" width="500PX"> 29 </table> 30 </div> 31 </body> 32 </html>
2.2
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS 创建动态表格传值</title> 6 <script type="text/javascript"> 7 function addrow(){ 8 var name = document.getElementById("name").value; 9 var num = document.getElementById("num").value; 10 var table=document.getElementById("mytable"); 11 var tbody=document.createElement("tbody"); 12 var tr=document.createElement("tr"); 13 var td_name=document.createElement("td"); 14 var td_num=document.createElement("td"); 15 td_name.appendChild(document.createTextNode(name)) 16 td_num.appendChild(document.createTextNode(num)) 17 tr.appendChild(td_name); 18 tr.appendChild(td_num); 19 tbody.appendChild(tr); 20 table.appendChild(tbody); 21 } 22 </script> 23 </head> 24 <body> 25 姓名<input type="text" id="name"> 26 编号<input type="text" id="num"><br/> 27 <input type="button" value="增加" onclick="addrow()"> 28 <table id="mytable" border="1" > 29 <tr> 30 <td>姓名</td> 31 <td>编号</td> 32 </tr> 33 </table> 34 </body> 35 </html>