jquery 对 table 的操作
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/json2.js"></script>
<script>
function CreateTable() {
var str = '{ "total": 149, "columns": [{ "field": "EMPLOYEEID", "title": "员工编号" }, { "field": "EMPLOYEENAME", "title": "员工姓名" }],"rows":[{"EMPLOYEEID":"001","EMPLOYEENAME":"小明"},{"EMPLOYEEID":"002","EMPLOYEENAME":"小宏"}]}';
var data = JSON.parse(str);
var rowCount = data.rows.length;
var cellCount = data.columns.length;
var table = $("<table border="1">");
table.appendTo($("#createtable"));
var trHeader = $("<tr></tr>");
trHeader.appendTo(table);
for (var j = 0; j < cellCount; j++) {
var td = $("<td>" + data.columns[j].title + "</td>");
td.appendTo(trHeader);
}
for (var i = 0; i < rowCount; i++) {
var tr = $("<tr></tr>");
tr.appendTo(table);
for (var j = 0; j < cellCount; j++) {
var field = data.columns[j].field;
var val="";
if (data.rows[i][field] != null)
{
val = data.rows[i][field];
}
var td = $("<td>" + val + "</td>");
td.appendTo(tr);
}
}
$("#createtable").append("</table>");
}
$(function () {
$("a[name=addRow]").click(function () {
$("#myTable tr:last").after(' <tr><td>Row4</td></tr>');
return false;
})
})
$(document).ready(function () {
//隐藏模板tr
$("#tb tr").eq(2).hide();
var i = 0;
$("#BtAdd").click(function () {
//复制一行
var tr = $("#tb tr").eq(2).clone();
tr.find("td").get(0).innerHTML = ++i;
tr.show();
tr.appendTo("#tb");
});
$("#BtDel").click(function () {
$("#tb tr:gt(2)").each(function () {
if ($(this).find("#CK").get(0).checked == true) {
$(this).remove();
}
});
i = 0;
$("#tb tr:gt(2)").each(function () {
$(this).find("td").get(0).innerHTML = ++i;
});
$("#CKA").attr("checked", false);
});
$("#CKA").click(function () {
$("#tb tr:gt(2)").each(function () {
$(this).find("#CK").get(0).checked = $("#CKA").get(0).checked;
});
});
})
$(function () {
$("#btnAdd").click(HandleUDFProperty);
function HandleUDFProperty() {
if ($("[tag='udfKey']").size() < 5) {
$("#udf_template").clone().find(":text").val("").end().find("a").click(function () {
$(this).parents('p').remove();
}).end().appendTo($("#UDFBlock"));
}
};
// 获取属性值
$("#btnGetValue").on("click", function () {
var keys = $("[tag='udfKey']"),
values = $("[tag='udfValue']"),
len = keys.length,
result = [],
txt = "";
for (var i = 0; i < len; i++) {
txt += "{key:" + keys.eq(i).val() + ", value:" + values.eq(i).val() + "},";
}
$("#result").text(txt);
});
})
</script>
</head>
<body>
<input type="button" value="添加表格" onclick="CreateTable(5,6)">
<input type="button" value="添加行">
<div ></div>
<table style="100%" >Add Row</a>
<form />
</td>
</tr>
</table>
<div >
</div>
</div>
</form>
<div >
</div>
</body>
</html>