基于JavaScript實(shí)現(xiàn)動態(tài)添加刪除表格的行
又一個動態(tài)控制表格的效果,用JavaScript動態(tài)生成表格行、表格列,以及還可動態(tài)刪除這些行列,行等,運(yùn)行代碼后,點(diǎn)擊對應(yīng)的功能按鈕,即可實(shí)現(xiàn)對應(yīng)的表格操作功能。
1.jsp
<table id="viewTabs"> <thead> <tr> <th>產(chǎn)品名稱</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ù) //表格當(dāng)前的行數(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實(shí)現(xiàn)動態(tài)添加刪除表格的行,希望對大家有所幫助。
- JS實(shí)現(xiàn)動態(tài)生成html table表格的方法分析
- js生成動態(tài)表格并為每個單元格添加單擊事件的方法
- JS實(shí)現(xiàn)動態(tài)生成表格并提交表格數(shù)據(jù)向后端
- JS控制網(wǎng)頁動態(tài)生成任意行列數(shù)表格的方法
- js動態(tài)生成指定行數(shù)的表格
- JS實(shí)現(xiàn)從表格中動態(tài)刪除指定行的方法
- JS對HTML表格進(jìn)行增刪改操作
- 動態(tài)添加刪除表格行的js實(shí)現(xiàn)代碼
- JavaScript獲取表格(table)當(dāng)前行的值、刪除行、增加行
- JavaScript動態(tài)生成帶刪除行功能的表格
相關(guān)文章
javascript進(jìn)行數(shù)組追加方法小結(jié)
javascript中給數(shù)組加元素是一個非常簡單的問題,javascript本身就提供了大量這類函數(shù),我們可以使用js自帶函數(shù)快速給數(shù)組增加元素了,本文就javascript進(jìn)行數(shù)組追加的方法做出如下小結(jié)。2014-06-06javascript算法學(xué)習(xí)實(shí)現(xiàn)代碼
有1到100000共10萬個數(shù)。從中隨機(jī)抽走兩個。再把原來的數(shù)字順序打亂。如何快速找到被抽走的兩個數(shù)2011-04-04JS中g(shù)etElementsByClassName與classList兼容性問題解決方案分析
這篇文章主要介紹了JS中g(shù)etElementsByClassName與classList兼容性問題解決方案,結(jié)合實(shí)例形式分析了getElementsByClassName與classList的使用方法、原理及兼容性問題的處理技巧,需要的朋友可以參考下2019-08-08uniapp中uni.navigateBack返回后刷新頁面數(shù)據(jù)的實(shí)現(xiàn)
本文主要介紹了uniapp中uni.navigateBack返回后刷新頁面數(shù)據(jù)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11基于jQuery通過jQuery.form.js插件使用ajax提交form表單
在jQuery Form插件可以讓你很容易的使用AJAX提交Form表單,主要方法ajaxForm和ajaxSubmit負(fù)責(zé)收集表單元素的信息,管理提交進(jìn)程。這兩種方法都是可配置的,讓你完全控制Form提交,本篇文章介紹基于jQuery通過jQuery.form.js插件使用ajax提交form表單,需要的朋友可以參考下2015-08-08js中onclick和addEventListener的區(qū)別
本文對javascript中onclick事件處理的方法和addEventListener監(jiān)聽器進(jìn)行講解,具有一定的參考價值,感興趣的可以了解一下2023-08-08JavaScript高級程序設(shè)計 閱讀筆記(二十) js錯誤處理
語法錯誤,也稱解析錯誤,發(fā)生在傳統(tǒng)語言的編譯時,在JavaScript中發(fā)生在解釋時,運(yùn)行時錯誤也稱為異常(exception,在編譯期/解釋器后)2012-08-08