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