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>