<html><head><title>Sample (DHTML Dude)</title><style> TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;}</style><xml><MSHelp:Keyword Index="A" Term="tableedit"/></xml></HEAD> <!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END --> <body style="font-family: verdana"><h2>Table Editor</h2><br><h3>单击选择单元格，按下Alt键选择一行！</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" οnclick="addRow()"><br><input id=ButtonRemoveRow style="width: 200px;" type=button value="Remove Row" οnclick="removeRow()"><br><input id=ButtonAddCell style="width: 200px;" type=button value="Add Cell" οnclick="addCell()"><br><input id=ButtonRemoveCell style="width: 200px;" type=button value="Remove Cell" οnclick="removeCell()"><br><input id=ButtonMoveUp style="width: 200px;" type=button value="Move Up" οnclick="moveUp()"><br><input id=ButtonMoveDown style="width: 200px;" type=button value="Move Down" οnclick="moveDown()"><br><input id=ButtonMoveLeft style="width: 200px;" type=button value="Move Left" οnclick="moveLeft()"><br><input id=ButtonMoveRight style="width: 200px;" type=button value="Move Right" οnclick="moveRight()"><br><input id=ButtonEditContents style="width: 200px;" type=button value="Edit Contents" οnclick="editContents();"><input type=text style="display: none; width: 400px;" id=EditCell><br><input id=ButtonEditStyle style="width: 200px;" type=button value="Edit Table Style" οnclick="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>
