?? 增刪單元格示例1.htm
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0048)http://fason.nease.net/zhuanti/table/sample1.htm -->
<!-- saved from url=(0065)http://msdn.microsoft.com/library/en-us/dndude/html/tableedit.asp --><HTML><HEAD><TITLE>Sample</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>TR {
FONT-WEIGHT: bold; FONT-SIZE: 20px; COLOR: black; FONT-FAMILY: verdana; BACKGROUND-COLOR: white
}
</STYLE>
<xml><MSHelp:Keyword Index="A" Term="tableedit"/></xml><!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END -->
<META content="MSHTML 6.00.2800.1106" name=GENERATOR></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 style="TABLE-LAYOUT: fixed; BORDER-COLLAPSE: collapse"
border=1>
<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" onclick=addRow() type=button value="Add Row"><BR><INPUT id=ButtonRemoveRow style="WIDTH: 200px" onclick=removeRow() type=button value="Remove Row"><BR><INPUT id=ButtonAddCell style="WIDTH: 200px" onclick=addCell() type=button value="Add Cell"><BR><INPUT id=ButtonRemoveCell style="WIDTH: 200px" onclick=removeCell() type=button value="Remove Cell"><BR><INPUT id=ButtonMoveUp style="WIDTH: 200px" onclick=moveUp() type=button value="Move Up"><BR><INPUT id=ButtonMoveDown style="WIDTH: 200px" onclick=moveDown() type=button value="Move Down"><BR><INPUT id=ButtonMoveLeft style="WIDTH: 200px" onclick=moveLeft() type=button value="Move Left"><BR><INPUT id=ButtonMoveRight style="WIDTH: 200px" onclick=moveRight() type=button value="Move Right"><BR><INPUT id=ButtonEditContents style="WIDTH: 200px" onclick=editContents(); type=button value="Edit Contents">
<INPUT id=EditCell style="DISPLAY: none; WIDTH: 400px"><BR><INPUT id=ButtonEditStyle style="WIDTH: 200px" onclick=editStyle(); type=button value="Edit Table Style">
<INPUT id=EditStyle style="DISPLAY: none; WIDTH: 400px"><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>
<P align=right><A href="http://fason.nease.net/">【阿信的小天地】</A></P></BODY></HTML>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -