JQuery操作tr和td内容的方法实例
JQuery操作tr和td内容的方法实例
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:$(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>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类