自己闲来无聊,写了一篇关于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选中的多个行
原文地址：http://www.cnblogs.com/zwq521/p/7495072.html