prefácio
Este capítulo projetar um simples e forma elegante, porque ao escrever fundo, estatísticas e outras informações que os usuários precisam para usar a tabela, "ismo" Eu fui para empurrar a casa de alguém levemente códigos, em comparação com o outro pronto para adotar o seguinte estilo de tabela, mova o mouse descoloração todo o lugar, suporta eleição cheia
O projecto de exemplo como se segue
Que só alcançado tabela de estilo table1.htnl, table2.html adicionar algumas linhas de código com base table1.html sobre o uso de JS conseguir uma função CheckBox Select. Exemplo de projeto Clique aqui para baixar
estilo
conteúdo 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 um novo arquivo html, copie o conteúdo do arquivo acima para ir, você pode conseguir esses estilos, como cada uma dessas propriedades, Internet Bala ir, falar sobre eles, eu iria retardar o progresso.
JS alcançar eleição funcionalidade completa
Na base do table1.html acima, mais algumas linhas de código são os seguintes:
<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 linhas no arquivo de localização são os seguintes
Eu tive o tempo para aprender os js Yilengyileng agora organizar suas notas tão brevemente sobre a plena realização desta eleição algumas linhas de código.
função fábrica jQuery "$"
Em jQuery, independentemente de qual tipo de seletores de usar, você precisa de um sinal de "$" e um par de "()" começou, ou seja, $ (selector). In "()" é geralmente usado parâmetro de cadeia, o parâmetro pode incluir a expressão de qualquer CSS seletores, a seguir, algumas uso comum:
① nome tag uso no argumento
$ ( "Div"): usado para obter todos os documentos no <div>.
$ ( "Thead Table"): usado para obter todos os documentos no thead mesa.
② uso do ID no seletor de parâmetro
$ ( "# Test"): um documento usado para obter um valor de atributo elemento ID do teste
③ usado no seletor de classe parâmetro
$ ( "Btn_open."): Usado para obter todos os elementos com classe CSS chamada btn_open de documentos
Como usado neste exemplo $ ( "table thead th input: checkbox") na tag nome é usado. Note-se que: Quando o $ () sem parâmetros, o parâmetro padrão é o documento, que é o fluxo de documento atual.
jQuery no método
Método Formato: $ (Selector) .em (Eventos, [childselector], [Data], FUNC);
Papel: ligam-se um manipulador ou mais eventos no elemento seleccionado (selector) e as suas sub-elementos (childselector).
parâmetros:
eventos Obrigatório. Um ou mais eventos ou namespace disposição foi aditada elementos selecionados a partir do. Se vários eventos, separados por um espaço necessário, e deve ser um evento válido. Tais como "clique".
childselector: Opcional. Disposições só podem ser adicionados ao manipulador de eventos no elemento filho especificado.
dados: Opcional. Dados adicionais são transmitidos para uma func função predeterminada, com valores event.data
func Obrigatório. Quando o evento função especificada ocorre quando em execução.
Como neste exemplo $ ( "table thead th input: checkbox") em ( "clique", função {conteúdos}); checbox clique evento é a função função de execução.
Encontrar pai e filho elementos método jQuery
JQuery na análise acima do método, após a análise do interior da função de função (), como na frase seguinte:
função(){
$ (This) .closest ( "table") encontrar ( "tr> td: entrada primeira criança: checkbox").. Prop ( "marcada", $ (this) .prop ( "marcada"));
}
$ Look (a este), este refere-se à função $ elemento de planta, isto é, a seta vermelha indica na caixa FIG
função mais próximo olhar seguinte (), essa função não é a de percorrer a partir do elemento atual, até que todo o caminho do elemento raiz do documento (<html>), para encontrar o primeiro elemento DOM elementos ancestrais. Aqui olhamos para a estrutura da árvore DOM do documento,
$ (Este) .closest ( "mesa") para realizar a função é para cima (linha vermelha) Localizar uma tabela elemento de caixa, desde o início, a seta vermelha na tabela abaixo.
Então olha para element.find método (), que elemento ao longo dos elementos das gerações futuras para atravessar para baixo até encontrar o elemento que você deseja encontrar.
Então $ (this) .closest ( "table ") encontrar ( "tr> td: entrada primeira criança: checkbox"). Esta frase é encontrar a tabela em linha com "tr> td: first-child caixa: input" características elementos, isto é caixa mostrada na figura acima. Sobre tr> td: primeiro explicar, eu não digo, irmãos on-line falam muito boa, Clique aqui para ver .
Aqui, sabemos que $ (this) ( "table") .closest encontrar. ( "Tr> td: primeiro-criança input: checkbox") O resultado final é encontrar todos os números 2 checkbox.
jQuery prop () Método
prop () define método ou retorna o valor da propriedade e o elemento selecionado.
$ (Selector) .prop (propriedade): Retorna o valor da propriedade
$ (Selector) .prop (propriedade, valor): propriedades e valores
$ (Selector) .prop (propriedade, função (índice, CurrentValue)): utilizando funções e propriedades valores
$ (Selector) .prop ({propriedade: valor, propriedade: valor, ...}): definir uma pluralidade de atributos e valores
Assim, $ (this) .closest ( "table") encontrar .. ( "Tr> td: entrada primeira criança: checkbox") prop ( "marcada", $ (this) .prop ( "marcada")); esta ser capaz de entender as palavras, ele quer atingir é obter o valor do atributo No. 1 caixa de verificação e conjunto controlar para todos os dia 2 da caixa de seleção valor do imóvel.
JS alcançar a eleição completa cancelada
Quando Select All, se você desmarcar uma linha em que, por tanto tempo requer cancelada automaticamente selecionar todos caixa de seleção, você pode simplesmente adicionar o código foi adicionado no projeto de exemplo.
$("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
A próxima seção preparado para continuar a adicionar e excluir funções na base de mesa.
