Foreword
On one, use CSS to achieve a style table, increasing the Select function, this section use jQuery to achieve the specified line delete functions. FIG following effects:
This chapter example code Click here to download
Implementation code
table3.html content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Table删除行</title>
<style type="text/css">
body{margin: 0;}
.main{
width: 600px;
margin-top: 10px;
margin-left:auto;
margin-right:auto;
}
.table{width: 100%;background-color: transparent;border-collapse:collapse;border-spacing:0}
.table th,.table td{padding:8px;line-height:20px;text-align: center;}
.table-border{border-top:1px solid #ddd;}
.table-border th,.table-border td{border-bottom: 1px solid #ddd;}
.table-bg thead{background-color: #f5fafe;}
.tableselected{background-color: #f5fafe;}
.table-bordered{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;border-left:0}
.table-bordered th,.table-bordered td{border-left:1px solid #ddd}
.table-border.table-bordered{border-bottom:0}
.table-hover tbody tr:hover td{background-color:#f5f5f5}
</style>
</head>
<body>
<div class="main" >
<table class="table table-border table-bordered table-bg table-hover">
<thead>
<tr>
<th width="25"><input type="checkbox" name="" value="" ></th>
<th width="75">ID</th>
<th width="120">用户名</th>
<th width="80">性别</th>
<th width="130">电话</th>
<th width="170">操作</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" value="1" name=""></td>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>123456789</td>
<td ><a title="删除" onClick="article_del(this)" href="javascript:;">删除</a></td>
</tr>
<tr >
<td><input type="checkbox" value="1" name=""></td>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>123456789</td>
<td ><a title="删除" onClick="article_del(this)" href="javascript:;">删除</a></td>
</tr>
<tr >
<td><input type="checkbox" value="1" name=""></td>
<td>3</td>
<td>王五</td>
<td>男</td>
<td>123456789</td>
<td ><a title="删除" onClick="article_del(this)" href="javascript:;">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
/*checkbox全选*/
$("table thead th input:checkbox").on(
"click" ,
function(){
$(this).closest("table").find("tr > td:first-child input:checkbox").prop("checked",$(this).prop("checked"));
}
);
$("table tbody tr input:checkbox").on("click",
function(){
var ischeck = $(this).prop("checked");
if(ischeck == false)
{
$(this).closest("table").find("tr > th:first-child input:checkbox").prop("checked",$(this).prop("checked"));
}
}
);
/*删除*/
function article_del(obj){
var res = confirm('确认要删除吗？');
if(res == true)
{
$(obj).parents("tr").remove();
}
}
</script>
</body>
</html>
table2.html content section on contrast, an increase of only a few lines of code, first of all made the following changes for <a> </a>
<a title="删除" onClick="article_del(this)" href="javascript:;">删除</a>
Which obviously is a function onClick <a> click event execution.
Where href = "javascript :;" some beginners may not understand. href attribute is used to specify the label <a> hyperlink destination URL, the value of the href attribute can be relative or absolute URL of any valid documentation, including the fragment identifier and code segments JavaScript. Here href = "javascript :;", which javascript: pseudo protocol is that it allows us to call the javascript function through a link, while the use of this approach can be achieved javascript :; A click event tag runtime, if a lot of page content when there is a scroll bar, the page will not bounce, a better user experience. Perhaps you might think, with a href = "#", I can only say, try ~
Epilogue
Under section write dynamically add rows
