juery 表格动态添加删除行内容

最新推荐文章于 2023-01-31 11:16:13 发布

yang295242361

最新推荐文章于 2023-01-31 11:16:13 发布

阅读量419

点赞数 1

分类专栏： juery实例 juery 文章标签： jquery

本文链接：https://blog.csdn.net/yang295242361/article/details/78928186

版权

juery 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

juery实例

4 篇文章 0 订阅

订阅专栏

方法一： this

<div class="box">
  		<table cellpadding="1" cellspacing="0" border="0">
        		<tr>
                	<th width="16%">item</th>
                    <th width="29%">item</th>
                    <th width="20%">item</th>
                    <th width="15%">item</th>
                    <th width="20%">删除</th>
                </tr>
                <tr class="di">
                	<td><input type='text' class='input_140'   placeholder='请输入姓名'/></td>
                    <td><input type='text' class='input_140'   placeholder='请输入姓名'/></td>
                    <td><input type='text' class='input_140'   placeholder='请输入姓名'/></td>
                    <td><input type='text' class='input_140'   placeholder='请输入姓名'/></td>
                    <td><a οnclick="sc(this)" class="shanchu ">删除</a></td>
                </tr><!--默认可删除-->
        </table>
        <div class="tianjia">添加</div>
  </div>

 $(function(){
	 $('.tianjia').click(function(e) {
			var $html=$("<tr><td><input type='text' class='input_140'   placeholder='请输入姓名'/></td><td><input type='text' class='input_140'   placeholder='请输入姓名'/></td><td><input type='text' class='input_140'   placeholder='请输入姓名'/></td><td><input type='text' class='input_140'   placeholder='请输入姓名'/></td><td><a class='shanchu' οnclick=\'sc(this)\'>删除</a></td></tr>");
           $('.box table ').append($html);
        });
	});
  function sc(ele) {
      $(ele).parent().parent().remove();
  }

方法二：

<div class="box">
  		<table cellpadding="1" cellspacing="0" border="0">
        		<tr>
                	<th width="16%">item</th>
                    <th width="29%">item</th>
                    <th width="20%">item</th>
                    <th width="15%">item</th>
                    <th width="20%">删除</th>
                </tr>
                <tr class="di">
                	<td><input type='text' class='input_140'   placeholder='请输入姓名'/></td>
                    <td><input type='text' class='input_140'   placeholder='请输入姓名'/></td>
                    <td><input type='text' class='input_140'   placeholder='请输入姓名'/></td>
                    <td><input type='text' class='input_140'   placeholder='请输入姓名'/></td>
                    <td><a οnclick="sc()" class="shanchu ">删除</a></td>
                </tr><!--默认可删除-->
        </table>
        <div class="tianjia">添加</div>
  </div>

  $(function(){
	 $('.tianjia').click(function(e) {
			var $html=$("<tr><td><input type='text' class='input_140'   placeholder='请输入姓名'/></td><td><input type='text' class='input_140'   placeholder='请输入姓名'/></td><td><input type='text' class='input_140'   placeholder='请输入姓名'/></td><td><input type='text' class='input_140'   placeholder='请输入姓名'/></td><td><a class='shanchu' οnclick=\'sc()\'>删除</a></td></tr>");
           $('.box table ').append($html);
        });
	});

  function sc() {
      $(" .box table tr").eq($(this).index()).remove();
  }