JQuery操作tr和td内容的方法实例
更新时间：2013年03月06日 11:58:40 作者：
本文介绍了“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>
相关文章
本节主要介绍了用Jquery选择器计算table中的某一列某一行的合计,需要的朋友可以参考下2014-08-08
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
网站开发时，我们时常需要把没有内容的标签隐藏或者去掉。在用JQ有两种好的解决办法2012-02-02
给artDialog 5.02 增加ajax get功能详细介绍
本文将详细介绍给artDialog 5.02 增加ajax get功能的方法，按兴趣的朋友可以参考2012-11-11
在写Web 应用，或者Web Ajax功能的时候我们经常需要处理事件，jquery已经非常完美的封装了事件，但是有时候事件的执行顺序还是会有微小差别2009-12-12
这篇文章主要介绍了jQuery实现鼠标滑过Div层背景变颜色的方法,涉及jQuery中hover及addClass方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
开发插件的两个方法jquery.fn.extend与jquery.extend
jQuery为开发插件提拱了两个方法，分别是jquery.fn.extend与jquery.extend，接下来就为大家介绍下两者的具体使用2013-11-11
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
最近做了一个项目，其中有需求要求实现发送短信验证码后倒计时功能，其中有个难点：要求关闭页面也进行倒计时。好吧，下面小编把jquery 发送验证码倒计时的实现代码分享给大家，大家可以参考下2016-09-09
通过$.each，可以遍历对象、数组的属性值并进行处理，下面有个示例，需要的朋友可以参考下2014-07-07
这篇文章主要介绍了jQuery新的绑定事件机制on方法的使用方法,需要的朋友可以参考下2014-04-04
接着上次tabs的学习，今天继续jquery tools六大功能的第二个功能——tooltip的学习。2009-07-07
最新评论