cloneNode实现表格增加删除效果_javascript技巧-jsチュートリアル-php.cn

cloneNode实现表格增加删除效果_javascript技巧

WBOY

リリース： 2016-05-16 19:24:06

オリジナル

1018 人が閲覧しました

<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>    
      
     
      
  <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>    
                  </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>

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