JQuery操作tr和td内容
<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link href="../esstec_css/style.css" type="text/css" rel="stylesheet" media="all" /> <link href="../esstec_css/style.nk.css" rel="stylesheet" type="text/css" /> <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script> <link href="../esstec_css/Default.css" rel="stylesheet" type="text/css" /> <link href="../esstec_css/BMS-Form.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function () { $("#selEmployee").click(function () { var $table = $("#tbProEmployee tr"); var len = $table.length; var trid = "tbProEmployee" + len; var strDeviceTr = "<tr id=" + trid + ">"; strDeviceTr += "<td ><input id=\"txtEmployeeInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"" + "123" + "\" /><input id=\"txtInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"\" />"; strDeviceTr += "<label id=\"txtEmployeeName\">" + "姓名" + "</label></td>"; strDeviceTr += "<td><input id=\"txtRemark\" type=\"text\" name=\"ProjectEmployee\" /></td>"; strDeviceTr += "<td ><a href=\"javascript:;SaveProEmployee('" + trid + "')\">保存</a> | <a href=\"javascript:;DelProEmployee('" + trid + "')\">删除</a></td>"; strDeviceTr += " </tr>"; $("#tbProEmployee").append(strDeviceTr); }); }); function SaveProEmployee(index) { //ajax保存 var tr = $("tr[id=" + index + "]"); var employee = tr.find("#txtEmployeeName").text(); var remark = tr.find("#txtRemark").val(); var strtd = "<td><input id=\"txtEmployeeInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"" + "123" + "\" /><input id=\"txtInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"\" />"; strtd += "<label id=\"txtEmployeeName\">" + employee + "</label></td>"; strtd += "<td ><label id=\"txtRemark\">" + remark + "</label></td>"; strtd += "<td ><a href=\"javascript:;UpdateProEmployee('" + index + "')\">修改</a> | <a href=\"javascript:;DelProEmployee('" + index + "')\">删除</a></td>"; tr.html(strtd); } function UpdateProEmployee(index) { //ajax保存 var tr = $("tr[id=" + index + "]"); var employee = tr.find("#txtEmployeeName").text(); var remark = tr.find("#txtRemark").text(); var strtd = "<td><input id=\"txtEmployeeInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"" + "123" + "\" /><input id=\"txtInnerID\" type=\"hidden\" name=\"ProjectEmployee\" value=\"\" />"; strtd += "<label id=\"txtEmployeeName\">" + employee + "</label></td>"; strtd += "<td><input id=\"txtRemark\" type=\"text\" name=\"ProjectEmployee\" value=\"" + remark + "\" /></td>"; strtd += "<td ><a href=\"javascript:;SaveProEmployee('" + index + "')\">保存</a> | <a href=\"javascript:;DelProEmployee('" + index + "')\">删除</a></td>"; tr.html(strtd); } function DelProEmployee(index) { if (confirm("Are you sure？")) { $("tr[id=" + index + "]").remove(); } } </script></head><body> <form id="form1" runat="server"> <div class="snippet download-list"> <table class="telerik-reTable-2" id="tbProEmployee"> <tbody> <tr> <th colspan="3"> [<a id="selEmployee" href="javascript:void(0)">执行人员</a>] </th> </tr> <tr> <th> 姓名 </th> <th> 备注 </th> <th> 操作 </th> </tr> </tbody> </table> </div> </form></body></html>