Jquery刪除table裡面checkbox選中的多個行

標籤：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選中的多個行