【原创】表格前端新增和批量删除
【原创】表格前端新增和批量删除
柴高八斗之父 发表于8个月前
【原创】表格前端新增和批量删除
  • 发表于 8个月前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

摘要: for遍历,找到被选中的checked

见图:

引用 

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

JS 

$(function(){
				
				//全选与反选
				$(".table :checkbox:first").change(function(){
			      $(this).closest("table")
			             .find(":checkbox:not(:first)")
			             .prop("checked", this.checked);
			  	});
				
				//新增
				var num = 0;
				$("#btn-add").click(function(){
					num++
					$(
						'<tr>'+
							'<td><input type="checkbox" name="" id="" value="" /></td>'+
							'<td>'+num+'</td>'+
							'<td>汽车后服务市场的兴起</td>'+
							'<td>2017-09-09</td>'+
						'</tr>'
					).insertBefore(".tr-row")
					
				})
 //字符串拼接注意:
'<select class="form-control chosen" id="chooseGoodId'+num+'" name="chooseGoodId">'+
				
				//删除
				$("#btn-del").click(function(){
				
					var all_checked = $(".table tbody td input:checked");
					for(var i=0;i< all_checked.length;i++) 
					{ 
						all_checked.eq(i).parent().parent().remove();
					}
				})
			})

HTML

<div class="container">
			<div class="row">
				<div class="btn btn-primary" id="btn-add">
					新增
				</div>
				<div class="btn btn-danger" id="btn-del">
					批量删除
				</div>
				
			</div>
			<table class="table">
				<thead>
					<th><input type="checkbox" name="" id="" value="" /></th>
					<th>序</th>
					<th>标题</th>
					<th>时间</th>
				</thead>
				<tbody>
					<tr class="tr-row">
						<td colspan="4"></td>
					</tr>
				</tbody>
			</table>
		</div>

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 4
博文 155
码字总数 65349
×
柴高八斗之父
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: