Jquery table 添加行删除行

最新推荐文章于 2022-12-31 10:35:43 发布

weixin_34066347

最新推荐文章于 2022-12-31 10:35:43 发布

阅读量88

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/1998885/blog/374801

本文介绍了一种使用JavaScript实现的动态表格功能，包括添加和删除行的操作，并限制了最大行数为30行。通过具体的代码示例，展示了如何在网页上创建可动态调整的表格结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

    //添加行 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>

转载于:https://my.oschina.net/u/1998885/blog/374801