快捷導(dǎo)航

基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加刪除表格的行

更新時(shí)間：2016年02月01日 11:27:16 作者：風(fēng)中帆

又一個(gè)動(dòng)態(tài)控制表格的效果，用JavaScript動(dòng)態(tài)生成表格行、表格列，以及還可動(dòng)態(tài)刪除這些行列，行等，運(yùn)行代碼后，點(diǎn)擊對(duì)應(yīng)的功能按鈕，即可實(shí)現(xiàn)對(duì)應(yīng)的表格操作功能，接下來通過代碼實(shí)例給大家介紹JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加刪除表格的行，需要的朋友參考下

又一個(gè)動(dòng)態(tài)控制表格的效果，用JavaScript動(dòng)態(tài)生成表格行、表格列，以及還可動(dòng)態(tài)刪除這些行列，行等，運(yùn)行代碼后，點(diǎn)擊對(duì)應(yīng)的功能按鈕，即可實(shí)現(xiàn)對(duì)應(yīng)的表格操作功能。

1.jsp

<table id="viewTabs">
<thead>
<tr>
<th>產(chǎn)品名稱</th>
<th>編號(hào)</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)動(dòng)態(tài)添加刪除表格的行，希望對(duì)大家有所幫助。

您可能感興趣的文章:

相關(guān)文章

javascript進(jìn)行數(shù)組追加方法小結(jié)
javascript中給數(shù)組加元素是一個(gè)非常簡(jiǎn)單的問題,javascript本身就提供了大量這類函數(shù)，我們可以使用js自帶函數(shù)快速給數(shù)組增加元素了，本文就javascript進(jìn)行數(shù)組追加的方法做出如下小結(jié)。
2014-06-06
javascript算法學(xué)習(xí)實(shí)現(xiàn)代碼
有1到100000共10萬個(gè)數(shù)。從中隨機(jī)抽走兩個(gè)。再把原來的數(shù)字順序打亂。如何快速找到被抽走的兩個(gè)數(shù)
2011-04-04
JS中g(shù)etElementsByClassName與classList兼容性問題解決方案分析
這篇文章主要介紹了JS中g(shù)etElementsByClassName與classList兼容性問題解決方案,結(jié)合實(shí)例形式分析了getElementsByClassName與classList的使用方法、原理及兼容性問題的處理技巧,需要的朋友可以參考下
2019-08-08
教你javascript如何獲取對(duì)象的key和value
獲取對(duì)象所有key的方法，需要使用?Object.keys(obj)?方法,Object.keys(obj)方返回一個(gè)數(shù)組，這個(gè)數(shù)組包含obj對(duì)象中的所有key，這篇文章主要介紹了javascript如何獲取對(duì)象的key和value,需要的朋友可以參考下
2022-12-12
uniapp中uni.navigateBack返回后刷新頁面數(shù)據(jù)的實(shí)現(xiàn)
本文主要介紹了uniapp中uni.navigateBack返回后刷新頁面數(shù)據(jù)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(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-08
JS文件上傳神器bootstrap fileinput詳解
這篇文章主要介紹了JS文件上傳神器Bootstrap FileInput，樣式非常美觀，并且支持上傳文件預(yù)覽，ajax同步或異步上傳，拖曳文件上傳等炫酷的功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
微信小程序?qū)崿F(xiàn)表格前后臺(tái)分頁
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)表格前后臺(tái)分頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
js中onclick和addEventListener的區(qū)別
本文對(duì)javascript中onclick事件處理的方法和addEventListener監(jiān)聽器進(jìn)行講解,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-08-08
JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記（二十） js錯(cuò)誤處理
語法錯(cuò)誤,也稱解析錯(cuò)誤，發(fā)生在傳統(tǒng)語言的編譯時(shí)，在JavaScript中發(fā)生在解釋時(shí),運(yùn)行時(shí)錯(cuò)誤也稱為異常（exception，在編譯期/解釋器后）
2012-08-08