prefacio
En este capítulo se diseñe de forma sencilla y elegante forma, debido al escribir antecedentes, estadísticas y otros usuarios de la información que necesite usar la tabla, "ismo" Fui a empujar la casa de alguien ligeramente códigos, en comparación con los demás preparados para adoptar el siguiente estilo de tabla, mover el ratón decoloración sobre el lugar, apoya la elección completa
El proyecto de ejemplo de la siguiente manera
Que sólo logrado mesa de estilo table1.htnl, table2.html añadir unas pocas líneas de código en la base de table1.html en el uso de JS lograr una función CheckBox Seleccionar. Ejemplo de proyecto Haga clic aquí para descargar
estilo
contenido table1.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;}
.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="删除" href="#">删除</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="删除" href="#">删除</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="删除" href="#">删除</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Dirigir un nuevo archivo HTML, copiar el contenido del archivo de arriba para ir, se puede lograr estos estilos, ya que cada una de estas propiedades, Internet Bala ir, hablar de ellos, me ralentizar el progreso.
JS lograr elecciones funcionalidad completa
Sobre la base de la table1.html anteriormente, más unas pocas líneas de código son los siguientes:
<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",$("table thead th input:checkbox").prop("checked"));
});
</script>Estas líneas en el archivo de localización son los siguientes
Tuve el tiempo para aprender el js Yilengyileng ahora a organizar sus notas de forma breve sobre la plena realización de esta elección unas pocas líneas de código.
la función jQuery fábrica "$"
En jQuery, independientemente de qué tipo de selectores de usar, que necesita de un signo "$" y un par de "()", comenzó, es decir, $ (selector). En parámetro de cadena "()" se usa generalmente, el parámetro puede comprender la expresión de cualquier CSS selectores, los siguientes son algunos de uso común:
① uso nombre de la etiqueta en el argumento
$ ( "Div"): se utiliza para obtener todos los documentos en el <div>.
$ ( "Tabla culata en T"): se utiliza para obtener todos los documentos de la culata en T tabla.
② uso de la ID en el selector de parámetros
$ ( "# Test"): un documento que se utiliza para obtener un valor de atributo de ID de elemento de la prueba
③ utilizado en el selector de clase de parámetros
$ ( "Btn_open."): Se utiliza para obtener todos los elementos con la clase CSS que se llamaba btn_open de documentos
Tal como se utiliza en este ejemplo $ ( "mesa THEAD º de entrada: casilla de verificación") en la etiqueta de nombre se utiliza. Tenga en cuenta que: Cuando el $ () sin ningún parámetro, el parámetro por defecto es el documento, que es el flujo de documentos actual.
jQuery en el método
Método Formato: $ (Selector) .en (Eventos, [childselector], [de datos], FUNC);
Papel: bind un controlador o más eventos en el elemento seleccionado (selector) y sus sub-elementos (childselector).
parámetros:
eventos Requerido. Uno o más eventos o espacio de nombres disposición fue añadida elementos seleccionados del. Si hay varios eventos, separadas por un espacio necesario, y debe ser un evento válido. Tales como "clic".
childselector: Opcional. Disposiciones sólo pueden añadirse al controlador de eventos en el elemento secundario especificado.
datos: opcional. Datos adicionales se transmite a un func función predeterminada, con valores event.data
func: Requerido. Cuando se produce el evento función especificada cuando se ejecuta.
Como en este ejemplo $ ( "mesa THEAD º de entrada: casilla de verificación") en ( "clic", la función {contenidos}); evento checbox clic es la función función de ejecución.
Encuentra método de matriz y los elementos secundarios jQuery
JQuery en el análisis anterior del método, tras el análisis de la parte interior de la función de la función (), como en la frase siguiente:
función(){
$ (This) .closest ( "mesa") de encontrar ( "tr> td: first-child de entrada: casilla de verificación"). Prop. ( "Marcada", $ (this) .prop ( "marcado"));
}
$ Look (el este), esto se refiere a los $ Función del elemento de planta, es decir, la flecha roja indica en la casilla de verificación figura
la función más cercano siguiente aspecto (), esa función no es atravesar desde el elemento actual, hasta que toda la trayectoria del elemento raíz del documento (<html>), para encontrar el primer elemento DOM elementos antecesores. Aquí nos fijamos en la estructura de árbol DOM del documento,
$ (Este) .closest ( "tabla") para lograr la función es hacia arriba (línea roja) Encontrar una mesa elemento casilla de verificación desde el principio, la flecha roja en el gráfico siguiente.
Luego, busquen en element.find método (), cuyo elemento a lo largo de los elementos de las generaciones futuras para atravesar hacia abajo hasta encontrar el elemento que desea buscar.
Así $ (this) .closest ( "mesa ") de encontrar ( "tr> td: first-child de entrada: casilla de verificación"). Esta frase es encontrar la tabla en línea con "tr> td: first-child casilla: Entrada de" características elementos, es decir casilla de verificación se muestra en la figura anterior. Sobre tr> td: en primer lugar explicar, no lo digo, hermanos en línea parecen ser muy buena, clic aquí para ver .
En este caso, sabemos que $ (this) .closest ( "mesa") encontrar. ( "Tr> td: first-child de entrada: casilla de verificación") El resultado final es encontrar todos los números casilla 2.
jQuery prop método ()
prop () Establece método o devuelve el valor de la propiedad y el elemento seleccionado.
$ (Selector) .prop (propiedad): Devuelve el valor de la propiedad
$ (Selector) .prop (propiedad, valor): propiedades y valores
$ (Selector) .prop (propiedad, la función (índice, CurrentValue)): el uso de las propiedades y valores de funciones
$ (Selector) .prop ({propiedad: valor, la propiedad: valor, ...}): el establecimiento de una pluralidad de atributos y valores
Por lo tanto, $ (this) .closest ( "mesa") encontrará .. ( "Tr> td: first-child de entrada: casilla de verificación") prop ( "marcada", $ (this) .prop ( "controlada")); este ser capaz de entender las palabras, se quiere lograr es conseguir que el valor del atributo comprobado Nº 1 casilla y fijo para toda la segunda casilla de verificación del valor de la propiedad.
JS lograr elecciones completa cancelado
Cuando Seleccionar todo, si se anula la selección de una fila en la que, durante tanto tiempo requiere cancela automáticamente seleccionar todo casilla de verificación, sólo tiene que añadir el código se ha añadido en el proyecto de ejemplo.
$("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"));
}
}
);epílogo
La siguiente sección dispuesta a seguir para agregar y eliminar funciones en base a la tabla.
