JavaScript操作表格全功能展示

最新推荐文章于 2024-05-14 21:55:20 发布
最新推荐文章于 2024-05-14 21:55:20 发布
阅读量1.2k 收藏
点赞数
分类专栏： AJAX JavaScript 文章标签： javascript null function c table html
本文介绍了一个基于DHTML的表格编辑器示例，通过简单的HTML和脚本实现了表格的增删行、增删列等功能，并允许用户编辑单元格内容及样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

请复制代码到本地，保存为任意 html文件，运行即可看到效果。

<html>
<head>
<title>Sample (DHTML Dude)</title>
<style>
  TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;}
</style>
<xml>
<MSHelp:Keyword Index="A" Term="tableedit"/>
</xml>
</HEAD>    <!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END --> 
<body style="font-family: verdana">
<h2>Table Editor</h2>
<br>
<h3>单击选择单元格，按下Alt键选择一行！</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>
 
前端开发：基于移动端的JS原生Table的使用
全沾软贱开发攻城狮
10-12 1万+
前言 在基于移动端的前端开发过程中，会使用类似PC端的列表展示，即table表格的使用，但是基于移动端的前端框架Vant是没有提供对应的组件库，这就需要使用JS原生的Table，需要在基于移动端的前端开发的时候结合原生的表格使用，那么本篇博文就来分享一下关于在前端开发的时候基于移动端的JS原生Table的运用。 操作步骤 在界面中创建table的具体方法很简单，只需要设置好标签、数据源、样式三部分之后就可以了，使用起来也是非常简单和方便，这样就解决了基于移动端想要实现类似PC端的table效果
js table 表格 复杂表格 多维展示 多维表格【idosoft原创】
06-18
经过研究，发布我的复杂表格、多维展示的成果，如图： 下面是源码（copy and paste,run 看效果）： 访问链接： http://www.idosoft.com.cn/javatech/11.html
JS操作DOM 使用表格动态展示数据
java小强
06-27 377
公司做一个实时监控有一个地方需要把后台推送的数据动态的使用表格进行展示 我知道有一些插件可以做，但问题是我找的那个插件发现动态更新数据时IE内存一直累积，最后会造成崩溃现象 使用别人的插件说起来是效果好一些，功能多一些，但是需要的JS和复杂的逻辑，一旦出问题你很难去处理它   我也赶不上再去研究它，我直接手工写一个算了，虽然没有多好的效果，没有额外的功能，但是实现动态表格数据刷新，还是能...
js动态操作表格
cheng_zhi的专栏
10-22 405
一.  动态为obj表格增加一行   function addrow(obj){    var tab=document.getElementById(obj);    var rowsnumber = tab.rows.length;    var now_num=0;     if (rowsnumber&lt;=1){           //没有数据     rowsnumber = 1;...
JavaScript-table+大图滚动
weixin_34144450的博客
01-08 92
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0...
js实现漂亮的table表格
07-26
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
JavaScript动态操作表格实例(添加,删除行,列及单元格)
10-26
2. **添加、删除行、列及单元格**：这是动态操作表格的主要功能，可以分别对表格的行、列和单元格进行添加和删除操作，以实现更为灵活的表格数据处理。 ### 描述知识点 文档的描述部分提到了对上述知识点的分析和...
Butter.js用JavaScript实现一个功能完整的表格组件,供开源项目TaBest使用
04-05
总结，Butter.js是一个强大而易用的JavaScript表格组件，适用于各种Web应用，特别是那些需要处理大量数据并要求高度定制化的场景。通过理解其核心特性和使用方法，开发者可以有效地提升项目的数据展示和管理能力。
【JavaScript源代码】js实现添加删除表格操作.docx
12-29
这段代码展示了如何根据用户操作动态地修改表格，实现了添加、删除行，以及全选和单选复选框的同步。理解并掌握这些基本操作对于JavaScript开发者来说至关重要，因为它们构成了动态网页应用的基础。
Javascript高级表格操作
01-30
在JavaScript的世界里，表格操作是网页交互中常见且重要的任务，尤其在数据展示和管理时。本主题将深入探讨如何实现“Javascript高级表格操作”，包括动态创建表格、间隔行颜色、鼠标悬停高亮、编辑与删除功能、选择...
monopoly:使用JavaScript和HTMLCSS的功能齐全的大富翁游戏。 在线玩
05-09
例如，使用表格（`<table>`）元素来绘制棋盘，使用段落（`<p>`）、按钮（`<button>`）和图像（`<img>`）元素来展示玩家状态和操作选项。 CSS则是美化网页的利器，它决定了游戏界面的样式和视觉效果。在大富翁游戏中...
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
11-23
table表格完美指定固定行列方法，可以按照自己的需要定制自己的锁定列，只需要传入简单的几个参数即可，看完你会谢我的！如果不好使用的话可以联系我，我可以指导你们。测试过兼容的浏览器有谷歌，火狐，IE11！
在js中table表格中进行渲染轮播图
最新发布
tianxianghuiwei的博客
05-14 282
【代码】在js中table表格中进行渲染轮播图。
原生js实现大屏可视化
weixin_44210475的博客
12-09 2452
原生js实现大屏可视化笔记
js 实现table每列可左右拖动改变列宽度 【转载】
weixin_30388677的博客
12-10 575
<!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>table</title> </head> <body> <table id="tb_1" cellspacing="0" cellpadding=...
JS实现表格table无限滚动翻页
weixin_54685622的博客
11-23 2258
使用以下代码直接实现： 1 1 1 1 1 1 2 2 2 3 3 3 3 3
原生js 实现table表格
逆风优雅的博客
08-04 3358
首先: 定义一个表头(改表头的作用是，固定表头的展示，不至于tabody数据过多时，页面滚动导致表格头部滚动)需要注意的是，两个colgroup的col定义的宽度要一致，这样才可以实现表格的宽度自适应。...
使用layui.js实现表格数据动态展示
liumengwei1的博客
11-20 9391
首先呢，先要创建一个 html 页面，其次在 head 中引入以下包 点击此处下载 layui v2.4.5 点击此处保存 jquery 3.3.1 <link rel="stylesheet" href="../assets/layui/css/layui.css"> <link rel="stylesheet" href="../assets/css/view.cs...
[表格全功能演示（包括添加，删除，移动，单元格选择，行选择等）]
玩的就是Code
11-02 2340
大家保存到本地运行吧！Sample (DHTML Dude)  TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;}  Table Editor单击选择单元格，按下Alt键选择一行！       Cell 1,1Cell 1,2Cell 1,3    
JavaScript操作表格：增删改查全攻略
"JavaScript操作HTML表格元素，包括行和列的增删功能的实现代码片段" 在Web开发中，JavaScript是一种常用的脚本语言，用于增强网页的交互性。在这个场景下，我们关注的是如何使用JavaScript来操作HTML表格（`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值