JQuery操作tr和td内容的方法实例

复制代码代码如下:<PRE class=html name="code"><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></PRE><BR><BR><PRE></PRE><PRE></PRE>

　　推荐阅读

　　js 控制下拉菜单刷新的方法

思路：母版頁隱藏控件從内容頁接收值 JS根據接受的值控制菜單項的現實母版頁：隱藏控件：复制代码代码如下: <asp:Label ID="Lbl_X" runat="server" Text="text" style="display:none"></asp:Label><asp:Label I>>>详细阅读

本文标题：JQuery操作tr和td内容的方法实例

地址：http://www.17bianji.com/kaifa2/JS/22269.html

1/2 1