AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

表格可在线编辑效果

2017-11-09 961
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

可在线编辑的表格，包括动态添加单元格、修改单元格内容

复制代码 
<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 可在线编辑的表格 站长特效网欢迎您。</title>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站-->
<div id="www_zzjs_net">
<table id="TheTable" border="1" style="border-collapse: collapse; table-layout: fixed">
<tbody>
<tr><td>站长特效一号</td><td>站长特效二号</td><td>站长特效三号</td></tr>
<tr><td>站长特效四号</td><td>站长特效五号</td><td>站长特效六号</td></tr>
<tr><td>站长特效七号</td><td>站长特效八号</td><td>站长特效九号</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);
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  selectRowOrCell(r);
  lastSelection = r;
  }
  } else {
  c = findCell(e);
  if (c != null) {
  if (lastSelection != null) {
  deselectRowOrCell(lastSelection);
  }
  selectRowOrCell(c);
  lastSelection = c;
  }
  }
 window.event.cancelBubble = true;
  }
www_zzjs_net.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);
  }
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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";
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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";
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</body>
</html>
复制代码

本文转自欢醉博客园博客，原文链接http://www.cnblogs.com/zhangs1986/p/3642888.html如需转载请自行联系原作者


欢醉

文章标签：
JavaScript
最美的回忆
目录
相关文章
2025「AI安全」全球攻防赛小编
|
4天前
|
云安全 人工智能 安全
阿里云欧阳欣 ：AI Agent时代下，云安全的双轮驱动战略
云安全的新趋势、新发布
2025「AI安全」全球攻防赛小编
1098 17
阿里云欧阳欣 ：AI Agent时代下，云安全的双轮驱动战略
数据库知识分享者小北
|
5天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布，快来 PolarDB 尝鲜！
PostgreSQL 18 发布，PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证，显著提升性能与安全。PolarDB-PG 18 支持存算分离架构，融合海量弹性存储与极致计算性能，搭配丰富插件生态，为企业提供高效、稳定、灵活的云数据库解决方案，助力企业数字化转型如虎添翼！
数据库知识分享者小北
763 19
南瓜佬
|
16天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes（K3s）的微服务：阿里云生产环境扩容实践
在微服务架构中，如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战，详解如何基于阿里云基础设施，利用 Docker 封装服务、K3s 实现容器编排，构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节，适配阿里云资源特性与服务生态，助力企业打造低成本、高可靠、易扩展的微服务解决方案。
南瓜佬
1315 5
计算机程序设计Y2013070224
|
2天前
|
监控 JavaScript Java
基于大模型技术的反欺诈知识问答系统
随着互联网与金融科技发展，网络欺诈频发，构建高效反欺诈平台成为迫切需求。本文基于Java、Vue.js、Spring Boot与MySQL技术，设计实现集欺诈识别、宣传教育、用户互动于一体的反欺诈系统，提升公众防范意识，助力企业合规与用户权益保护。
计算机程序设计Y2013070224
227 127
modelscope
|
15天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源！同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
modelscope
1363 87
计算机程序设计Y2013070224
|
2天前
|
JavaScript Java 大数据
基于JavaWeb的销售管理系统设计系统
本系统基于Java、MySQL、Spring Boot与Vue.js技术，构建高效、可扩展的销售管理平台，实现客户、订单、数据可视化等全流程自动化管理，提升企业运营效率与决策能力。
计算机程序设计Y2013070224
216 128
31074360
|
4天前
|
弹性计算 安全 数据安全/隐私保护
2025年阿里云域名备案流程（新手图文详细流程）
本文图文详解阿里云账号注册、服务器租赁、域名购买及备案全流程，涵盖企业实名认证、信息模板创建、域名备案提交与管局审核等关键步骤，助您快速完成网站上线前的准备工作。
31074360
197 82
2025年阿里云域名备案流程（新手图文详细流程）