JS-Jquery实现动态的add和delete<input type="text">

动态添加与删除表格数据的JavaScript示例

最新推荐文章于 2022-12-20 15:17:09 发布

原创最新推荐文章于 2022-12-20 15:17:09 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

JS 专栏收录该内容

5 篇文章

订阅专栏

本文提供了一个JavaScript实例，展示了如何使用jQuery动态地向表格中添加和删除数据，包括添加数据限制和删除操作处理。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>JS-demo01.html:JS动态的添加和删除</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript">
  /*
   *@author Roin.li
   *@time 2012-02-15 12:16:00
   *@decription          <input type="text">实现动态的js"添加","删除"
   */
  function toFpcyAdd(){// 添加
   //var trSize = $("#fpcyTable").find("tr:gt(2)").size();
   var trSize = $("#fpcyTable").find("tr:gt(2)").length;
   if(trSize >= 5){
    alert("添加数据不能超过5条");
    return;
   }
   $("#fpcyTable").find("tr:eq(3)").clone(true).appendTo($("#fpcyTable")).find("input[type='text']").val("").end().find("td:eq(0)").text(trSize + 1).end().find("input:eq(0)").focus();
  }

  function toFpcyDelete(obj){// 删除
   debugger;
   var $objparents = $(obj).parents("tr:eq(0)"); // parents的祖先元素是? 是table吗? 不是，看错了，input后面还有个td呢，td之后是tr,所以tr是祖先元素
   var textvalue = $objparents.find("td:eq(0)").text();
   var trsize = $("#fpcyTable tr:gt(2)").size();
   if(trsize > 1){
    $objparents.nextAll("tr").each(function(index,item){
     $(item).find("td:eq(0)").text(textvalue - 0 + index);
    })
    $objparents.remove();
   }
   //alert(111);
   //var textValue = $(this).find("tr:eq(0)").text
   //alert(textValue);
  }


</script>
</head>

<body>
     <table class="commandTable" cellspacing="0px" id="fpcyTable">
   <tr><td class="mb_tit_1" colspan="5"></td></tr>
   <tr><td class="tableCaption" colspan="5">查验条件列表</td></tr>
   <tr><td class="tableTitle" align="center">序号</td><td class="tableTitle">发票代码</td><td class="tableTitle">发票号码</td><td class="tableTitle">操作</td></tr>
   <tr>
    <td class="td_02">1</td>
    <td class="td_02"><input type="text" size="20" name="nfpdm"/></td>
    <td class="td_02"><input type="text" size="20" name="nfphm"/></td>
    <td class="td_02"><a href="javascript:void(0)"><input type="button" id="toFpcyDelete" value="删除" onclick="toFpcyDelete(this)"/></a></td>
   </tr>
  </table>
  <table><tr><td><input type="button" id="toFpcyAdd" value="添加" onclick="toFpcyAdd()"/></td></tr></table>
</body>
</html>