【原创】前端表格的增，删（批量删除）-弹窗追加-两个数组对比去掉重复

最新推荐文章于 2023-01-13 10:40:20 发布

weixin_34185512

最新推荐文章于 2023-01-13 10:40:20 发布

阅读量146

点赞数

文章标签：前端 python javascript ViewUI

原文链接：https://my.oschina.net/u/583531/blog/1538191

版权

2019独角兽企业重金招聘Python工程师标准>>>

功能实现：

tr的新增，删除（包括批量删除），
弹窗新增，追加到主页。（去掉重复id项。）

技能点：

获取主页的tr下的input id，放到一个数组；
获取弹窗内的tr下的input id，放到另一个数组；
提交时，对比2个数组，然后将非重复的id追加到主页表格中。当然弹窗未选，也要判断下。

待时间充分点，再细化编写此博客。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		
		
	</head>
	<body>
		<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 class="btn btn-primary" data-toggle="modal" data-target="#myModal">
					弹窗
				</div>
				
				
			</div>
			<table class="table table-main">
				<thead>
					<th><input type="checkbox" name="" id="" value="" /></th>
					<th>ID</th>
					<th>标题</th>
					<th>时间</th>
				</thead>
				<tbody class="result">
					<tr class="tr-row">
						<td colspan="4"></td>
					</tr>
				</tbody>
			</table>
		</div>
		
		
	</body>
</html>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">请选择</h4>
            </div>
            <div class="modal-body">
            	<div class="btn btn-primary" id="btn-add-window">
					新增
				</div>
            	<table class="table table-window">
					<thead>
						<th><input type="checkbox" name="" id="" value="" /></th>
						<th>ID</th>
						<th>标题</th>
						<th>时间</th>
					</thead>
					<tbody>
						<tr class="tr-row-window">
							<td colspan="4"></td>
						</tr>
					</tbody>
				</table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="btn-submit-window">提交</button>
            </div>
        </div>
    </div>
</div>


<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		
<script type="text/javascript">
			$(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="id'+num+'" value="" /></td>'+
							'<td>'+num+'</td>'+
							'<td>汽车后服务市场的兴起</td>'+
							'<td>2017-09-09</td>'+
						'</tr>'
					).insertBefore(".tr-row")
					
				})
				
				
				//弹窗内新增
				var num_window = 0;
				$("#btn-add-window").click(function(){
					num_window++
					$(
						'<tr>'+
							'<td><input type="checkbox" name="" id="id'+num_window+'" value="" /></td>'+
							'<td>'+num_window+'</td>'+
							'<td>汽车后服务市场的兴起</td>'+
							'<td>2017-09-09</td>'+
						'</tr>'
					).insertBefore(".tr-row-window")
					
				})
				
				//删除
				$("#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();
					}
				})
				
				//获取
				$("#btn-submit-window").click(function(){
					var all_checked_len_window = $(".table-window tbody td input:checked").length;
					//判断是否有勾选
					if(all_checked_len_window !==0) 
					{  
						var all_tr_window_len = $(".table-window > tbody > tr").length; //获得遍历次数 多的一个是默认tr-row
						all_tr_window_len = all_tr_window_len-1
						//console.log("弹窗内的tr行数"+all_tr_window_len)
						
						//创建主体数组，并赋值
						var data_arr = [];  
						var table_main_tr_len =  $(".table-main > tbody > tr").length;    //console.log(table_main_tr_len)
						table_main_tr_len = table_main_tr_len-1
						for(var i=0;i<table_main_tr_len;i++)  
						{
							var tr_id = $(".table-main > tbody > tr input").eq(i).attr("id");   //alert(tr_id) 正常取到
							data_arr.push(tr_id);  
						}
						console.log("主页数组"+data_arr); 
								
					
						//创建窗口内的数组，并赋值
						var data_arr_window =[];
						for(var n=0;n<all_checked_len_window;n++) 
						{
							var tr_window_id = $(".table-window > tbody > tr input:checked").eq(n).attr("id"); 
							
							data_arr_window.push(tr_window_id); 
						}
						console.log("弹窗数组"+data_arr_window);
						
						//对比数组
						for(var e=0; e<data_arr_window.length; e++){
							if(data_arr.indexOf(data_arr_window[e]) >= 0) {
								data_arr_window.splice(e, 1);
								e--;
							}
						}
						console.log("现在是对比后的数组:"+data_arr_window);
						
						
						//不重复的id，塞到表格中
						
						for (p in data_arr_window) {
						    console.log(data_arr_window[p]);
						    var this_id =(data_arr_window[p]);
						    $("#"+this_id).parent().parent().insertBefore(".tr-row");	
						}
												
//						for(var y=0; y<data_arr_window.lengh;y++)  
//						{
//							
//							
//							var tr_id = $(".table-window > tbody > tr input").eq(y).attr("id");   //alert(tr_id) 正常取到
//							alert(tr_id)
//							//$("#"+tr_id).parent().parent().insertBefore(".tr-row");
//						}
		
						
					}
					else{
						alert("您一个都没选，请选择！")
					}
					
				})
			
			
//				$("#btn-add-3").click(function(){
//				var table_main_tr_len =  $(".table-main > tbody > tr").length;
//					for(var x=0;x<table_main_tr_len;x++)  
//					{
//						var tr_id = $(".table-main > tbody > tr input").eq(x).attr("id");   //alert(tr_id) 正常取到
//					
//						$("#"+tr_id).parent().parent().append(".result_demo");
//						
//						
//					}
//					
//				})
			
			})
			
			
//var a = ['a', 'b', 'c'], b = ['b', 'c', 'd', 'e'];
//for(var i=0; i<b.length; i++){
//	if(a.indexOf(b[i]) >= 0) {
//		b.splice(i, 1);
//		i--;
//	}
//}
//console.log(b) //返回差异的id

		</script>

转载于:https://my.oschina.net/u/583531/blog/1538191