您的位置：首页 > Web前端 > JavaScript

JavaScript操作表格全功能展示

2006-10-11 09:41 525 查看

请复制代码到本地，保存为任意 html文件，运行即可看到效果。

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

<h2>Table Editor</h2>

<br>

<h3>单击选择单元格，按下Alt键选择一行！</h3>

<br>

<tbody>

</tbody>

</table>

</div>

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航