基于JavaScript實現(xiàn)動態(tài)添加刪除表格的行
又一個動態(tài)控制表格的效果,用JavaScript動態(tài)生成表格行、表格列,以及還可動態(tài)刪除這些行列,行等,運行代碼后,點擊對應的功能按鈕,即可實現(xiàn)對應的表格操作功能。
1.jsp
<table id="viewTabs"> <thead> <tr> <th>產品名稱</th> <th>編號</th> <th>數(shù)量</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; //表格的列數(shù) //表格當前的行數(shù) 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實現(xiàn)動態(tài)添加刪除表格的行,希望對大家有所幫助。
相關文章
JS中getElementsByClassName與classList兼容性問題解決方案分析
這篇文章主要介紹了JS中getElementsByClassName與classList兼容性問題解決方案,結合實例形式分析了getElementsByClassName與classList的使用方法、原理及兼容性問題的處理技巧,需要的朋友可以參考下2019-08-08uniapp中uni.navigateBack返回后刷新頁面數(shù)據的實現(xiàn)
本文主要介紹了uniapp中uni.navigateBack返回后刷新頁面數(shù)據的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-11-11基于jQuery通過jQuery.form.js插件使用ajax提交form表單
在jQuery Form插件可以讓你很容易的使用AJAX提交Form表單,主要方法ajaxForm和ajaxSubmit負責收集表單元素的信息,管理提交進程。這兩種方法都是可配置的,讓你完全控制Form提交,本篇文章介紹基于jQuery通過jQuery.form.js插件使用ajax提交form表單,需要的朋友可以參考下2015-08-08js中onclick和addEventListener的區(qū)別
本文對javascript中onclick事件處理的方法和addEventListener監(jiān)聽器進行講解,具有一定的參考價值,感興趣的可以了解一下2023-08-08JavaScript高級程序設計 閱讀筆記(二十) js錯誤處理
語法錯誤,也稱解析錯誤,發(fā)生在傳統(tǒng)語言的編譯時,在JavaScript中發(fā)生在解釋時,運行時錯誤也稱為異常(exception,在編譯期/解釋器后)2012-08-08