那位大虾做过类似于一般添加属性的HTML控件，请指教！

偶以前做过，后台使用asp,前台就是一个jscript了
主要使用ado技术来实现的，你看看databinding，那样可能更加简单一点

解决方案 »

  1.   

    <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>
    <br>
    <h3>Single click to select a cell, alt-click to select a row</h3>
    <br>
    <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>
    <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);
          }
          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);
      }
    }
      

  2.   


    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>
      

  3.   

    谢谢各位，谢谢awaysrain(绝对零度) ，但我想直接在Table中进行修改，修改前为不可编辑状态，点击鼠标，则变为可输入状态，不知道应该怎么来实现，谢谢了！