<!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>
jquery 对 table 的操作
原文地址：https://www.cnblogs.com/yangpeng-jingjing/p/8436370.html