`
keimon
  • 浏览: 72826 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

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

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')" /> &nbsp;
    <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])" /> &nbsp;
    <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])" /> &nbsp;
    <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">&nbsp;</td>
    <td id='td42' rowspan="8">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td rowspan="4">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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])" /> &nbsp;
        <input type='button' value=' 删  除 ' id='del1002' onclick="deleteRow('tab4','tr4',['td41','td42'],'1004')" />

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

分享到：
| jquery插件的编写（放置于Github）
评论
发表评论

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

相关推荐

    ASP.NET技巧收集

    DataGrid超级连接列，DataGrid行随鼠标变色，数字格式化，日期格式化，打开新的窗口并传送参数，为按钮添加对话框，删除表格选定记录，删除表格记录警告，关于日期格式，表格超连接列传递参数，清空Cookie ...

    ASP.NET基础控件-教程

    内容： 　Asp.net页面内传参数方法 　调用存储过程(两种方法比较) ...　Asp.net中DataList控件添加删除 　Asp.net获取请求的用户信息IP地址 　获取世界IP地址库显所在城市信息 　MySQL事务处理 　SQL内部常用函数

    asp.net开发常用整理集合

    不断更新中 ... Asp.net中DataList控件添加删除  Asp.net获取请求的用户信息IP地址  获取世界IP地址库显所在城市信息  MySQL事务处理  SQL内部常用函数  为gridview“删除”列添加确认对话框

    Android程序技术：ContentProvider.pptx

    进程间共享数据的本质是：添加、删除、获取 & 修改（更新）数据。 以ContentProvider的核心方法也主要是以下4个作用 Android为常见的数据（如通讯录、日程表等）提供了内置了默认的ContentProvider。 ...

    File文件登记簿(通用打印版)

    　（２）此标题不是表格内容，则按照无表格线的一行一列的表格来看待，以直尺量出表格最宽处为１６厘米，则在单元格宽度处填入１６００，特别注意，计量单位是以十分之一毫米为一个单位，高度３５毫米则填入３５０...

    dynamicTable.html

    工作中常常需要动态的添加或者删除表格行或者列，所以稍微整理了一下，实现了一些比较通用的功能。

    中易通用人事工资管理系统 v1.4.1.rar

    支持打卡记录的自动导入、人工添加、修改、删除；支持日出勤数据的自动计算、人工添加、修改、删除；支持月考勤数据统计、人工添加、修改、删除；出勤数据可自动导入到发放工资表中；支持电脑考勤。 3、工资管理...

    WEB通用权限管理系统源码

    通用权限管理框架源码 2013-5-15更新功能： 1、菜单导航管理 2、操作按钮 3、角色管理 4、部门管理 5、用户管理（用户权限） 6、用户组管理（设置成员，用户组权限） 7、系统配置（动态配置系统参数） 8、附加属性...

    CAD2012 入门讲解通用教程视频教学

    第05章\5.4.2 设置表格的数据、标题与表头样式.mp4 第05章\5.4.3 管理表格样式.mp4 第05章\5.4.4 新建表格.mp4 第05章\5.4.5 编辑表格和单元格.mp4 第05章\5.5.1 输入文字并添加背景.mp4 第05章\5.5.5 绘制标题栏....

    Linux下C++操作mysql和redis数据库的封装

    包含了mysql常用的增删改查操作，支持容器数据添加，各种模板数据添加，支持单行增加删除，单行数据修改，多行数据增加删除，多行数据修改，清空表格，多条件查询，多条件删除等等很多便捷的操作，插入和删除数据快...

    MIP2000通用信息管理平台XP标准版

    强大的数据管理：数据窗体包括对数据库主要操作有添加、更新、删除、导入、导出、复制、定位、替换、移动、查询、报表、统计和打印等等。 多级用户及权限管理：提供了三级用户管理机制，即系统用户、普通用户和共享...

    通用学校平台学生报名系统 ASP源码

    简单方便的学生报名系统和强大的后台管理系统结合，使学校方便管理管理报名项目，各项学生报名表格， 导出各种报名项目数据 【主要功能特色】 完整的功能示意图请见 报名系统功能说明图.gif 1) 前台报名提交：...

    功能测试用例大全1500条

    添加 10 删除 10 查询 返回目录 11 翻页控件 12 树控件的测试外观操作返回目录 12 命令按钮 返回目录 13 一、各种控件在窗体中混和使用时的测试 13 选项卡 返回目录 14 默认焦点 14 TAB顺序 14 快捷键/热键 14 上传...

    最新JAVA通用后台管理系统（ExtJS 4.2+Hibernate 4.1.7+Spring MVC 3.2.8）Eclipse版本

    4、Grid列表和表单，包含添加、删除、批量删除、修改、查看、图片查看和按条件查询列表等功能。 5、导入导出Excel数据，支持xlsx和xls文件。 6、资源管理（菜单管理）。 7、用户管理和部门管理。 8、权限管理。不仅...

    中小学简易成绩管理系统(excel)

    简易成绩分析系统使用说明 四川省泸州市纳溪区大渡中学教务室制作使用 ...该表可根据需要适当修改，如有多余行可删除，如行不够可往下复制，同样不必要的列也可删除，如各分数段统计列不够也可添加复制。

    易语言数据库操作源码（易之表超强版）

    1.通用易语言数据库维护,只有简单的三四行代码,即可以为你的数据库增加强大的维护功能.中心只要添加一个命令即可.2.可以为易语言数据库的数据结构任意添加与删除,还有修改与创建.3.集合易报表编辑器的所有功能.新...

    一维条形码打印程序

    2.3-[删除表格行]:删除数据表格内错误的数据行; 2.4-[清空数据]:清空上方文字1/上方文字2/条形码内容文本框内内容; 2.5-[页面设置]:设置排版打印的页面设置; 2.6-[清空表格]:清空数据表格内的所有数据行; 2.7-[导入...

    excel的使用

    这样我们可以方便准确地选取数据表格，并能有效避免使用拖动鼠标方法选取较大单元格区域时屏幕的乱滚现象。（9） 快速清除单元格的内容如果要删除内容的单元格中的内容和它的格式和批注，就不能简单地应用选定该...

    易语言模块914个

    删除文本所在行.ec 判断ASCII编码.ec 判断XP外观支持文件是否存在.ec 判断字符模块.ec 判断数据库.ec 判断进程是否存在的模块.ec 到文本.ec 办公组件密码管理模块.ec 功能集一模块 1.0.ec 功能集一模块.ec...

    iPhone开发秘籍

    2.10.2 通用core animation调用 56 2.11 秘诀：滑动视图 57 2.12 秘诀：转换视图 59 2.13 小结 61 第3章　视图控制器 63 3.1 视图管理 63 3.1.1 核心类 63 3.1.2 专用类 64 3.1.3 创建uiviewcontroller 64 ...

Magicbox
Global site tag (gtag.js) - Google Analytics