`

cloneNode实现表格增加删除效果

javascript 
阅读更多 
 <%@   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>
分享到：
| 支持IE和FF的div＋css选项卡
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics