摘要:代码如下:<PRE class=html name="code"><html xmlns="https://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"> <p 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> </p> </form> </body> </html></PRE><BR> <BR> <PRE></PRE> <PRE></PRE>

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-JQuery操作tr和td内容的方法实例

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

代码如下:

<PRE class=html name="code"><html xmlns="https://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">
<p 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>
</p>
</form>
</body>
</html></PRE><BR>
<BR>
<PRE></PRE>
<PRE></PRE>

代码如下:

<PRE class=html name="code"><html xmlns="https://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">
<p 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>
</p>
</form>
</body>
</html></PRE><BR>
<BR>
<PRE></PRE>
<PRE></PRE>

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-JQuery操作tr和td内容的方法实例

全部内容,希望文章能够帮你解决

js实例教程-JQuery操作tr和td内容的方法实例

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过