手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JQuery操作tr和td内容的方法实例
JQuery操作tr和td内容的方法实例
摘要:复制代码代码如下:$(document).ready(function(){$("#selEmployee").click(function...

复制代码 代码如下:

<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>

<table 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操作tr和td内容的方法实例】相关文章:

jQuery预加载图片常用方法

jquery中map函数遍历数组用法实例

JQuery中DOM实现事件移除的方法

jQuery实现返回顶部效果的方法

jQuery实现dialog设置focus焦点的方法

JQuery实现带排序功能的权限选择实例

jQuery插件制作之参数用法实例分析

Jquery使用css方法改变样式实例

JQuery中DOM事件冒泡实例分析

jQuery解析XML文件同时动态增加js文件的方法

精品推荐
分类导航