【原創】前端表格的增，刪（批量刪除）-彈窗追加-兩個數組對比去掉重複
功能實現：javascript
- tr的新增，刪除（包括批量刪除），
- 彈窗新增，追加到主頁。（去掉重複id項。）
技能點：css
- 獲取主頁的tr下的input id，放到一個數組；
- 獲取彈窗內的tr下的input id，放到另外一個數組；
- 提交時，對比2個數組，而後將非重複的id追加到主頁表格中。固然彈窗未選，也要判斷下。
待時間充分點，再細化編寫此博客。html
<!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">×</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>
相關文章
- 1. 【原創】表格前端新增和批量刪除
- 2. Java數組，去掉重複值、增長、刪除數組元素
- 3. MySQL：按前綴批量刪除表格
- 4. 表格的增刪改查+批量刪除+全選+排序
- 5. Oracle批量刪除表格數據
- 6. layui數據表格：批量刪除
- 7. 批量刪除表
- 8. 刪除數組重複值
- 9. nodejs數組刪除重複對象
- 10. oracle 快速刪除大批量數據方法（所有刪除，條件刪除，刪除大量重複記錄）
- 更多相關文章...
- • SQLite 刪除表 - SQLite教程
- • MySQL DISTINCT：去重（過濾重複數據） - MySQL教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章