教程集 > 脚本编程 > javascript > 正文动态编辑表格

动态编辑表格

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供动态编辑表格等资源，欢迎您收藏本站，我们将为您提供最新的动态编辑表格资源

提示：您可以先修改部分代码再运行

<html> <head> <style>   TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;} </style> <body style="font-family: verdana"> <h2>Table Editor</h2> <h3>Single click to select a cell, alt-click to select a row</h3> <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> <input id=ButtonAddRow style="width: 200px;" type=button value="Add Row" onclick="addRow()"> <input id=ButtonRemoveRow style="width: 200px;" type=button value="Remove Row" onclick="removeRow()"> <input id=ButtonAddCell style="width: 200px;" type=button value="Add Cell" onclick="addCell()"> <input id=ButtonRemoveCell style="width: 200px;" type=button value="Remove Cell" onclick="removeCell()"> <input id=ButtonMoveUp style="width: 200px;" type=button value="Move Up" onclick="moveUp()"> <input id=ButtonMoveDown style="width: 200px;" type=button value="Move Down" onclick="moveDown()"> <input id=ButtonMoveLeft style="width: 200px;" type=button value="Move Left" onclick="moveLeft()"> <input id=ButtonMoveRight style="width: 200px;" type=button value="Move Right" onclick="moveRight()"> <input id=ButtonEditContents style="width: 200px;" type=button value="Edit Contents" onclick="editContents();"> <input type=text style="display: none; width: 400px;" id=EditCell> <input id=ButtonEditStyle style="width: 200px;" type=button value="Edit Table Style" onclick="editStyle();"> <input type=text style="display: none; width: 400px;" id=EditStyle> <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>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
一样的table？不一样的table(可编辑状态table)
jQuery表格编辑插件 TableEditor
jQuery 表格插件整理
 UI Table Edit
jQuery(非HTML5)可编辑表格实现代码
 10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
 editable.js 基于jquery的表格的编辑插件
 基于jQuery的表格操作插件
 jQuery对话框插件 jquery.modalbox
php和css一样吗

上一篇：进度条上端加图片下一篇：随次数变化提示

[关闭]

动态编辑表格

最近更新

浏览排行