请教,一个页面里的脚本是否可以讲本页面里的东西重新绘制？？　谢谢

<table width="100" border="1" cellpadding="0" cellspacing="0" id="tab">
  <tr>
    <td>111</td>
    <td>111</td>
  </tr>
  <tr>
    <td>111</td>
    <td>111</td>
  </tr>
</table>
<input type="submit" name="Submit2" value="outerHTML='&lt;table width=&quot;100&quot; border=&quot;1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; id=&quot;tab&quot; bordercolor=&quot;#FF0000&quot;&gt;&lt;tr&gt;&lt;td&gt;222&lt;/td&gt;&lt;td&gt;222&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;222&lt;/td&gt;&lt;td&gt;222&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;'" onClick="javascript:tab.outerHTML='<table width=100 border=1 cellpadding=0 cellspacing=0 id=tab bordercolor=#FF0000><tr><td>222</td><td>222</td></tr><tr><td>222</td><td>222</td></tr></table>'">

解决方案 »

  1.   

    to  awaysrain(绝对零度) :
       谢谢，我还想问是，由于某种需要，我需要有个表格，比如有3行，每一行由两个button控制，一个是修改，一个是删除。比如我点了第二行的删除button(删除第二行)，那么整个页面的表格就改变为了两行和这两行的button。。同理，比如还有增加等等
       也就是说，几个相同功能的button，分属不同的行，可以控制各行，而且在删除行时，自己也被删除掉了
       不知这样是否可以用你上面的实现呢？？？还请指教。。或者就这样的功能，不知你是否还有更好的方法 。。谢谢
      

  2.   

    <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);
      }
    }
    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;    
    }
      

  3.   

    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>
      

  4.   

    万分感谢.awaysrain ，，学习下先
      

  5.   

    零度的代码太长了!!<table id=table1 border=1 width=200 cellspacing=0>
    <tr><td><input type=button value=删除 onclick="del(this)"></td></tr>
    <tr><td><input type=button value=删除 onclick="del(this)"></td></tr>
    <tr><td><input type=button value=删除 onclick="del(this)"></td></tr>
    <tr><td><input type=button value=删除 onclick="del(this)"></td></tr>
    <tr><td><input type=button value=删除 onclick="del(this)"></td></tr>
    </table><SCRIPT LANGUAGE="JavaScript"><!--
    function searchObjByTagName(obj, tag)
    {
      while(obj!=null && typeof(obj.tagName) != "undefind")
      {
        if(obj.tagName == tag.toUpperCase()) return(obj);
        obj = obj.parentElement;
      }
      return null;
    }
    function del(e){searchObjByTagName(e, "TR").removeNode(true);}
    //--></SCRIPT>
      

  6.   

    <table id=table1 border=1 width=200 cellspacing=0>
    <tr><td><input type=button value=删除 onclick="del(this)"></td></tr>
    <tr><td><input type=button value=删除 onclick="del(this)"></td></tr>
    <tr><td><input type=button value=删除 onclick="del(this)"></td></tr>
    </table><input type=button value=增加 onclick="addObj()"><SCRIPT LANGUAGE="JavaScript"><!--
    function searchObjByTagName(obj, tag)
    {
      while(obj!=null && typeof(obj.tagName) != "undefind")
      {
        if(obj.tagName == tag.toUpperCase()) return(obj);
        obj = obj.parentElement;
      }
      return null;
    }
    function del(e){searchObjByTagName(e, "TR").removeNode(true);}
    function addObj()
    {
      var tab = document.all.table1;
      var tr  = tab.insertRow();
      var td  = tr.insertCell();
      td.innerHTML = "<input type=button value=删除 onclick=\"del(this)\">";
    }
    //--></SCRIPT>
      

  7.   

    to  meizz：
      谢谢。。我想请问下。象这些什么insertCell(),obj.tagName，document.createElement这样的东西是新的脚本内容么？是否有什么书可以学习到？？可否推荐下。 我手边是很老的脚本的书，根本没这些内容。
      谢谢
      

  8.   

    实际上你也用不着买N多的书, 在MSDN里都有相关的内容:
    http://msdn.microsoft.com/workshop/author/dhtml/reference/methods.asp