可在线编辑的表格,包括动态添加单元格、修改单元格内容
<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 可在线编辑的表格 站长特效网欢迎您。</title>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<div id="www_zzjs_net">
<table id="TheTable" border="1" style="border-collapse: collapse; table-layout: fixed">
<tbody>
<tr><td>站长特效一号</td><td>站长特效二号</td><td>站长特效三号</td></tr>
<tr><td>站长特效四号</td><td>站长特效五号</td><td>站长特效六号</td></tr>
<tr><td>站长特效七号</td><td>站长特效八号</td><td>站长特效九号</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);
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
selectRowOrCell(r);
lastSelection = r;
}
} else {
c = findCell(e);
if (c != null) {
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
}
selectRowOrCell(c);
lastSelection = c;
}
}
window.event.cancelBubble = true;
}
www_zzjs_net.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);
}
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
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";
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
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";
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
</script>
</body>
</html>