表格添加行，删除行通用方法 - - ITeye博客

`

keimon

浏览: 74838 次
性别:
来自: 上海

最近访客更多访客>>

Jessy_橙子

yw8886484

LuWeiFeng

ntanita

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

ch2004： ...
仿百度百科的页面导航效果
y_hai_n：需要再加一个jquery.min.js，效果就出来了，谢谢分享 ...
仿百度百科的页面导航效果
liu621java： t=exp(2)*L*cos(degree)-L; 能详细的解 ...
两种图片360度旋转方法的比较
town2you：代码很好用，谢谢！不过有个小问题不知道怎么弄：右边导航栏是固 ...
仿百度百科的页面导航效果
town2you：很好用，谢谢了！
仿百度百科的页面导航效果

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

博客分类：

Javascript

阅读更多

//表格添加行，删除行通用方法：
//评标办法
/*
* 参数意思：
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' onclick="addRow('tab1','tr1',['td1'],1100,'1000')" />  
    <input type='button' value=' 删除 ' id='del1000' onclick="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' onclick="addRow('tab2','tr2',['td2'],1200,'1001',[1,1,1])" />  
    <input type='button' value=' 删除 ' id='del1001' onclick="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' onclick="addRow('tab3','tr3',['td3'],1300,'1002',[2,1])" />  
    <input type='button' value=' 删除 ' id='del1002' onclick="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' onclick="addRow('tab4','tr4',['td41','td42'],1400,'1004',[2,1])" />  
        <input type='button' value=' 删除 ' id='del1002' onclick="deleteRow('tab4','tr4',['td41','td42'],'1004')" />

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

分享到：

div-css-两列高度自适应 | jquery插件的编写（放置于Github）

2013-04-26 10:17
浏览 950
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

js 自定义表格支持调整列宽排序数据校验添加/删除行回车跳转只适用IE: 5. **删除行**：与添加行相对，删除行功能允许用户移除不再需要的记录。通常，用户会选择一行然后点击“删除”按钮，或者选中多行进行批量删除。删除操作通常会有确认提示，以防误操作。 6. **回车跳转**：这是一种...

javascript 动态创建表格：新增、删除行和单元格.zip: 1. `appendChild()`：这是DOM中的一个通用方法，用于将一个节点添加到父节点的子节点列表的末尾。例如，如果要添加一个新的表格行，我们首先需要获取到`<table>`元素，然后创建一个新的`<tr>`元素，最后使用`...

测量通用表格（种类多，非常丰富）: 7. **自定义化**：用户可以根据自己的需求对表格进行调整，添加或删除列，以满足特定的测量或报告需求。 8. **模板化**：预设的模板可以减少重复工作，如设置好计算公式、条件格式等，使得用户能迅速开始新的测量...

通用WEB表格增删改操作（附源码）: JavaScript或jQuery可以方便地添加、删除、修改表格行或单元格。例如，使用jQuery动态添加一行： ```javascript var newRow = $("<tr><td>新内容</td></tr>"); $("#tableId").append(newRow); ``` 二、AJAX通信 ...

中文编程人员必须掌握的最全最详细的高级表格说明: - 插入行（InsertRow）方法用于在指定位置插入一个空行，若未指定位置，则在表格的最底部添加。 - 这两种操作都有返回值，成功则返回真（真值），失败则返回假（假值）。 - 对于插入列和插入行操作，列标题名...

5570预提费用通用表格.zip: 在实际操作中，企业还需要根据自身的业务需求调整表格结构，添加或删除字段，确保表格的实用性。同时，定期更新和审核预提费用表格，确保数据的准确性，对于保持良好的财务健康至关重要。综上所述，5570预提费用...

QT 电子表格（Designer设计版）: 2. **QTableView和QTableWidget**：学习如何使用这两个组件来展示和操作数据，包括添加、删除行和列，设置单元格的样式，以及处理数据绑定。 3. **数据模型（QAbstractItemModel）**：实现自定义的数据模型，以存储...

表格编辑器: 通过该编辑器，用户可以自由地添加或删除行和列，调整单元格的宽度和高度，使表格布局更加符合需求。其次，表格编辑器支持文字和图片的编辑。在表格中插入文本，可以设置字体、字号、颜色和对齐方式等，满足各种...

Excel表格通用模板：各单位排班表(自动识别日期、天数统计).pdf: Excel表格通用模板：各单位排班表（自动识别日期、天数统计）是一种强大的电子表格模板，旨在帮助用户快速创建和管理排班表。下面是该模板的详细知识点： 1. 自动识别日期：该模板可以自动识别日期，避免了手动输入...

jquery.common通用方法: 《jQuery.common通用方法详解》在Web开发领域，jQuery库以其简洁、易用的API深受开发者喜爱。jQuery.common就是一种常见的做法，它将常用的jQuery方法进行封装，形成一个通用的方法集合，以方便开发者在项目中复用...

js网页表格导出excel文件代码.zip: 6. **CSV格式**：CSV是一种通用的文件格式，用于存储表格数据，每一行表示一行记录，每列数据之间用逗号分隔。Excel可以很好地打开和编辑CSV文件。 7. **文件保存**：在JavaScript中，使用`window.URL....

紫金桥软件通用数据表组件: 此外，还有BOOLRemoveCol和BOOLRemoveRow函数分别用于删除表格对象中的指定列和行，stringGetColName和intGetColCount函数用于获取指定列的名称和表格对象中的列数。值得注意的是，当用户希望为通用数据表某一列...

IBM DB2通用数据库SQL入门: - **插入数据（INSERT INTO）**：向表格中添加新记录。 - **更新数据（UPDATE）**：修改已存在的记录。 - **删除数据（DELETE）**：从表格中移除记录。 #### 2.3 数据查询语言（Data Query Language, DQL） - **...

网页制作实验教程建立表格PPT学习教案.pptx: 3. 表格操作：可以通过右键菜单调整表格布局，如插入、删除行或列，合并或拆分单元格。 4. 格式化表格：使用“格式化表格”命令，进一步定制表格外观。 5. 预览效果：在浏览器中预览以确保表格显示正确。实验二十...

如何操作办公中的电子表格的说明.pptx: - 单元格、行、列编辑：添加、删除等操作，注意删除与清除的区别。 - 文字对齐：包括水平和垂直对齐，可用工具栏按钮和快捷菜单。 - 排序与计算：数据表格可以按不同标准排序，Excel适合进行公式计算。 - 转换...

C#树型结构分类统计表格一般性解决方案: 在实际应用中，可能还需要实现其他功能，比如添加、删除节点，搜索特定节点，遍历树等。这些操作都可以通过扩展 `TreeNode<T>` 类或者创建辅助类来实现。至于源码，压缩包中的文件应该是实现上述功能的具体代码，...

数据库操作_excel表格sQ_CSVSQL_数据库_: SQL的核心功能包括SELECT语句（用于检索数据）、INSERT语句（用于添加新数据）、UPDATE语句（用于修改现有数据）和DELETE语句（用于删除数据）。此外，还有更复杂的JOIN操作，用于合并来自多个表的数据，以及GROUP ...

通用的增删改快来下载呀: 这个“通用的添删改”压缩包文件很可能是为初学者或新学习者准备的一套示例代码，包含了使用`DataTable`进行数据操作的各种基本功能，如添加（Add）、删除（Delete）和修改（Update）记录。 `DataTable`的核心特性...

WPF多表头技术的实现，支持多行表头: "对列只可以是全部已知"表示当前的实现假设所有的列在程序启动时就已经完全确定，无法动态添加或删除列。这限制了程序的灵活性，如果需要根据用户输入或外部数据源动态调整列的数量，那么当前实现可能需要进行修改。...

vc6写的表格控件源码，非常完整，可以直接编译: 它提供了丰富的功能选项，如行和列的添加删除、排序、过滤、单元格样式设置等，能够极大地提高用户体验并简化开发工作。在提供的文件列表中，我们可以看到以下几个关键文件： 1. **KissableGrid.aps**：这是一个...

Global site tag (gtag.js) - Google Analytics