Home >Web Front-end >HTML Tutorial >表格的增加,删除,和全选。_html/css_WEB-ITnose

表格的增加,删除,和全选。_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:47:561471browse

<script></script>

<script> <br /> $(function(){ <br /> //全选 <br /> <br /> //删除数据 <br /> $(".del").click(function(){ <br /> $("tr").remove(); <br /> }); <br /> //新添数据 <br /> $(".newone").click(function(){ <br /> //创建一个新的节点 <br /> var $newPro=$("<tr bgcolor='#FAF3E9'><td><input type='checkbox'/><td>刘家义<td>男<td>6565654315321321<td>钻石<td>15575938043<td>1997-4-26 <td>100000<td><img class='add' src='images/add.jpg' / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" > <img class='del' src='images/del.jpg' / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" >") <br /> <br /> $("table").append($newPro); <br /> }); <br /> }); <br /> <br /></script>





  
    
    
    
    
    
    
    
    
    
  
  
    
    
    
    
    
    
    
    
    
  
  
    
    
    
    
    
    
    
    
    
  
    
    
    
    
    
    
    
    
    
    
  
姓名 性别 卡号 会员级别 电话号码 出生年月日 消费金额  
张三 6565654315321321 短工 18625455412 1995-12-09 10,000.00
     表格的增加,删除,和全选。_html/css_WEB-ITnose
        表格的增加,删除,和全选。_html/css_WEB-ITnose
    
张三 6565654315321321 短工 18625455412 1995-12-09 10,000.00
     表格的增加,删除,和全选。_html/css_WEB-ITnose
        表格的增加,删除,和全选。_html/css_WEB-ITnose
    
张三 6565654315321321 短工 18625455412 1995-12-09 10,000.00
     表格的增加,删除,和全选。_html/css_WEB-ITnose
        表格的增加,删除,和全选。_html/css_WEB-ITnose
    

新增

大神们帮帮忙吧!
怎么样1.当选中一行时,点击删除才删除。
            2.当我选中姓名前面的复选框时,则选中全部的复选框。
            3.为什么当我用  var $newPro=$("tr.ll").html();添加时,一直会向左边添加。    


回复讨论(解决方案)

<style type="text/css" >*{font-size:12px;}tr{text-align:center;height:40px;}</style><script type="text/javascript"> $(function(){         //全选 $("#allselect").click(function(){ $("table :checkbox").prop("checked",$(this).prop("checked")); });  //删除数据 $("table").on("click",".del",function(){ $("table :checkbox:checked").closest("tr").remove(); }); //新添数据 $(".newone").click(function(){ //创建一个新的节点 var $newPro=$("<tr  bgcolor='#FAF3E9'><td><input type='checkbox'/></td><td>刘家义</td><td>男</td><td>6565654315321321</td><td>钻石</td><td>15575938043</td><td>1997-4-26</td> <td>100000</td><td><img   class='add' src='images/add.jpg' / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" > <img  class='del' src='images/del.jpg' / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" ></td></tr>")  $("table").append($newPro); }); });</script></head><body><table width="800" border="0" cellspacing="0" cellpadding="0">  <tr bgcolor="#EBE7DC">    <td><input id="allselect" type="checkbox"/></td>    <td>姓名</td>    <td>性别</td>    <td>卡号</td>    <td>会员级别</td>    <td>电话号码</td>    <td>出生年月日</td>    <td>消费金额</td>    <td> </td>  </tr>  <tr bgcolor="#FAF3E9">    <td><input   type="checkbox"/></td>    <td>张三</td>    <td>男</td>    <td>6565654315321321</td>    <td>短工</td>    <td>18625455412</td>    <td>1995-12-09</td>    <td>10,000.00</td>    <td>    	<img   class='add' src="images/add.jpg" / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" >        <img  class='del' src="images/del.jpg" / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" >    </td>  </tr>  <tr class="ll" bgcolor="#FEFAF7">    <td><input  type="checkbox"/></td>    <td>张三</td>    <td>男</td>    <td>6565654315321321</td>    <td>短工</td>    <td>18625455412</td>    <td>1995-12-09</td>    <td>10,000.00</td>    <td>    	<img   class='add' src="images/add.jpg" / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" >        <img  class='del' src="images/del.jpg" / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" >    </td>  </tr>    <tr bgcolor="#FAF3E9">    <td><input  type="checkbox"/></td>    <td>张三</td>    <td>男</td>    <td>6565654315321321</td>    <td>短工</td>    <td>18625455412</td>    <td>1995-12-09</td>    <td>10,000.00</td>    <td>    	<img   class='add' src="images/add.jpg" / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" >        <img  class='del' src="images/del.jpg" / alt="表格的增加,删除,和全选。_html/css_WEB-ITnose" >    </td>  </tr></table><a href="#" class='newone'>新增</a>

请问,哪个添加只能这么写吗?不可以直接提取本身表格的数据吗?

请问,哪个添加只能这么写吗?不可以直接提取本身表格的数据吗?


添加功能你想怎么做?

就是用var $newPro=$("tr.ll").html();
直接去获取已经存在的表格信息,但是这样获取,他会一直向左浮动。

就是用var $newPro=$("tr.ll").html();
直接去获取已经存在的表格信息,但是这样获取,他会一直向左浮动。


var $newPro=""+$("tr.ll").html()+"";

删除不应该把第一段也删了吧

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn