特效千寻-表格全功能演示

表格全功能演示

Cell 1,1	Cell 1,2	Cell 1,3
Cell 2,1	Cell 2,2	Cell 2,3
Cell 3,1	Cell 3,2	Cell 3,3

加入如下代码到body区域

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

	COPYRIGHT © 2003-2005 ALL RIGHTS RESERVED
	业务联系｜广告服务｜网站建设｜关于我们｜免责声明月光宝盒工作室 800*600