动态编辑表格

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

Table Editor

Single click to select a cell, alt-click to select a row

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.Text;

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";
}