写了好几篇关于表格的操作的JS脚本设计了，倒不是说我个人有表格情结，实在是日常工作中表格用的地方太多，但是又由于表格本身不太好操作，所以用JS脚本化一下，还是比较有必要的。
把前一段时间做的一个表格编辑的脚本整理了一下，拿出来跟大家共享一下，按照惯例，先看效果图，然后贴代码，然后分析代码。
单击表格中的一个cell进入编辑状态，在这个实现中，选中的cell会被一个红框括起来，在编辑完成后，恢复表格本身的视图，如下图：
可以看到，第四行，第3列的ISN由小写字母修改为大写字母了。代码还是比较简单的，如下：
function editCell(event){
var currentCell;
if(event == null){
currentCell = window.event.srcElement;
}else{
currentCell = event.target;
}
if(currentCell.tagName.toLowerCase() == "td"){
var input = document.createElement("input");
input.type = 'text';
input.setAttribute('class', 'editable');
input.value = currentCell.innerHTML;
input.width = currentCell.style.width;
input.onblur = function(){
currentCell.innerHTML = input.value;
//currentCell.removeChild(input);
};
input.onkeydown = function(event){
if(event.keyCode == 13){
input.blur();
}
};
currentCell.innerHTML = '';
currentCell.appendChild(input);
input.focus();
}
}
在onBlur(失焦)事件时，本来打算删除这个临时创建的Input,但是FF老是报错，暂时注释掉，如果你有更好的解决方法，请告诉我，谢谢。
使用方式，只需要在table加载完成之后，我们就可以给它注册一个编辑器(Editor)。
<script type="text/javascript">
function setToEditable(tableid){
document.getElementById(tableid).ondblclick=editCell;
}
</script>
<body onload="setToEditable('editable')">
这样就可以了，下面是代码的简单解释：
- 如果鼠标当前点击的是table，则触发一个event，浏览器的DOM解析器会知道点击的是什么位置，我们只关注点击的是td的情况(cell)
- 创建一个临时的input框
- 将cell中的内容复制给Input
- 给这个Input注册一些时间处理函数，onblur,onkeydown等以便处理我们的动作
- 将input控件添加到cell的儿子节点上，然后设置焦点
P.S
本来以为，如果一切都按照W3C标准来开发的话，跨浏览器就是一件很容易的事，然而，当使用了M$的IE浏览器之后才知道，事情不是这样的，理想和现实是有差距的。这个脚本在IE下竟然不能正确work(红框狂不见了)，如果你有好的解决方案，请告诉我，谢谢！
- 大小: 13.9 KB
- 大小: 13.7 KB
分享到：
相关推荐
在Bootstrap中，表格（Table）是常见的数据展示组件，而“bootstrap插件_table可编辑表格_demo”则是Bootstrap表格功能的一个扩展，它允许用户直接在表格内进行编辑，提供了更加交互式的用户体验。 Bootstrap表格的...
在实现可编辑表格时，我们需要在用户点击单元格时将`<td>`元素替换为`<input>`或`<textarea>`，并在用户完成编辑后将数据保存回`<td>`。这可能涉及到`innerHTML`属性、`createElement`、`appendChild`等方法。 4. *...
综上所述，"纯js和html可编辑的table（表格）"项目结合了HTML的结构、JavaScript的交互性以及CSS的美化，实现了用户可以直接在网页上编辑表格的功能。这不仅可以提高用户体验，也简化了数据输入和管理的流程。通过...
这个简单的示例展示了如何使用jQuery实现基本的可编辑表格功能。实际应用中，可能还需要考虑更多细节，比如输入验证、多列同时编辑、键盘快捷键支持等。同时，为了提供更好的用户体验，可以考虑使用插件如`jQuery...
先简单说明一下,这个Demo...IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关 └── vue ├── axios.min.js ## a
本文将详细介绍如何使用`vxe-table`库来创建一个高效的可编辑表格，以解决类似的问题。 首先，`vxe-table`是一个功能强大的表格组件，相比Element UI的`el-table`，它提供了更多高级特性，如动态渲染、高性能以及...
至于"200411822562825089.jpg"，这可能是一个示例图像，展示了编辑器的界面或功能，帮助用户更好地理解如何操作和使用这个工具。 总结来说，"HTML Table表格编辑器"是一款提高HTML表格操作效率的工具，它通过...
总结一下，jQuery实现可编辑表格主要涉及以下步骤： 1. 创建带有输入框的HTML表格结构。 2. 使用CSS定制样式，使输入框融入表格。 3. 使用jQuery监听事件，实现表格单元格的编辑和保存功能。 这个简单的示例展示了...
例如，Handsontable 是一个强大的JavaScript表格组件，它可以轻松实现可编辑表格，并且提供了丰富的配置选项。使用Handsontable，你可以这样创建一个可编辑表格： ```javascript // 导入Handsontable库 import ...
通过以上步骤，我们可以构建出一个功能完善的、基于jQuery的可编辑表格。需要注意的是，虽然jQuery简化了许多任务，但现代前端框架如React、Vue或Angular提供了更强大的状态管理和组件化功能，可能更适合处理复杂的...
jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理和动画效果等任务，使得开发者可以更轻松地实现这些功能。 例如，使用jQuery可以监听单元格的`blur`事件，当用户离开单元格时保存编辑的内容： ```...
当单元格被选中后，我们需创建一个新的文本框`Text`作为编辑器，并将其显示在被选中的单元格位置。同时，为确保编辑器能够响应用户的输入，我们需为其添加修改监听器： ```java tablePrice.addSelectionListener...
本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...
Bootstrap Table 是一个基于Bootstrap框架的前端组件，用于创建功能丰富的、响应式的表格。在默认情况下，Bootstrap Table 并不支持直接在表格内编辑数据。为了实现这个功能，我们需要借助第三方插件，比如`...
通过以上步骤，你可以构建出一个基本的前端可编辑表格插件。随着需求的增加，可以继续扩展其功能，如添加行和列的操作、导入导出数据等。在实际项目中，记得考虑兼容性和无障碍性，确保所有用户都能顺利使用。同时，...
结合以上代码，你可以创建一个完整的可编辑表格。在提供的`edittable`文件中，可能包含了一个示例HTML文件和对应的JavaScript文件，演示了上述功能的完整实现。通过查看和运行这些示例，开发者可以更直观地理解如何...
本示例“基于jquery的可编辑表格实现代码”是关于如何利用jQuery创建一个功能丰富的交互式表格，允许用户双击单元格（TD元素）进行编辑，编辑完成后，数据会自动更新回原单元格。以下将详细介绍这一技术实现的关键...
在网页开发中，表格（Table）是展示数据的重要方式，而jqGrid是一个强大的JavaScript库，专门用于创建交互式、功能丰富的表格。本教程将深入探讨如何利用jqGrid来实现美观且功能丰富的表格样式。 首先，我们需要...
在本文中，我们将详细解析如何使用Vue.js框架封装一个可编辑的表格插件。该插件允许用户在表格中进行单元格编辑，并能对表头进行任意合并，从而提供了强大的表格数据处理功能。 首先，我们需要了解该插件的基本结构...
例如，我们可以这样配置一个可编辑的列： ```javascript { title: '姓名', key: 'name', editable: true // 或者 editable: (row, index) => { return true; } } ``` 接下来，我们关注动态编辑的核心部分。在...