实现效果：可删除单行，多选及全选删除多行；
文本可编辑；
动态添加行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<style>
table {
border-collapse: collapse;
500px;
text-align: center;
background-color:paleturquoise;
}
</style>
</head>
<body>
<table border="1" id="tab">
<tr>
<th><input type="checkbox" >select all</th>
<th>name</th>
<th>age</th>
<th>operation</th>
</tr>
<tr >
<td><input type="checkbox" name="test"></td>
<td class="change">may</td>
<td class="change">18</td>
<td><button class="tr-line">delete</button></td>
</tr>
<tr>
<td><input type="checkbox" name="test"></td>
<td class="change">lily</td>
<td class="change">18</td>
<td><button class="tr-line">delete</button></td>
</tr>
<tr >
<td><input type="checkbox" name="test"></td>
<td class="change">lucy</td>
<td class="change">18</td>
<td><button class="tr-line">delete</button></td>
</tr>
</table><br>
name:<input type="text" id="name">
age:<input type="text" id="age">
<input type="button" value="add" id="add">
<input type="button" value="select delete">
<script>
$(function () {
$("input:eq(0)").bind("click", function () {
$("input").prop("checked",$(this).prop("checked"))
})//全选
$(".change").click(function () {
var td = $(this);
var txt = td.text();
var input = $("<input type='text' value='" + txt + "'/>");
td.html(input);
input.click(function() { return false; });//屏蔽多个文本框出现
//获取焦点
input.trigger("focus");
input.keypress(function (event) {
if (event.keyCode==13 ){
var v = $(this).val();
td.text(v);
}//敲回车文本框变为纯文本
})
//文本框失去焦点后提交内容，重新变为文本
input.blur(function() {
var newtxt = $(this).val();
//判断文本有没有修改
if (newtxt != txt) {
td.html(newtxt);
}
})
})
// $("table td").dblclick(function () {
// $(this).attr("contenteditable", "true")
// })//双击文本可编辑
$("*").on("click",".tr-line",function () {//on() 方法添加的事件处理程序适用于当前及未来的元素
$(this).parents("tr").remove();//删除某一行
})
$("input[type='button']").click(function() {
$("input[name='test']:checked").each(function() { // 遍历选中的checkbox
var num = $(this).parents("tr").index(); // 获取checkbox所在行的顺序
$("table").find("tr:eq("+num+")").remove();
});
});//删除多行
$("#add").click(function () {
var name = $("#name").val();
var age = $("#age").val();
var tr = ("<tr>" +"<td><input type="checkbox" name="test"/></td>"
+"<td contenteditable='true'>"+name+"</td>"
+"<td contenteditable='true'>"+age+"</td>"
+"<td><button class="tr-line" >delete</button></td>"
+"</tr>");
$("table").append(tr);
})//添加行
})
</script>
</body>
</html>