<html>
<head>
<style>
TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;}
</style>
<body style="font-family: verdana">
<h2>Table Editor</h2>
<br>
<h3>Single click to select a cell, alt-click to select a row</h3>
<br>
<div id=TableContainer>
<table id=TheTable border=1 style="border-collapse: collapse; table-layout: fixed">
<tbody>
<tr><td>Cell 1,1</td><td>Cell 1,2</td><td>Cell 1,3</td></tr>
<tr><td>Cell 2,1</td><td>Cell 2,2</td><td>Cell 2,3</td></tr>
<tr><td>Cell 3,1</td><td>Cell 3,2</td><td>Cell 3,3</td></tr>
</tbody>
</table>
</div>
<br><br><br>
<input id=ButtonAddRow style="width: 200px;" type=button value="Add Row" onclick="addRow()"><br>
<input id=ButtonRemoveRow style="width: 200px;" type=button value="Remove Row" onclick="removeRow()"><br>
<input id=ButtonAddCell style="width: 200px;" type=button value="Add Cell" onclick="addCell()"><br>
<input id=ButtonRemoveCell style="width: 200px;" type=button value="Remove Cell" onclick="removeCell()"><br>
<input id=ButtonMoveUp style="width: 200px;" type=button value="Move Up" onclick="moveUp()"><br>
<input id=ButtonMoveDown style="width: 200px;" type=button value="Move Down" onclick="moveDown()"><br>
<input id=ButtonMoveLeft style="width: 200px;" type=button value="Move Left" onclick="moveLeft()"><br>
<input id=ButtonMoveRight style="width: 200px;" type=button value="Move Right" onclick="moveRight()"><br>
<input id=ButtonEditContents style="width: 200px;" type=button value="Edit Contents" onclick="editContents();">
<input type=text style="display: none; width: 400px;" id=EditCell><br>
<input id=ButtonEditStyle style="width: 200px;" type=button value="Edit Table Style" onclick="editStyle();">
<input type=text style="display: none; width: 400px;" id=EditStyle><br>
<script>
var lastSelection = null;
ButtonAddRow.setExpression("disabled", "nothingSelected(lastSelection)");
ButtonRemoveRow.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonAddCell.setExpression("disabled", "nothingSelected(lastSelection)");
ButtonRemoveCell.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonMoveUp.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonMoveDown.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonMoveLeft.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonMoveRight.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonEditContents.setExpression("disabled", "(! cellSelected(lastSelection)) || (EditCell.style.display == '')");
ButtonEditStyle.setExpression("disabled", "(EditStyle.style.display == '')");
ButtonEditStyle.setExpression("value", "'Edit ' + whatIsSelected(lastSelection) + ' Style'");
function select(element) {
var e, r, c;
if (element == null) {
e = window.event.srcElement;
} else {
e = element;
}
if ((window.event.altKey) || (e.tagName == "TR")) {
r = findRow(e);
if (r != null) {
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
}
selectRowOrCell(r);
lastSelection = r;
}
} else {
c = findCell(e);
if (c != null) {
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
}
selectRowOrCell(c);
lastSelection = c;
}
}
window.event.cancelBubble = true;
}
TableContainer.onclick = select;
function cancelSelect() {
if (window.event.srcElement.tagName != "BODY")
return;
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
lastSelection = null;
}
}
document.onclick = cancelSelect;
function findRow(e) {
if (e.tagName == "TR") {
return e;
} else if (e.tagName == "BODY") {
return null;
} else {
return findRow(e.parentElement);
}
}
function findCell(e) {
if (e.tagName == "TD") {
return e;
} else if (e.tagName == "BODY") {
return null;
} else {
return findCell(e.parentElement);
}
}
function deselectRowOrCell(r) {
r.runtimeStyle.backgroundColor = "";
r.runtimeStyle.color = "";
//r.runtimeStyle.fontFamily = "Verdana";
}
function selectRowOrCell(r) {
r.runtimeStyle.backgroundColor = "darkblue";
r.runtimeStyle.color = "white";
//r.runtimeStyle.fontFamily = "Verdana";
}
function addRow() {
var r, p, nr;
if (lastSelection == null) {
r = null;
p = TheTable.children[0];
} else {
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
}
p = r.parentElement;
}
nr = document.createElement("TR");
p.insertBefore(nr, r);
select(nr);
addCell();
return nr;
}
function removeRow() {
var r, p, nr;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
}
p = r.parentElement;
p.removeChild(r);
lastSelection = null;
return r;
}
function addCell() {
var r, p, c, nc, text;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
c = lastSelection;
} else {
c = null;
}
nc = document.createElement("TD");
text = document.createTextNode("New Cell");
nc.insertBefore(text, null);
r.insertBefore(nc, c);
select(nc);
return nc;
}
function removeCell() {
var c, p, nr;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
p = c.parentElement;
p.removeChild(c);
lastSelection = null;
return c;
}
function editContents() {
var c, p, nr;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
EditCell.style.display = "";
EditCell.value = c.innerHTML;
c.setExpression("innerHTML", "EditCell.value");
EditCell.focus();
EditCell.onblur = unhookContentsExpression;
}
function unhookContentsExpression() {
lastSelection.removeExpression("innerHTML");
EditCell.value = '';
EditCell.style.display = "none";
}
function editStyle() {
var c;
if (lastSelection == null) {
c = TheTable;
} else {
c = lastSelection;
}
EditStyle.style.display = "";
EditStyle.value = c.style.cssText;
c.style.setExpression("cssText", "EditStyle.value");
EditStyle.focus();
EditStyle.onblur = unhookStyleExpression;
}
function unhookStyleExpression() {
var c;
if (lastSelection == null) {
c = TheTable;
} else {
c = lastSelection;
}
c.style.removeExpression("cssText");
EditStyle.value = '';
EditStyle.style.display = "none";
}
function moveUp() {
var r, p, ls;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName != "TR") {
return null;
}
if (r.rowIndex == 0)
return;
ls = r.previousSibling;
p = ls.parentElement;
p.insertBefore(r, ls);
return r;
}
function moveDown() {
var r, p, ls;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName != "TR") {
return null;
}
ls = r.nextSibling;
if (ls == null)
return null;
p = ls.parentElement;
ls = ls.nextSibling;
p.insertBefore(r, ls);
return r;
}
function moveLeft() {
var c, p, ls;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
ls = c.previousSibling;
if (ls == null)
return null;
p = ls.parentElement;
p.insertBefore(c, ls);
return c;
}
function moveRight() {
var c, p, ls;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
ls = c.nextSibling;
if (ls == null)
return null;
p = ls.parentElement;
ls = ls.nextSibling;
p.insertBefore(c, ls);
return c;
}
function nothingSelected() {
return (lastSelection == null);
}
function rowSelected() {
var c;
if (lastSelection == null)
return false;
c = lastSelection;
return (c.tagName == "TR")
}
function cellSelected() {
var c;
if (lastSelection == null)
return false;
c = lastSelection;
return (c.tagName == "TD")
}
function whatIsSelected() {
if (lastSelection == null)
return "Table";
if (lastSelection.tagName == "TD")
return "Cell";
if (lastSelection.tagName == "TR")
return "Row";
}
</script>
分享到：
相关推荐
本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...
在本文中，我们将深入探讨jQuery Easy UI中的`edatagrid`组件，以及如何实现动态编辑表格，特别是下拉框的联动功能。`edatagrid`是jQuery Easy UI库中的一个强大工具，它扩展了基本的`datagrid`功能，提供了更丰富的...
可以输入单价计算出金额，输入金额反算单价，统计合计功能支持键盘左右上下移动功能。
在教学演示中，动态编辑表格可以帮助学生直观地理解数据操作。 总的来说，TLAB中的可编辑表格是MATLAB开发中提高数据交互性的重要工具，它允许用户在图形界面中直接处理数据，简化了数据操作流程，提高了工作效率。...
layui表格动态添加|layui表格可编辑动态添加
动态编辑表格的关键在于监听用户交互，如点击事件，然后更新相应的表格数据。 1. **引入jQuery库**：在HTML文件中，通过`<script>`标签引入jQuery库。通常，你可以从CDN（内容分发网络）获取最新版本的jQuery，例如...
动态编辑表格数据功能允许用户直接在表格中修改单元格内容并提交更改，提高数据操作的效率和用户体验。 首先，我们需要了解Iview Table的基本用法。Iview的Table组件通过`columns`属性定义列，`data`属性设置数据源...
在Bootstrap中，表格（Table）是常见的数据展示组件，而“bootstrap插件_table可编辑表格_demo”则是Bootstrap表格功能的一个扩展，它允许用户直接在表格内进行编辑，提供了更加交互式的用户体验。 Bootstrap表格的...
在线编辑表格是网页交互功能的一...总的来说，这个在线编辑表格的实现展示了HTML和JavaScript在构建动态Web应用中的力量。无论是在个人项目还是商业应用中，掌握这些技术对于提升网页交互性和用户体验都是至关重要的。
以上就是一个简单的原生JavaScript可编辑表格实现动态添加和删除行的示例。在实际应用中，可能还需要处理更多细节，如数据验证、表格排序和过滤等。记住，JavaScript是一种强大的工具，能够帮助我们实现丰富的交互式...
"jquery可编辑表格插件"就是基于jQuery的一种工具，旨在为网页中的表格提供动态编辑功能，使得用户可以直接在表格中进行数据的增删改查，极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用，...
在IT领域，尤其是在Web开发中，可编辑表格是一种常见的需求，它允许用户直接在网页上的表格内修改数据，提供了一种交互性强的数据管理方式。原生JavaScript制作的可编辑表格无需依赖外部库，如jQuery或Angular等，...
【标题】"原创-javascript服务器交互型可编辑表格"是一个关于使用JavaScript实现与服务器进行交互的动态、可编辑表格的技术分享。在这个项目中，开发者利用JavaScript的灵活性和强大的功能，创建了一个用户可以直接...
总的来说，利用jQuery实现可编辑表格是一项实用的技能，它使开发者能够快速构建动态、交互性强的网页应用。通过结合HTML5的新特性、jQuery的强大功能以及适当的前端框架，我们可以创建出满足各种需求的可编辑表格，...
Bootstrap可编辑表格是一种基于Bootstrap框架实现的交互式表格，它允许用户在表格内直接编辑数据，无需跳转页面或打开新窗口。这种功能对于数据管理、CRUD操作（创建、读取、更新、删除）非常实用，尤其适用于后台...
这个实例集包含了 EasyUI 的各种功能，特别强调了动态编辑表格的实现。在深入探讨这些知识点之前，我们先了解一下 EasyUI 的基本概念。 EasyUI 提供了一系列预定义的 CSS 样式和 JavaScript 插件，使得开发者可以...
Bootstrap编辑表格插件是基于此框架开发的一种交互性工具，它为网页中的表格提供了可编辑的功能，允许用户直接在表格中进行数据的增删改查操作。这在数据管理和展示时特别有用，尤其是对于需要实时更新信息的应用...
在Android开发中，创建动态表格效果是常见的需求，特别是在展示数据或者进行用户交互时。本教程将探讨如何利用Android的自定义View或者现有的布局控件，如LinearLayout、TableLayout、GridLayout等，来实现一个可...
这款插件结合了jQuery的动态功能和PureCSS的简洁设计，为网页开发者提供了一种简单易用的可编辑表格解决方案。它允许用户直接在表格中编辑数据，提高了交互性和用户体验。下面将详细阐述这个插件的工作原理和关键...
总的来说，"bootstrapTable编辑表格例子.zip"这个压缩包提供了一个很好的学习资源，帮助开发者理解如何在BootstrapTable中实现数据的动态编辑和删除。通过研究这个例子，你可以更好地掌握BootstrapTable的使用，提升...