文档章节

Jquery table 添加行 删除行

薄暮凉年
 薄暮凉年
发布于 2015/02/03 13:59
字数 520
阅读 38
收藏 0
    //添加行 js方法 
     function addTr2(tab, row){
            if($("#tab").find("tr").length > 31){
                alert('最多添加30条信息');
                return;
            };
            var trHtml="<tr class='item2list'>"
                trHtml+="<td><input class='txt3' type='text' name='productname' datatype='*' nullmsg='不能为空'/><font class='Validform_checktip'></font></td>";
                trHtml+="<td><input class='txt3' type='text' name='spec' datatype='*' nullmsg='不能为空'/><font class='Validform_checktip'></font></td>";
                trHtml+="<td><input class='txt3' type='text' name='num' value='1' datatype='*' nullmsg='不能为空'/><font class='Validform_checktip'></font></td>";
                trHtml+="<td><input type='text' name='unit' class='txt3' datatype='*' nullmsg='不能为空'/><font class='Validform_checktip'></font></td>";
                trHtml+="<td><select class='privatePublic'><option>公</option><option>私</option></select></td>";
                trHtml+="<td><input type='text' name='productplace' class='txt3'/></td>";
                trHtml+=" <td><input type='text' name='productplace' class='txt3'/></td>";
                trHtml+=" <td><input type='text' name='remark' class='txt3'/></td>";
                trHtml+=" <td><input type='button' value='删除行' onclick='deleteTr(this)'/></td>";
                trHtml+="</tr>"
                
            addTr(tab, row, trHtml);
          }

      function addTr(tab, row, trHtml){
             //获取table最后一行 $("#tab tr:last")
             //获取table第一行 $("#tab tr").eq(0)
             //获取table倒数第二行 $("#tab tr").eq(-2)
         var $tr=$("#"+tab+" tr").eq(row);
         if($tr.size()==0){
            alert("指定的table id或行数不存在!");
            return;
         }
         $tr.after(trHtml);
      }
      
      //删除表格中的指定行
        function deleteTr(obj) {
              $(obj).closest('tr').remove();
        }
      
      //操作的表格
      <table width="960" border="0" cellspacing="0" cellpadding="0" class="tab3" id="tab">
                    <tr>
                       <td>
                         <input type="button" value="添加行" onclick="addTr2('tab', -1)"/>
                          </td>
                    </tr>
              <tr>
                <th width="83">货品名称</th>
                <th width="87">货品规格</th>
                <th width="68">数量</th>
                <th width="63">单位</th>
                <th width="87">公/私</th>
                <th width="83">采购单位</th>
                <th width="66">姓名</th>
                <th width="149">备注</th>
                <th width="70">&nbsp;</th>
              </tr>
              <tr class="item2list">
                <td>
                    <input class="txt3" type="text" name="productname" datatype="*" nullmsg="不能为空" />
                    <font class="Validform_checktip"></font>
                </td>
                <td>
                    <input class="txt3" type="text" name="spec" datatype="*" nullmsg="不能为空"/>
                    <font class="Validform_checktip"></font>
                </td>
                <td>
                    <input class='txt3' type='text'value="1" datatype="n" nullmsg="不能为空" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" name='num'/>
                    <font class="Validform_checktip"></font>
                </td>
                <td>
                    <input type="text" name="unit" class="txt3" datatype="*" nullmsg="不能为空"/>
                    <font class="Validform_checktip"></font>
                </td>
                <td>
                    <select class="privatePublic">
                        <option>公</option>
                        <option>私</option>
                    </select>
                    <font class="Validform_checktip"></font>
                </td>
                <td>
                    <input type="text" name="productplace" class="txt3"/>
                </td>
                <td>
                    <input type="text" name="productplace" class="txt3"/>
                </td>
                <td>
                    <input type="text" name="remark" class="txt3"/>
                </td>
                <td>
                    <input type="button" value="删除行" onclick="deleteTr(this)"/>
                </td>
              </tr>
           </table>


© 著作权归作者所有

薄暮凉年
粉丝 32
博文 29
码字总数 15951
作品 0
朝阳
私信 提问
jquery 新建元素的事件绑定

我想很多人都会向我一样曾经被动态添加元素的事件绑定困惑很久,也就是在页面加载完成后给已有元素绑定了事件,但又新增加的元素上却没有绑定任何事件。 js的事件监听跟css不一样,css只要设定...

陈好
2014/08/14
0
0
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.7K
1
推荐十个最新免费的 jQuery 表格插件

作为开发者都知道插件的重要性,有了插件的帮助,工作会更加高效。这次,我们收集了一些优秀的 jQuery 表格插件介绍给大家。 创建一个表格(table)并调整其规模,是一项艰难而繁琐的工作。作...

oschina
2015/06/10
38.6K
10
jQuery 表格工具集

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

红薯
2010/04/15
9.4K
10
jquery表格

新闻来源:noupe.com 本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行...

长平狐
2012/10/16
386
1

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
15
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
10
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
14
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部