jquery可编辑表格（版本二）
?
實現(xiàn)效果：可刪除單行，多選及全選刪除多行；
? ? ? ? ? ? ? 文本可編輯；
? ? ? ? ? ? ? 動態(tài)添加行。
<!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;
width: 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; });//屏蔽多個文本框出現(xiàn)
//獲取焦點
input.trigger("focus");
input.keypress(function (event) {
if (event.keyCode==13 ){
var v = $(this).val();
td.text(v);
}//敲回車文本框變?yōu)榧兾谋?br /> })
//文本框失去焦點后提交內(nèi)容，重新變?yōu)槲谋?br /> 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() 方法添加的事件處理程序適用于當(dāng)前及未來的元素
$(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>
轉(zhuǎn)載于:https://www.cnblogs.com/iriliguo/p/6364778.html
總結(jié)
以上是生活随笔為你收集整理的jquery可编辑表格（版本二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS3属性animation-play
- 下一篇： 我的web聊天之---序章