Imagem de reprodução:
Código:
JS Adicione dinamicamente a tabela data_2.html
A cópia do código é a seguinte:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JS adiciona dinamicamente a implementação da tabela Data_2 usando métodos Insertrow e InsertCell </ititle>
<script type = "text/javascript">
var malarr = [
{"Title": "A C# Problem", "Name": "Zhang San", "Date": "2014-03-21"},
{"Title": "A JavaScript Problem", "Name": "Li si", "Date": "2014-03-21"},
{"Title": "A C Pergunta", "Nome": "55", "Date": "2014-03-21"},
{"Title": "A C ++ Pergunta", "Nome": "Zhao Liu", "Date": "2014-03-21"}
];
var tab = nulo;
window.onload = function () {
loadtab ();
// Selecione tudo
document.getElementById ("Sela"). OnClick = function () {
if (document.getElementById ("sela"). verificado == true) {
Seleall (tab, true);
} outro {
Seleall (tab, false);
}
};
// Exclua tudo selecionado
document.getElementById ("delsel"). OnClick = function () {
// Transfira todos os controles de entrada (exceto a última caixa de seleção selecionada)
var chks = document.getElementsByTagName ('input');
for (var i = chks.length-2; i> = 0; i--) {
var chk = chks [i];
if (chk.checked == true) {
// Selecione Processamento de exclusão de linha
var Rownow = chk.parentnode.parentnode;
rowrow.parentnode.removechild (rownew);
} outro {
alerta ("realmente");
}
}
};
};
função loadtab () {
tab = document.getElementById ("TB");
// Adicione o método de travessal de loop do Mailer à tabela em TR
for (var rowindex = 0; rowIndex <malor.length; rowIndex ++) {
// var tr = tab.insertrow (-1); //-1 refere-se à última linha
var tr = tab.insertrow (tab.rows.length - 1); // inserir nas duas últimas linhas, e a última linha deve ser mantida para a linha que é selecionada.
var td1 = tr.InsertCell (-1);
td1.innerhtml = "<Tipo de entrada = 'Caixa de seleção'/>";
var td2 = tr.insertCell (-1);
td2.innerhtml = MaileRr [RowIndex] .title;
var td3 = tr.insertCell (-1);
td3.innerhtml = MaileRr [RowIndex] .Name;
var td4 = tr.InsertCell (-1);
td4.innerhtml = MaileRr [RowIndex] .Date;
}
}
// Para fazer o botão Selecionar All entrar em vigor, você precisa atravessar todas as linhas da tabela
função selell (Mailtab, ISSEL) {
for (var i = 0; i <MailTab.Rows.Length; i ++) {
var tr = Mailtab.Rows [i];
TR.CELLS [0] .CHILDNODES [0] .CHECKED = ISSEL;
}
}
</script>
</head>
<Body>
<tabela id = "tb" style = "colapso de borda: colapso;">
<tr>
<th> sequência </th>
<th> título </th>
<th> Envie Mailer </th>
<th> Enviar tempo </th>
</tr>
<!-Aumento do loop->
<!-Selecione tudo->
<tr>
<td colspan = "4">
<input id = "sela" type = "
<a href = "#" id = "delsel"> delete </a> </td>
</tr>
</tabela>
</body>
</html>