表格添加行，删除行通用方法

iteye_6992

于 2013-04-26 10:17:06 发布

99

分类专栏： Javascript 文章标签： JavaScript ViewUI

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

//表格添加行，删除行通用方法：
//评标办法
/*
* 参数意思：
tabId:表格的id值；
rowNum:添加行，删除行所在行即tr的id值；
tdRows:数组，当添加行时，需要增加某些td的rowSpan时，把这些td的id放在一个数据中，当不需要时，数据为空，即[]；
startId:增加行数，各个新增td的id值的起始id值；
hidId:隐藏域的值；
cellArr:数组，新增行td的colSPan数组，默认是增加，删除按钮所在td的colSpan值；
*/
     //添加行
     function addRow(tabId,rowNum,tdRows,startId,hidId,cellArr){
   var tab = document.getElementById(tabId);
   var rowNum = document.getElementById(rowNum);
        if(tdRows.length>0){
           for(var i=0; i<tdRows.length; i++){
              var tbRow = document.getElementById(tdRows[i]);
              tbRow.rowSpan++;
           }
        }
   var hidObj = document.getElementById(hidId);
   hidObj.value++;
   cells = (!!cellArr ? cellArr.length : rowNum.getElementsByTagName('td')[0].colSpan);
   var rowIndex = rowNum.rowIndex;
   var tr = tab.insertRow(rowIndex);
   var tdId = tab.rows.length*cells + startId
   for(var i=0; i<cells; i++){
      var td = tr.insertCell();
    if(cellArr && cellArr.length>0){
       td.colSpan = cellArr[i];
    }
      td.style.border = '1px solid #000';
      td.innerHTML = '<textarea class="textarea1" id='+tdId+' style="width:90%"></textarea>'
      tdId++
   }
   }
   //删除行
   function deleteRow(tabId,rowNum,tdRows,hidId){
   var tab = document.getElementById(tabId);
   var rowNum = document.getElementById(rowNum);
   var hidObj = document.getElementById(hidId);
   var rowIndex = rowNum.rowIndex;
   var hidVal = hidObj.value;
   if(hidVal>0){
     tab.deleteRow(rowIndex-1);
     hidObj.value--;
            if(tdRows.length>0){
               for(var i=0; i<tdRows.length; i++){
                  var tbRow = document.getElementById(tdRows[i]);
                  tbRow .rowSpan--;
               }
}
   }else{
     alert('无法删除！')
   }
   }

//==================================================

调用方法如下：

<body>
<h2>无cellArr参数</h2>
<table id='tab1' width="100%" border="1">
<tr>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
</tr>
<tr>
    <td id='td1' rowspan="3">00</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
</tr>
<tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
</tr>
<tr id='tr1'>
    <td colspan="3">
<input type='hidden' id='1000' value=0 />
    <input type='button' value=' 添加 ' id='add1000' οnclick="addRow('tab1','tr1',['td1'],1100,'1000')" />  
    <input type='button' value=' 删除 ' id='del1000' οnclick="deleteRow('tab1','tr1',['td1'],'1000')" />

</td>
</tr>
</table>

<h2>有cellArr参数，但效果与无cellArr时一样</h2>
<table id='tab2' width="100%" border="1">
<tr>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
</tr>
<tr>
    <td id='td2' rowspan="3">00</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
</tr>
<tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
</tr>
<tr id='tr2'>
    <td colspan="3">
<input type='hidden' id='1001' value=0 />
    <input type='button' value=' 添加 ' id='add1001' οnclick="addRow('tab2','tr2',['td2'],1200,'1001',[1,1,1])" />  
    <input type='button' value=' 删除 ' id='del1001' οnclick="deleteRow('tab2','tr2',['td2'],'1001')" />

</td>
</tr>
</table>

<h2>有cellArr参数，即设置的colSpan不都是1</h2>
<table id='tab3' width="100%" border="1">
<tr>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
</tr>
<tr>
    <td id='td3' rowspan="3">00</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
</tr>
<tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
</tr>
<tr id='tr3'>
    <td colspan="3">
<input type='hidden' id='1002' value=0 />
    <input type='button' value=' 添加 ' id='add1002' οnclick="addRow('tab3','tr3',['td3'],1300,'1002',[2,1])" />  
    <input type='button' value=' 删除 ' id='del1002' οnclick="deleteRow('tab3','tr3',['td3'],'1002')" />

</td>
</tr>
</table>

<h2>tdRows存在不知一个值；有cellArr参数，即设置的colSpan不都是1</h2>
<table id='tab4' width="100%" border="1">
<tr>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
    <td>标题</td>
</tr>
<tr>
    <td id='td41' rowspan="8"> </td>
    <td id='td42' rowspan="8"> </td>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td rowspan="4"> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
<tr id='tr4'>
    <td colspan="3">
    <input type='hidden' id='1004' value=0 />
        <input type='button' value=' 添加 ' id='add1002' οnclick="addRow('tab4','tr4',['td41','td42'],1400,'1004',[2,1])" />  
        <input type='button' value=' 删除 ' id='del1002' οnclick="deleteRow('tab4','tr4',['td41','td42'],'1004')" />

</td>
</tr>
</table>
</body>

关注

0
点赞
踩
0
收藏
0
评论
表格添加行，删除行通用方法

//表格添加行，删除行通用方法：//评标办法/** 参数意思： tabId:表格的id值； rowNum:添加行，删除行所在行即tr的id值； tdRows:数组，当添加行时，需要增加某些td的rowSpan时，把这些td的id放在一个数据中，当不需要时，数据为空，即[]； startId:增加行数，各个新增td的id值的起始id值； hidId:隐藏域的值； cellArr:数组，...
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。