Imagen de reproducción:
Código:
JS agregue dinámicamente la tabla data_2.html
La copia del código es la siguiente:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JS agrega dinámicamente la implementación de Data_2 utilizando los métodos Insertrow e InsertCell </title>
<script type = "text/javaScript">
var mailarr = [
{"Título": "A C# Problema", "Nombre": "Zhang San", "Fecha": "2014-03-21"},
{"Título": "Un problema de JavaScript", "Nombre": "Li si", "fecha": "2014-03-21"},
{"Título": "A C Pregunta", "Nombre": "55", "Fecha": "2014-03-21"},
{"Título": "A C ++ pregunta", "Nombre": "Zhao Liu", "Fecha": "2014-03-21"}
];
var tab = nulo;
window.onload = function () {
loadTab ();
// Seleccione todo
document.getElementById ("Sela"). onClick = function () {
if (document.getElementById ("Sela"). Checked == True) {
seleall (pestaña, verdadero);
} demás {
seleall (pestaña, falso);
}
};
// Eliminar todos los seleccionados
document.getElementById ("delsel"). onClick = function () {
// Transferir todos los controles de entrada (excepto la última casilla de verificación que se selecciona)
var chks = document.getElementsBytagName ('input');
para (var i = chks.length-2; i> = 0; i--) {
var chk = chks [i];
if (chk.ecked == true) {
// Seleccionar procesamiento de eliminación de filas
var rownow = chk.parentnode.parentnode;
ROWNOW.PARENTNODE.REMOVECHILD (ROWNOW);
} demás {
alerta ("realmente");
}
}
};
};
función loadTab () {
tab = document.getElementById ("TB");
// Agregar el método de transversal de bucle Mailarr a la tabla en TR
for (var rowIndex = 0; rowIndex <mailarr.length; rowIndex ++) {
// var tr = tab.insertrow (-1); //-1 se refiere a la última línea
var tr = tab.insertrow (tab.rows.length - 1); // Inserte en las dos últimas líneas, y la última línea debe mantenerse para la línea que se selecciona todo.
var td1 = tr.insertcell (-1);
td1.innerhtml = "<input type = 'checkbox'/>";
var td2 = tr.insertcell (-1);
td2.innerhtml = mailarr [rowIndex] .title;
var td3 = tr.insertcell (-1);
td3.innerhtml = mailarr [rowIndex] .name;
var td4 = tr.insertcell (-1);
td4.innerhtml = mailarr [rowIndex] .Date;
}
}
// Para hacer que el botón seleccionar todo tenga efecto, debe atravesar todas las filas de la mesa
función seleall (mailtab, issel) {
para (var i = 0; i <mailtab.rows.length; i ++) {
var tr = mailtab.rows [i];
tr.cells [0] .ChildNodes [0] .ecked = issel;
}
}
</script>
</ablo>
<Body>
<table id = "tb" style = "border-colapse: colapso;">
<tr>
<th> secuencia </th>
<th> Título </th>
<th> Enviar Mailer </th>
<th> Enviar tiempo </th>
</tr>
<!-aumento de bucle->
<!-Seleccione todo->
<tr>
<td colspan = "4">
<input id = "sela" type = "checkbox" /> <etiqueta for = "sela"> Seleccione todo < /etiqueta>
<a href = "#" id = "delsel"> delete </a> </td>
</tr>
</table>
</body>
</html>