jQuery 行编辑列绑定事件
时间: 2023-11-16 08:24:46 浏览: 39
在 jQuery 中,可以使用事件委托的方式为表格的行编辑列绑定事件。代码如下:
```javascript
$(document).on("click", "td.editable", function() {
// 获取当前单元格的文本内容
var text = $(this).text();
// 将单元格的文本内容替换为一个文本框
$(this).html('<input type="text" value="' + text + '">');
// 给文本框绑定事件,阻止事件冒泡
$(this).find("input").on("click", function(e) {
e.stopPropagation();
});
});
// 点击文档其他位置时,将文本框的值保存到单元格中
$(document).on("click", function() {
$("td.editable input").each(function() {
var text = $(this).val();
$(this).parent().text(text);
});
});
```
上述代码中,我们使用了 jQuery 的事件委托机制,将 `click` 事件委托给了 `document` 对象。当用户点击表格中的单元格时,触发了 `click` 事件,由于该单元格具有 `editable` 类名,因此事件会被委托到 `document` 对象上处理。在事件处理函数中,我们首先获取当前单元格的文本内容,将其替换为一个文本框,并给文本框绑定了 `click` 事件,阻止事件冒泡。这样用户就可以在文本框中编辑单元格的内容了。当用户点击文档其他位置时,触发了 `click` 事件,我们遍历所有的文本框,将其值保存到对应的单元格中。