又一個動態控制表格的效果,用JavaScript動態生成表格行、表格列,以及還可動態刪除這些行列,行等,運行代碼後,點擊對應的功能按鈕,即可實現對應的表格操作功能。
1.jsp
<table id="viewTabs"> <thead> <tr> <th>產品名稱</th> <th>編號</th> <th>數量</th> <th>重量</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input name="productName" type="text"></td> <td><input name="productNumber" type="text"></td> <td><input name="quantity" type="text"></td> <td><input name="weight" type="text"></td> <td></td> </tr> </tbody> </table> <button type="button" onclick="addTable();" style="margin-left: 750px;">添加行</button>
2.js
//添加行 function addTable(){ var tab=document.getElementById("viewTabs"); //獲得表格 var colsNum=tab.rows.item(0).cells.length; //表格的列數 //表格當前的行數 var num=document.getElementById("viewTabs").rows.length; var rownum=num; tab.insertRow(rownum); for(var i=0;i<4; i++) { tab.rows[rownum].insertCell(i);//插入列 if(i==0){ tab.rows[rownum].cells[i].innerHTML= '<input name="productName" type="text"/>'; }else if(i==1){ tab.rows[rownum].cells[i].innerHTML='<input name="productNumber" type="text"/>'; }else if(i==2){ tab.rows[rownum].cells[i].innerHTML='<input name="quantity" type="text"/>'; }else{ tab.rows[rownum].cells[i].innerHTML='<input name="weight" type="text"/>'; } } tab.rows[rownum].insertCell(i); tab.rows[rownum].cells[i].innerHTML='<a href="#" onclick="delRow(this)">刪除行</a>'; } //刪除行 function delRow(obj) { var Row=obj.parentNode; var Row=obj.parentNode; //tr while(Row.tagName.toLowerCase()!="tr") { Row=Row.parentNode; } Row.parentNode.removeChild(Row); //刪除行 }
以上所述是小編給大家分享的JavaScript實現動態添加刪除表格的行,希望對大家有所幫助。