码迷,mamicode.com
首页 > Web开发 > 详细

Jquery删除table里面checkbox选中的多个行

时间:2017-09-08 18:03:18      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:asc   匹配   数据   document   idt   checked   strong   img   move   

自己闲来无聊,写了一篇关于jq选中复选框删除数据的一个功能,不足之处,还望多多包涵

js代码

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    $("button").click(function(){
         $(":checked").parent().parent().fadeOut("show"); //隐藏所有被选中的input元素
    // $(":checked").parent().parent().remove();   //删除所有被选中的input元素
        //parent() 获得当前匹配元素集合中每个元素的父元素,
        })   
    $("tr").mousemove(function(){
        $(this).css("background","#F0F0F0");  //鼠标经过背景颜色变为灰色
        })
          $("tr").mouseout(function(){
        $(this).css("background","#fff");  //离开后背景颜色回复白色
        })  
        $("#button1").click(function(){
            $(":checkbox").attr("checked",true);   //设置所有复选框默认勾选       
            })
            $("#button2").click(function(){
            $(":checkbox").attr("checked",false);   //设置所有复选框未勾选   
            })
});

</script>

在这里我为了制作一个表格,所以写了点CSS代码,跟html代码

<style>

table{ border-collapse: collapse; border:1px solid #FFFFFF}

table td{ text-align:center; height:30px; font-size:12px; line-height:30px; border:1px solid #efecec}
#test tr td{ text-align:center; height:30px; font-size:12px; line-height:30px; border:1px solid #efecec}
</style>

这里写了一个简单表格,可以参考一下

<table width="1000px" border="0" cellspacing="0" cellpadding="0" style="margin:0 auto">

  <tbody>

    <tr>

      <td width="26%"><input type="button" name="button" id="button1" value="全选">

      <input type="button" name="button2" id="button2" value="反选"></td>

      <td width="57%"><button>点击删除选中的表格 </button></td>

      <td width="17%">1</td>

    </tr>

    <tr>

      <td width="26%"><input type="checkbox" name="checkbox" id="1"></td>

      <td width="57%">第一行</td>

      <td width="17%">1</td>

    </tr>

    <tr>

      <td><input type="checkbox" name="checkbox2" id="2"></td>

      <td>第二行</td>

      <td>2</td>

    </tr>

    <tr>

      <td><input type="checkbox" name="checkbox3" id="3"></td>

      <td>第三行</td>

      <td>3</td>

    </tr>

    <tr>

      <td><input type="checkbox" name="checkbox4" id="4"></td>

      <td>第四行</td>

      <td>4</td>

    </tr>

    <tr>

      <td><input type="checkbox" name="checkbox5" id="5"></td>

      <td>第五行</td>

      <td>5</td>

    </tr>

      <tr>

      <td><input type="checkbox" name="checkbox3" id="3"></td>

      <td>第六行</td>

      <td>6</td>

    </tr>

    <tr>

      <td><input type="checkbox" name="checkbox4" id="4"></td>

      <td>第七行</td>

      <td>7</td>

    </tr>

    <tr>

      <td><input type="checkbox" name="checkbox5" id="5"></td>

      <td>第八行</td>

      <td>8</td>

    </tr>

  </tbody>

</table>

 分享一下页面效果图,大家可以参考,将代码复制本地,就可以运行看效果

技术分享

有不足之处还望大家海涵,有更好的方式可以一起探讨

Jquery删除table里面checkbox选中的多个行

标签:asc   匹配   数据   document   idt   checked   strong   img   move   

原文地址:http://www.cnblogs.com/zwq521/p/7495072.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!