动态编辑表格

提示：您可以先修改部分代码再运行

<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>

提示：您可以先修改部分代码再运行

时间： 2024-10-10 21:30:54

动态编辑表格的相关文章

jquery-jquer实现可编辑表格，怎么在输入数值的同时，就开始对行列求和

问题描述 jquer实现可编辑表格,怎么在输入数值的同时,就开始对行列求和 就是边输入数值,同时动态的显示求和之后的结果,怎么监听,或者用其他事件就可以实现 解决方案 onkeyup事件$('#ID').keyup(function(){ //这里实现求和运算}) 解决方案二: keyup() 触发.或将函数绑定到指定元素的 key up 事件

JS实现动态生成表格并提交表格数据向后端_javascript技巧

本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. <script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></

可编辑表格问题 jquery

问题描述 可编辑表格问题 jquery 做了一个可编辑表格,但是表格双击之后会变大,求大神解答.js代码 $(function() { //找到所有名字的单元格 var name = $(""table tr td""); //给这些单元格注册鼠标点击事件 name.click(function() { //找到当前鼠标单击的td var tdObj = $(this); //保存原来的文本 var oldText = $(this).text(); //创建一个文

javascript 动态添加表格行

javascript|动态 介绍如何使用javascript动态添加表格行,并对其中的方法做详细的说明 动态添加表格行 文/Ray  表格部分代码如下: <table id="testTbl" border=1> <tr id="tr1"> <td width=6%><input type=checkbox id="box1"></td> <td id="b"&

Dreamweaver8.0插入并编辑表格

查看全套"dreamweaver8.0教程" 表格是网页设计制作不可缺少的元素,它以简洁明了和高效快捷的方式将图片.文本.数据和表单的元素有序的显示在页面上,让我们可以设计出漂亮的页面,使用表格排版的页面在不同平台.不同分辨率的浏览器里都能保持其原有的布局,而在不同的浏览器平台有较好的兼容性,所以表格是网页中最常用的排版方式之一. 一.插入并编辑表格 1.插入表格 在文档窗口中,将光标放在需要创建表格的位置,单击"常用"快捷栏中的表格按钮弹出的"表格&qu

Extjs动态生成表格

在web显示数据时,会遇到grid的列数和行数不确定的这种情况.如何来根据数据动态的创建表格呢? Extjs 的json data给我们带来了一个很好的比较简单的方法. 要创建一个grid需要确定它的列数,再根据数据的数量就可以确定行数了. 看到有人用过一种方法就是讲列的属性和数据一起放在json data里去,这样可以达到效果,但是不难发现,这样的话,就很难进行分页或者更新表格里的数据. 其实我们可以结合extjs官网上的那种固定列数的访问方法来动态生成表格. 首先通过Ajax从服务端反回列的

Javascript动态创建表格及删除行列的方法

 本文实例讲述了Javascript动态创建表格及删除行列的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

js动态创建表格,删除行列的小例子

这篇文章介绍了js动态创建表格,删除行列的实例代码,有需要的朋友可以参考一下   复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

javascript动态创建表格及添加数据实例详解

  本文实例讲述了javascript动态创建表格及添加数据的方法.分享给大家供大家参考.具体分析如下: 1. 动态创建表格(代码不兼容IE6) ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu