<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
</head>
<body>
<!-- <div class="modal fade" id="updateModel" role="dialog">
这是什么!!!!
</div> -->
<div>
<div>
姓名:<input type="text" name="uname" id="">
年龄:<input type="text" name="uage" id="">
地址:<input type="text" name="uaddr" id="">
<input type="button" value="添加" name="add">
<input type="button" value="批量删除" name="rmrf">
</div>
<div>
<table border="1px" cellspacing="0" cellpadding="1">
<thead>
<tr>
<th>
<input type="checkbox" name="" id="" οnchange="checkAll(this)">
</th>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>骨王</td>
<td>19</td>
<td>大坟墓</td>
<td>
<input type="button" value="修改" οnclick="update(this)" class = ".xg">
<input type="button" value="删除" οnclick="del(this)">
</td>
</tr>
</tbody>
</table>
</div>
<script>
$(function () {
$("input[name='add']").click(function () {
// console.log($(this));
//获取input内容
var uname = $("input[name='uname']").val();
var uage = $("input[name='uage']").val();
var uaddr = $("input[name='uaddr']").val();
//表格追加 把input的值放入trDom 让表格追加三个值
var trDom = $("<tr>" +
"<td><input type='checkbox' name='' id='' ></td>" +
"<td>" + uname + "</td>" +
"<td>" + uage + "</td>" +
"<td>" + uaddr + "</td>" +
"<td>" +
"<input type='button' value='修改' class='modify' οnclick='update(this)'>" +
"<input type='button' value='删除' οnclick='del(this)'>" +
" </td>" +
"</tr>");
$("table tbody").append(trDom);
})
$("input[name='rmrf']").click(function () {
console.log($(this));
var checedkBoxDom = $("tbody [type='checkbox']:checked ")
console.log(checedkBoxDom)
$.each(checedkBoxDom, function (index, value) {
$(this).parent().parent().remove();
})
}
)
console.log($(this));
})
function update(thisDom) {
console.log($(thisDom));
var uname = $("input[name='uname']").val();
var uage = $("input[name='uage']").val();
var uaddr = $("input[name='uaddr']").val();
// if(){
// }
//修改失败1
$(".modify").click(function () {
$(this).parent().siblings("td").each(function () {
var a = $(this).find("input text");
if (!a.length) {
$(this).html("<input size='13' type='text' value='" + $(this).text() + "'/>");
} else {
$(this).html(a.val()).replaceWith(("<tb>Paragraph. </tb>"))
}
})
})
}
function del(thisDom) {
// $(tdisDom).parent().parent().empty()
$(thisDom).parent().parent().empty()
}
//全选
function checkAll(thisDom) {
//console.log( $(thisDom).prop('checked',true));
var checkBoxDom = $("tbody [type='checkbox']")
console.log(checkBoxDom)
$.each(checkBoxDom, function (index, value) {
$(this).prop('checked', !$(this).prop('checked'))
})
}
</script>
</body>
</html>