jquery 表格增加删除提交数组

iteye_13534

于 2012-09-03 13:53:39 发布

阅读量196

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery 表格增加行删除行

本文链接：https://blog.youkuaiyun.com/iteye_13534/article/details/82406296

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现动态表格行增删的方法。通过点击按钮可以添加新的行到表格中，并且每行都包含删除按钮，用于移除对应的行。此功能适用于收集多条相似类型的数据，如多家公司的信息。

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

<script type="text/javascript">
/** 
  * 动态添加删除表格行 
  */
 $("document").ready(function(){ 
         //表格的删除按钮事件绑定 
         $("#TbData #del").click(function() { 
        	 if($("#TbData tr").length > 2){ //保留表头和模板行
            	 $(this).parents(".repeat").remove(); 
             }
         }); 
         //第六个表格的添加按钮事件绑定 
         $("#add").click(function(){ 
             $("#tbbody>.template") 
                 //连同事件一起复制 
                 .clone(true) 
                 //去除模板标记 
                 .removeClass("template") 
                 //修改内部元素 
                 //.find(".content") 
                 //.text("新增行") 
                 //.end() 
                 //.find(".del") 
                 //.text("删除") 
                 //.end() 
                 //插入表格 
                 .appendTo($("#tbbody")) 
         });
         
         $("#sub").click(function(){
        	$("input[name='company[]']").each(function(){
        		var va = $(this).val();
	        	alert(va);
        	});
         });
     } )
</script>

  <button id="add">添加行</button>
  <button id="sub">提交</button>
<table id="TbData" width="100%" border="1"> 
      <tbody id="tbbody"> 
       <tr> 
       <th>公司名称</th> 
       <th>联系人</th> 
       <th>操作</th> 
       </tr> 
       <tr  class="template repeat"> 
	       <td><input type="text" id="company"  class="company" name="company[]"></td> 
	       <td><input type="text" id="linkman"  class="linkman" name="linkman[]"></td> 
	       <td><a href="#" id="del"> 删除 </a></td> 
       </tr> 
      </tbody> 
    </table>