- 点击单个可以进行修改
- 点击修改所有的表格都可以进行修改
- 点击保存所有的数据可以获取并打印出来
- 本人demo需要引入jq文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编辑</title>
</head>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<style>
p {
text-align: center;
}
</style>
<body>
<table id="tab" align="center" border="1">
<tr>
<th>编号</th>
<th>姓名</th>
<th>部门</th>
<th>工号</th>
</tr>
</table>
<p><input id="btn1" type="button" value="保存"/><input id="btn2" type="button" value="修改"/></p>
<script>
$(document).ready(function () {
var data = [{nub: "1", name: "Tim", apartment: "人事部", worknub: "1401"},
{nub: "2", name: "TompSon", apartment: "咨询部", worknub: "1402"},
{nub: "3", name: "chanel", apartment: "安保部", worknub: "1403"}]//JSon模拟数据
var tab1 = $("#tab")//H获取表格盒子的内容
$.each(data, function (index, item) {
var row = $("<tr></tr>");
$.each(item, function (name, value) {
var td = $("<td></td>").html(value);
row.append(td);
});
tab1.append(row);
});//为表单填充对应JSon值
$("#tab").find("tr:not(:first)").each(function () {
$(this).children().eq("0").addClass("nub");
$(this).children().eq("1").addClass("name");
$(this).children().eq("2").addClass("apartment");
$(this).children().eq("3").addClass("worknub");
});//为每个对应的列添加class名
$("#tab").find("td").click(function a() {
var inputSize = $(this).find("input").size();
if (inputSize > 0) return;
var tdText = $(this).text();
var inputObj = $('<input type="text" />');
$(this).empty().append(inputObj);
inputObj.val(tdText); //给单个td绑定单击事件，当点击时增加<input/>
$("#tab").find("input").blur(function () {
var inputText = $(this).val();
$(this).parent().html(inputText);
$(this).click(a);
}); //当input失去焦点时，变量inputText保存当前值，清空当前父元素的内容并填充文本，在给当前td重新拥有点击事件
});
$('#btn2').on('click', function () {//修改-使所有框变成可编辑状态
for (var i = $("#tab").find("td").length - 1; i >= 0; i--) {//
console.log($("#tab").find("td")[i])
var item = $($("#tab").find("td")[i])
var inputSize = item.find("input").size();
if (inputSize > 0) return;
var tdText = item.text();
var inputObj = $('<input type="text" />');
item.empty().append(inputObj);
inputObj.val(tdText); //当单击修改时，变量inputText保存当前值，
}
})
$("#btn1").click(function () {
var inputObj = $("#tab").find("input[type='text']");
if (inputObj.size() > 0) {
inputObj.each(function () {
var val = $(this).val();
$(this).parent().empty().html(val);
});
};//单击保存按钮，使其清空所有input
var JsonText = "";
$("#tab").find("tr:not(:first)").each(function () {
JsonText += "{";
$(this).find("td").each(function () {
JsonText += '"' + $(this).attr("class") + '":"' + $(this).text() + '",';
});
JsonText = JsonText.substr(0, JsonText.length - 1);
JsonText += "},";
});
JsonText = JsonText.substr(0, JsonText.length - 1);
console.log("[" + JsonText + "]");
}); //取出数据拼接成JSon格式
});
</script>
</body>
</html>