jquery DOM模型添加 删除

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
  <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
  <script>
  
    function add(t){
     
      $(t).parent().parent().append($(t).parent().clone());
    }
    function del(t){
      if($(".select").length>1){
            $(t).parent().remove();
        }
    }
    function getSelect(){
      //还未写好
        $("select").each(function(t){
          console.dir($(t));
        });
       
    }
  </script>
  <style>
   
  </style>
</head>
<body>

  <div>
    <button onclick="getSelect()">
    获取下拉框的值
  </button>
  </div>
 
  <table>
    <thead>
    	<tr>
      	<td>序号</td>
       <td>公司名称</td>
      </tr>
    </thead>
    <tbody>
    	<tr>
      	<td>1</td>
       <td>
         <div class='select'>
            <select>
              <option value ="volvo">Volvo</option>
              <option value ="saab" >Saab</option>
              <option value="opel" selected>Opel</option>
              <option value="audi">Audi</option>
              </select>
            <button onclick="del(this)">
              删除当前行
            </button>
          	  <button onclick="add(this)">
              添加行
            </button>
          </div>
       </td>
      </tr>
    </tbody>
  </table>
  
</body>
</html>

  

posted on 2021-04-27 10:49  水行者  阅读(31)  评论(0编辑  收藏  举报

导航