[ASP.NET]采用JQuery静态的修改页面TABLE内容

来源：互联网发布：h5网站源码编辑：程序博客网时间：2024/06/02 00:32

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ceshi1.aspx.cs" Inherits="IPGAdmin.WordHelper.ceshi1" %>
s
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

//编辑效果开始
$("#productTable tbody tr").each(function () {
var trID = $(this).find("td").eq(1);
//给这些单元格注册事件，不需要用循环jq会把所有的td的事件都注册上
trID.bind("click", function () {

//找到当前鼠标点击的td，this对应了的就是响应了click的那个td
var objtd = $(this);
//判断objtd中是否存在文本框控件
if (objtd.children("input").length > 0) {
//当前td的input不执行click
return false;
}
//需要将当前td中的内容放到文本框中
var text = objtd.html();
//清空td中的内容
objtd.html("");
var inputObj = $("<input type='text'/>")
.css("border-width", "1")
.css("font-size", "16px")
.css("background-color", "#CCCCCC")
.css("margin", "1,1,1,1")
.width(objtd.width())
.val(text).appendTo(objtd);
//文本插入之后默认选中
inputObj.get(0).select();
//文本框属于td解决在文本框上点击时不将事件传回td中
inputObj.click(function () {
return false;
});
//处理回车和esc的操作
inputObj.keyup(function (event) {
var keycode = event.which;
//处理回车情况
if (keycode == 13) {

if (confirm("你确认要修改么")) {
objtd.html(text);
}
else {
//将内容恢复成text中的内容
objtd.html($(inputObj).val());
}
}
//处理esc情况
if (keycode == 27) {

alert("恢复");
//将内容恢复成text中的内容
objtd.html(text);
}
});
});
});
});

</script>
</head>
<body>
<form id="form1" runat="server">
<div>

</div>
</form>

<table border="1" width="300px" id="productTable">
<thead>
<tr>
<th>
序号
</th>
<th>
名字
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
楼主好萌
</td>
</tr>
<tr>
<td>
2
</td>
<td>
楼主好萌
</td>
</tr>
<tr>
<td>
3
</td>
<td>
楼主好萌
</td>
</tr>
<tr>
<td>
4
</td>
<td>
楼主好萌
</td>
</tr>
</tbody>
</table>
</body>
</html>

0 0