功能：1、實作滑鼠輕按兩下時，可編輯表格的内容；
2、可新增行；
3、可删除行；
代碼：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Page Manager Page</title>
<script type="text/javascript" src="public/lib/jquery-2.1.4.min.js"></script>
<style type="text/css">
table.stats
{
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 13px;
color: #fff;
width: 800px;
background-color: #666;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;
}
table.stats td
{
background-color: #CCC;
color: #000;
padding: 4px;
text-align: left;
border: 1px #fff solid;
width: 150px;
}
table.stats tr td:first-child {
width:40px;
}
table.stats td input {
width: 140px;
}
table.stats td input[type="checkbox"] {
width: 40px;
}
</style>
</head>
<body>
<table id="editable" class="stats">
<thead>
<tr>
<th>choose</th>
<th>id</th>
<th>parent</th>
<th>text</th>
<th>action</th>
<th>url</th>
</tr>
</thead>
<tbody></tbody>
</table>
<input type="button" value="新增" class="add-button"></input>
<input type="button" value="删除" class="delete-button"></input>
<input type="button" value="确定" class="confirm-button"></input>
<script type="text/javascript">
$(function(){
$("table").on('dblclick', 'td', function(){
console.log("dbclick");
if ($(this).find('input[type="checkbox"]').length != 0) {
return;
}
var td = $(this);
var text = td.text();
td.text("");
td.append("<input type='text'>");
var input = td.find('input')
input.val(text);
input.focus();
input.blur(function(){
var newText = $(this).val();
$(this).remove();
td.text(newText);
});
});
$(".add-button").on('click', function(){
var tableSize = $('thead tr th').size();
console.log("size: " + tableSize);
var tablebody = $('tbody');
tablebody.append('<tr class="append-line"></tr>');
var appendLine = $('.append-line');
appendLine.append('<td><input type="checkbox"></input></td>')
for (var index = 0; index < tableSize - 1; ++index) {
appendLine.append('<td></td>');
}
appendLine.removeClass('append-line');
});
$(".delete-button").on('click', function(){
$("tbody").find(":checkbox:checked").each(function(){
$(this).parent().parent().remove();
})
});
$("confirm-button").on('click', function(){
})
});
(function InitTable(){
console.log("123");
var data=[[0, 0, "123", "456", "html"], [1, 1, "123", "456", "html"]];
var tablebody = $('tbody');
for (var index in data) {
console.log("data", data[index]);
tablebody.append('<tr class="append-line"></tr>');
var appendLine = $('.append-line');
appendLine.append('<td><input type="checkbox"></input></td>')
for (var dataIndex in data[index]) {
console.log(data[index][dataIndex]);
appendLine.append('<td>' + data[index][dataIndex] + '</td>');
}
appendLine.removeClass('append-line');
}
AppendLine();
})();
function AppendLine(){
var tableLastLineFirstCell = $('tbody tr:last td:first').text();
console.log(tableLastLineFirstCell);
};
</script>
</body>
</html>
![DB2表壓縮功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)