在table中加入tr的问题

<html>
<head>
<style>
  TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;}
</style>
</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 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>

调试易

在table中加入tr的问题

解决方案 »