<!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="添加表格" οnclick="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>