效果图如下：
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style type="text/css">
table {
border: 1px solid #CCCCCC;
border-collapse: collapse;
width: 400px;
}
td {
border: 1px solid #CCCCCC;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
/**
* 全选
*/
$("input[name=selectAll]").click(function() {
$("input[type=checkbox]").prop("checked", true);
});
/**
* 不选
*/
$("input[name=cancel]").click(function() {
$("input[type=checkbox]:checked").each(function(){
$(this).prop("checked", false);
});
});
/**
* 添加一行
*/
var content = "<tr><td><input type='checkbox'/></td><td>hello</td><td>hello</td><td>hello</td></tr>";
$("input[name=addRow]").click(function() {
$("table").append(content);
});
/**
* 删除选中行
*/
$("input[name=deleteRow]").click(function(){
$("input[type=checkbox]:checked").each(function(){
$(this).parent().parent().remove();
});
});
})
</script>
</head>
<body>
<input type="button" name="selectAll" value="全选" />
<input type="button" name="cancel" value="不选" />
<input type="button" name="addRow" value="添加一行" />
<input type="button" name="deleteRow" value="删除选中行" />
<br/>
<br/>
<table>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1_1</td>
<td>1_2</td>
<td>1_3</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2_1</td>
<td>2_2</td>
<td>2_3</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
