prefacio
En una, el uso de CSS para lograr una tabla de estilos, el aumento de la función de selección, esta sección utilizan jQuery para lograr las funciones de borrado de línea especificado. FIG siguientes efectos:
Este código de ejemplo del capítulo clic aquí para descargar
código de implementación
contenido table3.html
<!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 sección de contenido en contraste, un aumento de sólo unas pocas líneas de código, en primer lugar hicieron los siguientes cambios para <a> </a>
<a title="删除" onClick="article_del(this)" href="javascript:;"> 删除 </a>
Lo que obviamente es una función onClick <a> clic ejecución del evento.
Donde href = "javascript:;" algunos principiantes no se entiendan. atributo href se utiliza para especificar la etiqueta <a> URL de destino hipervínculo, el valor del atributo href puede ser URL relativa o absoluta de cualquier documentación válida, incluyendo el identificador de fragmento y segmentos de código JavaScript. Aquí href = "javascript:;", que javascript: seudo protocolo es que nos permite llamar a la función Javascript a través de un enlace, mientras que el uso de este enfoque puede lograrse javascript:; un tiempo de ejecución de la etiqueta de evento de clic, si una gran cantidad de contenido de la página cuando hay una barra de desplazamiento, la página no rebote, una mejor experiencia de usuario. Tal vez se podría pensar, con un href = "#", solo puedo decir, intenta ~
epílogo
En la sección de escritura añadir dinámicamente filas
