# javascript jquery批量删除
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>批量删除</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$(":checked").parent().parent().fadeOut("show"); //隐藏所有被选中的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>
<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}
</style>
</head>
<body>
<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>
</body>
</html>