cloneNode實現表格增加刪除效果

2019-11-21 02:27:29

字體：大中小

來源：轉載

供稿：網友

<%@   page   contentType="text/html;   charset=gb2312"   %>      <html>      <head>      <title>查詢窗口</title>      <script   language="JavaScript">           function   changeValue1(obj){      if(obj.value   ==   0){      document.getElementById("result").value   =   "f117";        }else   {      document.getElementById("result").value   =   "gaofei";        }      }        function   changeValue(obj){      if(obj.value   ==   0){      obj.parentElement.parentElement.cells[1].children[0].value   =   "f117";        }else   if(obj.value   ==   1){      obj.parentElement.parentElement.cells[1].children[0].value   =   "gaofei";        }else        obj.parentElement.parentElement.cells[1].children[0].value   =   "";             }   function   insertrow(){      var   newrow   =   document.all.tbl.rows[0].cloneNode(true); //克隆一行      document.all("newTB").appendChild(newrow); //添加剛才克隆的一行      }           function   delerow(){      var   numrow   =   document.all("newTB").rows.length;      if   (numrow   ==   0)   {      alert("此行無法刪除！");      return   false;}      document.all("newTB").deleteRow(numrow-1);      }      </script>      </head>           <body   class="dialog_body">      <form   method="POST"   onSubmit="return   doSubmit(this)">      <fieldset   style="margin:5px;width:630px;">      <legend>查詢條件</legend>          <div   align="center"   class="inputblock"   style="width:930;height:150;overflow:auto;">              <table   border="1"   width="900"   cellpadding="0"   cellspacing="0"   class="table">                  <tr>                  <td   class="title"   width="16%">列表框</td>                  <td   class="title"   width="16%">結果</td>                  </tr>                </table>                    <table   border="1"   width="900"   cellpadding="0"   cellspacing="0"   class="table">                <tbody   id="tbl">                    <tr>                      <td   width="16%">                      <select   id="pid"   name="project"   onchange="changeValue(this)">                      <option   value=""></option>      <option   value="0">人員編號</option>      <option   value="1">姓名</option>      </select>                      </td>                      <td   width="16%">                      <input   id="result"   type="text"   value=""   readonly="true">                      </td>                  </tr>              </tbody>          <tbody   id="newTB">                   </tbody>                </table>          </div>      </fieldset>      <div   align="right"   style="margin:10px;">      <input   type="button"   onClick="insertrow();"   value="增加一行">      <input   type="button"   onClick="delerow();"   value="刪除一行">      </div>      </form>      </body>      </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：支持IE和FF的div＋css選項卡

下一篇：用js得到網頁中所有的div的id