jquey实现的动态表格的新增及删除行_jquey 动态添加删除-优快云博客

本文链接：https://blog.youkuaiyun.com/java_jane/article/details/48829083

本文介绍了一种使用jQuery实现的动态表格操作方法，包括新增、删除行及全选、反选等功能。通过简单的按钮交互即可完成对表格的操作。

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

以下为使用jquey实现的动态表格的新增及删除行

<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //添加一行操作 
  $("#addrow").click(function(){
  var len= $("#showtblSys tr").length
   var typechoice ="<input type='radio' name='ModifyType"+len+"' onclick= setCheckBox(this) value='1'>" +"新增</input><input  type='radio' name='ModifyType"+len+"' onclick= setCheckBox(this)  value='0'>修改</input><input   type='radio' name='ModifyType"+len+"' onclick= setCheckBox(this) value='-1'>注销</input>"
    var str="<tr><td><input  type='checkbox' value='showfirstValue"+len+"'  name='tabletr' onclick='changeState(this)' id='perrow"+len+"'>"+len+"行</input></td><td>"+typechoice+"</td><td><input type='text' value='efg'></input></td></tr>";
    $("#showtblSys").append(str);
  });

  //全选按钮操作
      $("#checkAllSysid").click(function(){ 
          var $this = $(this);
          if(this.checked){
              $("input[name='tabletr']").not(":checked").trigger("click");
              $("input[name='tabletr']").attr("checked",'true');
          }else{
              $("input[name='tabletr']:checked").trigger("click");
              $("input[name='tabletr']").removeAttr("checked");
          }
      }) ;
 //删除按钮操作
$("#deleterow").click(function(){
     $("input[name='tabletr']:checked").parent("td").parent("tr").remove();
     $("#showtblSys tr").each(function(){
             $(this).find("td").each(function(){

         });
    }); 
    });
//反选操作
$("#oppsite").click(function(){
 $("input[name='tabletr']").trigger("click");
    })
})

//点击单选操作-选择每行前的复选框时--------2015年5月25日11:44:09add
function changeState(obj){
      var id=obj.id;
      var objstr = id.replace("perrow","ModifyType");
      if(document.getElementById(id).checked==true){
        $("input[name='"+objstr+"']:first").trigger("click").attr("checked",'true');

      }else{
        $(obj).removeAttr("checked");
        $("input[name="+objstr+"]:eq(0)").removeAttr("checked");
         $("input[name="+objstr+"]:eq(1)").removeAttr("checked");
         $("input[name="+objstr+"]:eq(2)").removeAttr("checked");
      }
}
//点击单选按钮-----------2015年5月25日11:44:22add
function setCheckBox(objradio){
         var radioname=objradio.name;
      $("input[name='"+radioname+"']").not($(objradio)).removeAttr("checked");
      $(objradio).attr("checked",true);
      var checkboxname = radioname.replace("ModifyType","perrow");
      $("#"+checkboxname).val(radioname.replace("ModifyType","showfirstValue"))
       $("#"+checkboxname).attr("checked",'true');
      }

</script>
</head>
<body>
表格操作：<button type="button" id="addrow">新增</button><button type="button" id="deleterow">删除</button><button type="button" id="oppsite">反选</button>
<table id="showtblSys" border="2px">
<tr><td><input type="checkbox" name="checkAllSys" id="checkAllSysid">业务名称</input></td><td>类型</td><td>说明</td></tr>
</table>
</body></html>