欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2016年02月01日 11:27:16   作者:風(fēng)中帆  
又一個動態(tài)控制表格的效果,用JavaScript動態(tài)生成表格行、表格列,以及還可動態(tài)刪除這些行列,行等,運(yùn)行代碼后,點(diǎn)擊對應(yīng)的功能按鈕,即可實(shí)現(xiàn)對應(yīng)的表格操作功能,接下來通過代碼實(shí)例給大家介紹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)添加刪除表格的行,希望對大家有所幫助。

相關(guān)文章

  • javascript進(jìn)行數(shù)組追加方法小結(jié)

    javascript進(jìn)行數(shù)組追加方法小結(jié)

    javascript中給數(shù)組加元素是一個非常簡單的問題,javascript本身就提供了大量這類函數(shù),我們可以使用js自帶函數(shù)快速給數(shù)組增加元素了,本文就javascript進(jìn)行數(shù)組追加的方法做出如下小結(jié)。
    2014-06-06
  • javascript算法學(xué)習(xí)實(shí)現(xiàn)代碼

    javascript算法學(xué)習(xí)實(shí)現(xiàn)代碼

    有1到100000共10萬個數(shù)。從中隨機(jī)抽走兩個。再把原來的數(shù)字順序打亂。如何快速找到被抽走的兩個數(shù)
    2011-04-04
  • JS中g(shù)etElementsByClassName與classList兼容性問題解決方案分析

    JS中g(shù)etElementsByClassName與classList兼容性問題解決方案分析

    這篇文章主要介紹了JS中g(shù)etElementsByClassName與classList兼容性問題解決方案,結(jié)合實(shí)例形式分析了getElementsByClassName與classList的使用方法、原理及兼容性問題的處理技巧,需要的朋友可以參考下
    2019-08-08
  • 教你javascript如何獲取對象的key和value

    教你javascript如何獲取對象的key和value

    獲取對象所有key的方法,需要使用?Object.keys(obj)?方法,Object.keys(obj)方返回一個數(shù)組,這個數(shù)組包含obj對象中的所有key,這篇文章主要介紹了javascript如何獲取對象的key和value,需要的朋友可以參考下
    2022-12-12
  • uniapp中uni.navigateBack返回后刷新頁面數(shù)據(jù)的實(shí)現(xiàn)

    uniapp中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通過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詳解

    這篇文章主要介紹了JS文件上傳神器Bootstrap FileInput,樣式非常美觀,并且支持上傳文件預(yù)覽,ajax同步或異步上傳,拖曳文件上傳等炫酷的功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • 微信小程序?qū)崿F(xiàn)表格前后臺分頁

    微信小程序?qū)崿F(xiàn)表格前后臺分頁

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)表格前后臺分頁,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • js中onclick和addEventListener的區(qū)別

    js中onclick和addEventListener的區(qū)別

    本文對javascript中onclick事件處理的方法和addEventListener監(jiān)聽器進(jìn)行講解,具有一定的參考價值,感興趣的可以了解一下
    2023-08-08
  • JavaScript高級程序設(shè)計 閱讀筆記(二十) js錯誤處理

    JavaScript高級程序設(shè)計 閱讀筆記(二十) js錯誤處理

    語法錯誤,也稱解析錯誤,發(fā)生在傳統(tǒng)語言的編譯時,在JavaScript中發(fā)生在解釋時,運(yùn)行時錯誤也稱為異常(exception,在編譯期/解釋器后)
    2012-08-08

最新評論