增删单元格示例1.htm

来自「javascript编程的组件」· HTM 代码 · 共 411 行

HTM
411 行
字号 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0048)http://fason.nease.net/zhuanti/table/sample1.htm -->
<!-- saved from url=(0065)http://msdn.microsoft.com/library/en-us/dndude/html/tableedit.asp --><HTML><HEAD><TITLE>Sample</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>TR {
	FONT-WEIGHT: bold; FONT-SIZE: 20px; COLOR: black; FONT-FAMILY: verdana; BACKGROUND-COLOR: white
}
</STYLE>
<xml><MSHelp:Keyword Index="A" Term="tableedit"/></xml><!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END -->
<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<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 style="TABLE-LAYOUT: fixed; BORDER-COLLAPSE: collapse" 
border=1>
  <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" onclick=addRow() type=button value="Add Row"><BR><INPUT id=ButtonRemoveRow style="WIDTH: 200px" onclick=removeRow() type=button value="Remove Row"><BR><INPUT id=ButtonAddCell style="WIDTH: 200px" onclick=addCell() type=button value="Add Cell"><BR><INPUT id=ButtonRemoveCell style="WIDTH: 200px" onclick=removeCell() type=button value="Remove Cell"><BR><INPUT id=ButtonMoveUp style="WIDTH: 200px" onclick=moveUp() type=button value="Move Up"><BR><INPUT id=ButtonMoveDown style="WIDTH: 200px" onclick=moveDown() type=button value="Move Down"><BR><INPUT id=ButtonMoveLeft style="WIDTH: 200px" onclick=moveLeft() type=button value="Move Left"><BR><INPUT id=ButtonMoveRight style="WIDTH: 200px" onclick=moveRight() type=button value="Move Right"><BR><INPUT id=ButtonEditContents style="WIDTH: 200px" onclick=editContents(); type=button value="Edit Contents"> 
<INPUT id=EditCell style="DISPLAY: none; WIDTH: 400px"><BR><INPUT id=ButtonEditStyle style="WIDTH: 200px" onclick=editStyle(); type=button value="Edit Table Style"> 
<INPUT id=EditStyle style="DISPLAY: none; WIDTH: 400px"><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>

<P align=right><A href="http://fason.nease.net/">【阿信的小天地】</A></P></BODY></HTML>

增删单元格示例1.htm - 源码说明

本页面展示了「javascript编程的组件」中的 增删单元格示例1.htm 源码文件，采用 HTM 编程语言编写，共 411 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫下载站收录了大量与javascript相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?