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 id="createtable"></div>
<div id="createrow"></div>
<table style="width:100%" id="myTable">
<tr><td>Row1</td></tr>
<tr><td>Row2</td></tr>
<tr><td>Row3</td></tr>
</table>
<a href="#" name="addRow">Add Row</a>
<form id="form1">
<div>
<table id="tb" style="border:1px solid #000;">
<tr>
<td colspan="10" style="text-align:right">
<input id="BtAdd" type="button" value="添加" /> <input id="BtDel" type="button" value="删除" />
</td>
</tr>
<tr>
<td style="width:25px;"></td>
<td style="width:25px;">
<input id="CKA" name="CKA" type="checkbox" />
</td>
<td style="width:20%;">
字段名
</td>
<td style="width:20%;">
名称
</td>
<td style="width:15%;">
数据类型
</td>
<td style="width:40px;">
主键
</td>
<td style="width:40px;">
必填
</td>
<td style="width:20%;">
长度
</td>
<td style="width:40px;">
有效
</td>
<td style="width:80px;">
排序
</td>
</tr>
<tr>
<td style="text-align: center"></td>
<td style="text-align: center">
<input id="CK" type="checkbox" name="CK" />
</td>
<td style="text-align: center">
<input id="TName" type="text" name="TName" />
</td>
<td style="text-align: center">
<input id="TRm" type="text" name="TRm" />
</td>
<td style="text-align: center">
<select id="SType" name="SType" style=" width:100px;">
<option>1</option>
<option>2</option>
</select>
</td>
<td style="text-align: center">
<input id="CKIsPR" type="checkbox" name="CKIsPR" />
</td>
<td style="text-align: center">
<input id="CKIsNull" type="checkbox" name="CKIsNull" />
</td>
<td style="text-align: center">
<input id="TLen" type="text" size="10" name="TLen" />
</td>
<td style="text-align: center">
<input id="CKIsUse" type="checkbox" checked="checked" name="CKIsUse" />
</td>
<td style="text-align: center">
<input id="TxtSortNO" type="text" size="4" name="TxtSortNO" />
</td>
</tr>
</table>
<div id="result">
</div>
</div>
</form>
<div id="UDFBlock">
<p id="udf_template">
<input id="CK" type="checkbox" name="CK" />
<input type="text" value="" tag="udfKey">
<input type="text" value="" tag="udfValue">
<a class="UDF_Delete" style="cursor:pointer">Delete</a>
</p>
</div>
<input type="button" id="btnAdd" value='Add' />
<input type="button" id="btnGetValue" value="Get Value" />
<div id="result">
</div>
</body>
</html>
