JQuery實現表格增刪改
阿新 • • 發佈：2019-02-17
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.2.1.min.js"></script>
<script language="JavaScript">
$(function(){
//判斷/點選新增獲取text的值
$("#add").click(function(){
var xingming=$("#name").val();
var sex=$("#xb option:selected").text();
var data=$("#data").val();
var zhuzhi=$("#dz option:selected").text();
var xizhi=$("#xz option:selected").text();
if(xingming.length<3 || xingming.length>20 || sex=="" || data=="" || zhuzhi=="請選擇" || xizhi=="請選擇") {
alert("輸入資訊有誤!");
}else{
$("#tab").append("<tr class='rr'>"
+"<td width='100px'><input type='checkbox' name='box' id='topck'/></td>"
+"<td width='120px' ondblclick='myupdate(this)'>"+xingming+"</td>"
+"<td width='120px' ondblclick='myupdate(this)'>"+sex+"</td>"
+"<td width='150px' ondblclick='myupdate(this)'>"+data+"</td>"
+"<td width='150px' ondblclick='myupdate(this)'>"+zhuzhi+"-"+xizhi+"</td>"
+"<td align='center'><input style='width: 100px;' type='button' value='刪除' onclick='del(this)' id='shan'/>");
$(".rr:even").css("background","#EEEEEE");
$(".rr:odd").css("background","#FFFFFF");
}
});
$('#delall').click(function(){//批量刪除
var checks=$(":checked[name=box]");
if (checks.length==0) {
alert("請至少選擇一條刪除！");
return;
}
for(var i in checks){
checks[i].parentNode.parentNode.remove();
}
});
$('#topck').click(function(){//全選/反選
var ckss=$("input[name=box]")
for(var i in ckss) {
if (ckss[i].checked==false) {
ckss[i].checked=true;
} else{
ckss[i].checked=false;
}
}
/* $("input[name=box]").each(function(){
//通過this.checked代替了true或false,都變成他們的相反狀態
this.checked=!this.checked
});*/
});
});
function myupdate(obj){//雙擊修改
$(obj).html("<input type='text' placeholder='請輸入修改的值' onblur='myblur(this)'/>");
}
function myblur(obj){//失焦後將文字重新賦值
$(obj).parent().text($(obj).val());
}
function del(obj){//刪除 清空
$(obj).parent().parent().remove();
};
</script>
</head>
<body>
<form action="#" method="post">
姓名: <input type="text" id="name" /><span id="sname"></span>
性別: <select style="width: 80px;" id="xb">
<option>男</option>
<option>女</option>
</select>
生日: <input type="date" id="data" />
住址: <select style="width: 80px;" id="dz">
<option>北京</option>
<option>河南</option>
</select>
<select style="width: 80px;" id="xz">
<option>西二旗</option>
<option>西三旗</option>
</select>
<input style="width: 100px; height: 30px; background-color: chartreuse;" type="button" id="add" value="新增" />
<br />
<input style="margin-left: 650px; margin-top: 40px; width: 100px; height: 30px; background-color: yellow" type="button" value="全選/反選" id="topck"/>
<input style="width: 100px; height: 30px; background-color: red;" type="button" id="delall" value="批量刪除" />
</form>
<table id="tab" border="1" style="margin-top: 10px; margin-left: 20px;">
<tr bgcolor="#999999">
<td width="100"><input type="checkbox" name="box" id="topck"/></td>
<td width="120">姓名</td>
<td width="120">性別</td>
<td width="150">生日</td>
<td width="150">住址</td>
<td width="150">刪除</td>
</tr>
</table>
</body>
</html>