jQuery之修改表格中单元格的值

最新推荐文章于 2024-07-12 16:27:40 发布

sgj_4732514

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量711

点赞数

分类专栏： jQuery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/sgj_4732514/article/details/84040661

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一,以下是html中body中的代码

<body>
<table>
<thead>
<tr>
<th colspan="2">鼠标点击选择项就可以编辑</th>
</tr>
</thead>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>

<tr>
<td>0001</td>
<td>张三</td>
</tr>
<tr>
<td>0002</td>
<td>李四</td>
</tr>
<tr>
<td>0003</td>
<td>王五</td>
</tr>
<tr>
<td>0004</td>
<td>赵六</td>
</tr>
<tr>
<td>0005</td>
<td>李小可</td>
</tr>
<tr>
<td>0006</td>
<td>王萌</td>
</tr>
<tr>
<td>0007</td>
<td>小明</td>
</tr>
</tbody>
</table>
</body>

二,jQuery代码，对以上的表格进行编辑
$(function() {
//1,实现表格的隔行变色
//找到表格中所有的偶数行，也就是我们页面中看到的奇数行
$("tbody tr:even").css("background", "#EFF6FE");

//2,单元格值的修改
//找到所有需要编辑的单元格
var numTd = $("tbody td");
//给这些单元格注册Click事件
numTd.click(function() {

//精简上面的代码

//找到当前鼠标点击的那个td,this对应的就是响应了click的那个td
var currTd = $(this);
if (currTd.children("input").length > 0) {
//如果当前td中已包含有文本框元素，则不执行click事件
return false;
}
//当前td的内容
var tdtext = currTd.html();
//清除td的内容
currTd.html("");
//创建一个文本框
//去掉文本框的边框
//设置文本框中字体大小和当前td中的字体大小一样,为16px;
//设置文本框的背景色和当前td背景色一样
//让文本框的宽度和td的宽度一样
//将td的内容放到文本框中
//将文本框插入到td中去
var inputOjb = $("<input type='text' />").css("border-width", "0").css("font-size", "16px")
.css("background-color", currTd.css("background-color")).width(currTd.width())
.val(tdtext).appendTo(currTd);

//使文本框的内容添加后就被选中(trigger可以执行javascript中的方法)
inputOjb.trigger("focus").trigger("select");
//去掉文本框的点击事件,(javascript事件是冒泡型的)
inputOjb.click(function() {
return false;
});

//处理文本框上回车和ESC按键的操作
inputOjb.keyup(function(event) {
//获取当前按下的键盘的键值
// 不同的按键可以做不同的事情
var keyCode = event.which;
//处理回车键 ,不同的浏览器的keycode不同
if (keyCode == 13) {
//保存当前输入的内容
var inputText = $(this).val();
currTd.html(inputText);
}
//处理ESC键的操作
if (keyCode == 27) {
//将当前TD的内容还原成tdtext
currTd.html(tdtext);
}
});
});
})