动态编辑表格

作者：袖梨 2022-07-02

YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.***w3.org/TR/REC-html40/loose.dtd">

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

<p><br>
</p>
<br>
<style><br />
  TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;}<br />
</style>
<br>
<br>
<h2>Table Editor</h2>
<br>
<br><br>
<h3>Single click to select a cell, alt-click to select a row</h3>
<br>
<br><br>
<div id="TableContainer">
<br>
<table id="TheTable" border="1" style="border-collapse: collapse; table-layout: fixed">
<br>
  <tbody>
<br>
     <tr>
<td>Cell 1,1</td>
<td>Cell 1,2</td>
<td>Cell 1,3</td>
</tr>
<br>
     <tr>
<td>Cell 2,1</td>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
<br>
     <tr>
<td>Cell 3,1</td>
<td>Cell 3,2</td>
<td>Cell 3,3</td>
</tr>
<br>
  </tbody>
<br>
</table>
<br>
</div>
<p><br><br><br></p>
<p><input id="ButtonAddRow" style="" type="button" value="Add Row" onclick="addRow()"><br><br>
<input id="ButtonRemoveRow" style="" type="button" value="Remove Row" onclick="removeRow()"><br><br>
<input id="ButtonAddCell" style="" type="button" value="Add Cell" onclick="addCell()"><br><br>
<input id="ButtonRemoveCell" style="" type="button" value="Remove Cell" onclick="removeCell()"><br><br>
<input id="ButtonMoveUp" style="" type="button" value="Move Up" onclick="moveUp()"><br><br>
<input id="ButtonMoveDown" style="" type="button" value="Move Down" onclick="moveDown()"><br><br>
<input id="ButtonMoveLeft" style="" type="button" value="Move Left" onclick="moveLeft()"><br><br>
<input id="ButtonMoveRight" style="" type="button" value="Move Right" onclick="moveRight()"><br><br>
<input id="ButtonEditContents" style="" type="button" value="Edit Contents" onclick="editContents();"><br>
<input type="text" style="display: none; " id="EditCell"><br><br>
<input id="ButtonEditStyle" style="" type="button" value="Edit Table Style" onclick="editStyle();"><br>
<input type="text" style="display: none; " id="EditStyle"><br><br>
<script><br />
var lastSelection = null;</script></p>
<p>ButtonAddRow.setExpression("disabled", "nothingSelected(lastSelection)");<br>
ButtonRemoveRow.setExpression("disabled", "! rowSelected(lastSelection)");<br>
ButtonAddCell.setExpression("disabled", "nothingSelected(lastSelection)");<br>
ButtonRemoveCell.setExpression("disabled", "! cellSelected(lastSelection)");<br>
ButtonMoveUp.setExpression("disabled", "! rowSelected(lastSelection)");<br>
ButtonMoveDown.setExpression("disabled", "! rowSelected(lastSelection)");<br>
ButtonMoveLeft.setExpression("disabled", "! cellSelected(lastSelection)");<br>
ButtonMoveRight.setExpression("disabled", "! cellSelected(lastSelection)");<br>
ButtonEditContents.setExpression("disabled", "(! cellSelected(lastSelection)) || (EditCell.style.display == '')");<br>
ButtonEditStyle.setExpression("disabled", "(EditStyle.style.display == '')");<br>
ButtonEditStyle.setExpression("value", "'Edit ' + whatIsSelected(lastSelection) + ' Style'");</p>
<p>function select(element) {<br>
  var e, r, c;<br>
  if (element == null) {<br>
    e = window.event.srcElement;<br>
  } else {<br>
    e = element;<br>
  }<br>
  if ((window.event.altKey) || (e.tagName == "TR")) {<br>
    r = findRow(e);<br>
    if (r != null) {<br>
      if (lastSelection != null) {<br>
        deselectRowOrCell(lastSelection);<br>
      }<br>
      selectRowOrCell(r);<br>
      lastSelection = r;<br>
    }<br>
  } else {<br>
    c = findCell(e);<br>
    if (c != null) {<br>
      if (lastSelection != null) {<br>
        deselectRowOrCell(lastSelection);<br>
      }<br>
      selectRowOrCell(c);<br>
      lastSelection = c;<br>
    }<br>
  }</p>
<p>  window.event.cancelBubble = true;<br>
}</p>
<p>TableContainer.onclick = select;</p>
<p>function cancelSelect() {</p>
<p>  if (window.event.srcElement.tagName != "BODY") <br>
    return;</p>
<p>  if (lastSelection != null) {<br>
    deselectRowOrCell(lastSelection);<br>
    lastSelection = null;<br>
  }<br>
}</p>
<p>document.onclick = cancelSelect;</p>
<p>function findRow(e) {<br>
  if (e.tagName == "TR") {<br>
    return e;<br>
  } else if (e.tagName == "BODY") {<br>
    return null;<br>
  } else {<br>
    return findRow(e.parentElement);<br>
  }<br>
}</p>
<p>function findCell(e) {<br>
  if (e.tagName == "TD") {<br>
    return e;<br>
  } else if (e.tagName == "BODY") {<br>
    return null;<br>
  } else {<br>
    return findCell(e.parentElement);<br>
  }<br>
}</p>
<p>function deselectRowOrCell(r) {<br>
  r.runtimeStyle.backgroundColor = "";<br>
  r.runtimeStyle.color = "";<br>
  //r.runtimeStyle.fontFamily = "Verdana";<br>
}</p>
<p>function selectRowOrCell(r) {<br>
  r.runtimeStyle.backgroundColor = "darkblue";<br>
  r.runtimeStyle.color = "white";<br>
  //r.runtimeStyle.fontFamily = "Verdana";<br>
}</p>
<p>function addRow() {<br>
  var r, p, nr;<br>
  if (lastSelection == null) {<br>
    r = null;<br>
    p = TheTable.children[0];<br>
  } else {<br>
    r = lastSelection;</p>
<p>    if (r.tagName == "TD") {<br>
      r = r.parentElement;<br>
    }</p>
<p>    p = r.parentElement;<br>
  }</p>
<p>  nr = document.createElement("TR");</p>
<p>  p.insertBefore(nr, r);</p>
<p>  select(nr);</p>
<p>  addCell();</p>
<p>  return nr;    <br>
}</p>
<p>function removeRow() {<br>
  var r, p, nr;<br>
  if (lastSelection == null)<br>
    return false;</p>
<p>  r = lastSelection;</p>
<p>  if (r.tagName == "TD") {<br>
    r = r.parentElement;<br>
  }</p>
<p>  p = r.parentElement;</p>
<p>  p.removeChild(r);</p>
<p>  lastSelection = null;<br>
 <br>
  return r; <br>
}</p>
<p>function addCell() {<br>
  var r, p, c, nc, text;<br>
  if (lastSelection == null)<br>
    return false;</p>
<p>  r = lastSelection;</p>
<p>  if (r.tagName == "TD") {<br>
    r = r.parentElement;<br>
    c = lastSelection;<br>
  } else {<br>
    c = null;<br>
  }</p>
<p>  nc = document.createElement("TD");<br>
  text = document.createTextNode("New Cell");</p>
<p>  nc.insertBefore(text, null);<br>
  r.insertBefore(nc, c);</p>
<p>  select(nc);</p>
<p>  return nc;<br>
}</p>
<p>function removeCell() {<br>
  var c, p, nr;<br>
  if (lastSelection == null)<br>
    return false;</p>
<p>  c = lastSelection;</p>
<p>  if (c.tagName != "TD") {<br>
    return null;<br>
  }</p>
<p>  p = c.parentElement;</p>
<p>  p.removeChild(c);</p>
<p>  lastSelection = null;<br>
 <br>
  return c; <br>
}</p>
<p>function editContents() {<br>
  var c, p, nr;<br>
  if (lastSelection == null)<br>
    return false;</p>
<p>  c = lastSelection;</p>
<p>  if (c.tagName != "TD") {<br>
    return null;<br>
  }</p>
<p>  EditCell.style.display = "";</p>
<p>  EditCell.value = c.innerHTML;</p>
<p>  c.setExpression("innerHTML", "EditCell.value");</p>
<p>  EditCell.focus();</p>
<p>  EditCell.onblur = unhookContentsExpression;<br>
}</p>
<p>function unhookContentsExpression() {<br>
  lastSelection.removeExpression("innerHTML");<br>
  EditCell.value = '';<br>
  EditCell.style.display = "none";<br>
}</p>
<p>function editStyle() {<br>
  var c;</p>
<p>  if (lastSelection == null) {<br>
    c = TheTable;<br>
  } else {<br>
    c = lastSelection;<br>
  }<br>
  <br>
  EditStyle.style.display = "";</p>
<p>  EditStyle.value = c.style.Text;</p>
<p>  c.style.setExpression("cssText", "EditStyle.value");</p>
<p>  EditStyle.focus();</p>
<p>  EditStyle.onblur = unhookStyleExpression;<br>
}</p>
<p>function unhookStyleExpression() {<br>
  var c;</p>
<p>  if (lastSelection == null) {<br>
    c = TheTable;<br>
  } else {<br>
    c = lastSelection;<br>
  }<br>
  c.style.removeExpression("cssText");</p>
<p>  EditStyle.value = '';<br>
  EditStyle.style.display = "none";<br>
}</p>
<p>function moveUp() {<br>
  var r, p, ls;<br>
  if (lastSelection == null)<br>
    return false;</p>
<p>  r = lastSelection;</p>
<p>  if (r.tagName != "TR") {<br>
    return null;<br>
  }</p>
<p>  if (r.rowIndex == 0) <br>
    return;</p>
<p>  ls = r.previousSibling;</p>
<p>  p = ls.parentElement;</p>
<p>  p.insertBefore(r, ls);</p>
<p>  return r;<br>
}</p>
<p>function moveDown() {<br>
  var r, p, ls;<br>
  if (lastSelection == null)<br>
    return false;</p>
<p>  r = lastSelection;</p>
<p>  if (r.tagName != "TR") {<br>
    return null;<br>
  }</p>
<p>  ls = r.nextSibling;</p>
<p>  if (ls == null)<br>
    return null;</p>
<p>  p = ls.parentElement;</p>
<p>  ls = ls.nextSibling;</p>
<p>  p.insertBefore(r, ls);</p>
<p>  return r;<br>
}</p>
<p>function moveLeft() {<br>
  var c, p, ls;<br>
  if (lastSelection == null)<br>
    return false;</p>
<p>  c = lastSelection;</p>
<p>  if (c.tagName != "TD") {<br>
    return null;<br>
  }</p>
<p>  ls = c.previousSibling;</p>
<p>  if (ls == null)<br>
    return null;</p>
<p>  p = ls.parentElement;</p>
<p>  p.insertBefore(c, ls);</p>
<p>  return c;<br>
}</p>
<p>function moveRight() {<br>
  var c, p, ls;<br>
  if (lastSelection == null)<br>
    return false;</p>
<p>  c = lastSelection;</p>
<p>  if (c.tagName != "TD") {<br>
    return null;<br>
  }</p>
<p>  ls = c.nextSibling;</p>
<p>  if (ls == null)<br>
    return null;</p>
<p>  p = ls.parentElement;</p>
<p>  ls = ls.nextSibling;</p>
<p>  p.insertBefore(c, ls);</p>
<p>  return c;<br>
}</p>
<p>function nothingSelected() {<br>
  return (lastSelection == null);<br>
}</p>
<p>function rowSelected() {<br>
  var c;<br>
  if (lastSelection == null)<br>
    return false;</p>
<p>  c = lastSelection;</p>
<p>  return (c.tagName == "TR")<br>
}</p>
<p>function cellSelected() {<br>
  var c;<br>
  if (lastSelection == null)<br>
    return false;</p>
<p>  c = lastSelection;</p>
<p>  return (c.tagName == "TD")<br>
}</p>
<p>function whatIsSelected() {<br>
  if (lastSelection == null) <br>
    return "Table";<br>
  if (lastSelection.tagName == "TD") <br>
    return "Cell";<br>
  if (lastSelection.tagName == "TR")<br>
    return "Row";<br>
}</p>
<p></p>

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

相关文章

精彩推荐