靈魂-放水

          為學日益,為道日損。

          BlogJava 首頁 新隨筆 聯系 聚合 管理
            296 Posts :: 10 Stories :: 274 Comments :: 0 Trackbacks

          收集:

          <HTML>
          <SCRIPT LANGUAGE="javascript">

          var count = 0; //count the number of rows

          function tb_addnew() //添加行
          {
          var ls_t=document.all("mytable")
          maxcell=ls_t.rows(0).cells.length; //取得表寬
          mynewrow = ls_t.insertRow(); //插入新行
          ??? for(i=0;i<maxcell;i++)
          ??? {
          ??? mynewcell=mynewrow.insertCell(); //在新行中順序插入表格單元
          ??? mynewcell.innerHTML = "<input name='row"+count+"' value = 'row"+count+"'>"http://在表格單元中添加文本輸入框
          ?//值存在一個隱藏表單域中,以便提交時使用,使用數組方法接收值
          ??? }
          ?count++;
          }

          function tb_delete() //刪除行
          {
          var ls_t=document.all("mytable");

          if(count >? 0)
          ?{
          ?ls_t.deleteRow() ; //刪除最末一行
          ?count--;
          ?}
          }

          </SCRIPT>
          <BODY>
          <TABLE id=mytable border=1>
          ?<TR><TH>第一列</TH><TH>第二列</TH><TH>第三列</TH><TH>第四列</TH></TR>
          </TABLE>
          ?<input type=button value="新增" onclick="tb_addnew()">
          ?<input type=button value="刪除" onclick="tb_delete()" >
          </BODY>
          </HTML>
          ?
          1,動態刪除Table 里面內容技巧,不需要寫太多代碼,一行:
          tb.removeNode(true)

          2,動態增加行,除了CreateElement方法,還可以這樣比較短?。?br />
          <table id=tb1></table>
          <SCRIPT>
          function addTable(){
          ? var row1 = tb1.insertRow();
          ? var cell1=row1.insertCell();
          ? var cell2=row1.insertCell();
          ? cell1.innerText="灰豆寶寶";
          ? cell2.innerText="超級大笨狼"
          }
          </SCRIPT>
          <INPUT TYPE = "button" VALUE = "AddTable" onclick = "addTable()">

          3,在DIV中動態增加Table

          <SCRIPT>
          function addTable(){
          ? var tb1 = document.createElement("table");
          ? tb1.border="1px";
          ? var row1 = tb1.insertRow();
          ? var cell1=row1.insertCell();
          ? var cell2=row1.insertCell();
          ? mydiv.appendChild(tb1);
          ? cell1.innerText="wanghr100";
          ? cell2.innerText="panyuguang962"
          }
          </SCRIPT>
          <BODY>
          <div id=mydiv style="width:400;height:300;"></div>
          <INPUT TYPE = "button" VALUE = "AddTable" onclick = "addTable()">

          4,在DIV中刪除Table,簡單只要Div.innerHTML=""就可以。

          以上是部分實用相對短小的代碼,當然有其他各種辦法實現,不過一般都比上面的長,比如組合使用DIV對象的insertAdjacentHTML 方法等,在不同需要下使用不同方法,前提是研究好瀏覽器模型 的各種對象的方法屬性。尤其是熟悉CSS+HTML就會做的很酷。就JS語言本身來說要求不高。

          以下是以Document對象為例,相關方法有:

          Method Description
          attachEvent
          createAttribute ?
          createComment ?
          createDocumentFragment
          createElement
          createEventObject
          createStyleSheet
          createTextNode
          detachEvent
          getElementById ?
          getElementsByName
          getElementsByTagName
          mergeAttributes
          recalc
          write ?
          writeln
          以DIV對象為例相關方法有:
          addBehavior
          appendChild
          applyElement
          attachEvent
          clearAttributes
          cloneNode
          contains
          detachEvent
          getAdjacentText ?
          getAttribute ?
          getAttributeNode
          getElementsByTagName
          hasChildNodes
          insertAdjacentElement
          insertAdjacentHTML
          insertAdjacentText
          insertBefore
          mergeAttributes
          normalize
          removeAttribute
          removeAttributeNode ?
          removeBehavior
          removeChild
          removeExpression
          removeNode
          replaceAdjacentText
          replaceChild
          replaceNode
          setActive
          setAttribute
          setAttributeNode
          setExpression ?

          其他,比如下拉列表對象,和拖拽操作等我有時間也整理比較一下,實現相同功能,相對比較短的精彩代碼是值得收藏的。


          1. removeNode(true) 非IE瀏覽器不支持的,應該用 obj.parentNode.removeChild(obj);
          2. insertRow(x) insertCell(y) 這個參數是IE里是可以缺省,但是在非IE瀏覽器里不可缺省


          <SCRIPT>
          function addTable(){
          ? var tb1 = document.createElement("TABLE");
          ? tb1.border="1px";
          ? var row1 = tb1.insertRow(0);
          ? var cell1=row1.insertCell(0);
          ? var cell2=row1.insertCell(1);
          ? document.getElementById("mydiv").appendChild(tb1);
          ? cell1.innerHTML="wanghr100";
          ? cell2.innerHTML="panyuguang962";
          ? row1.insertCell(2).innerHTML="要注意:給的例子要考慮全面";
          }
          </SCRIPT>
          <BODY>
          <div id="mydiv" style="width:400;height:300;"></div>
          <INPUT TYPE = "button" VALUE = "AddTable" onclick = "addTable()">

          posted on 2006-12-17 11:32 放水老倌 閱讀(614) 評論(0)  編輯  收藏 所屬分類: JavaScript
          主站蜘蛛池模板: 三河市| 绥滨县| 靖西县| 阳朔县| 砚山县| 宣汉县| 阿坝县| 哈巴河县| 赫章县| 闻喜县| 江城| 德阳市| 项城市| 大安市| 稻城县| 丰顺县| 建昌县| 会理县| 方山县| 潍坊市| 雷波县| 芷江| 分宜县| 南华县| 乌苏市| 平乡县| 溧水县| 资溪县| 平和县| 美姑县| 兴仁县| 德江县| 潮州市| 荥阳市| 依安县| 巴林左旗| 博乐市| 曲靖市| 巨野县| 晋州市| 延长县|