Este artículo describe el método de control de la generación dinámica de tablas de fila y columna arbitrarias en la página web. Compártelo para su referencia. El análisis específico es el siguiente:
Este es un efecto de código muy simple para generar tablas en línea usando JS
A través del código de función JS, puede generar automáticamente la tabla que necesita ingresando directamente el número de filas y columnas
Por supuesto, también puede extender el código JS para implementar diversas formas de texto de generación
Copie el código de la siguiente manera: <html>
<Evista>
<title> JS Generar tablas dinámicamente </title>
<style type = "text/css">
tabla {font-size: 14px;}
</style>
</ablo>
<Body>
<script language = "javaScript">
function tableClick (name1, name2, name3) {
Trow = name1.Value;
Tcol = name2.value;
TV = name3.value;
if ((Trow == "") || (tcol == "") || (TV == "")) {
alerta ("Complete las condiciones para hacer el formulario");
}
demás{
r = parseint (Trow);
c = parseint (tcol);
Tabla1 (R, C, TV);
}
}
Table de funciones (a, ai, filas, col, str) {
int1 = a.length;
para (i = 0; i <shows; ++ i) {
para (j = 0; j <col; ++ j) {
if ((j == 0) && (ai> = int1)) {break;}
if (ai> = int1) {
str = str+"<td scope = 'col'> </td>";
}
demás{
if (j == 0) {
str = str+"<tr> <th scope = 'col'>"+(a [ai ++])+"</th>";
}
demás{
if (j == col-1) {
str = str+"<td scope = 'col'>"+(a [ai ++])+"</td>";
}
demás{
str = str+"<td scope = 'col'>"+(a [ai ++])+"</td>";
}
}
}
}
str = str+"</tr>";
}
regresar str;
}
Tabla de funciones1 (fila, col, str1) {
var str = "";
a = nueva matriz ();
s = nueva cadena (str1);
a = s.split ("#");
int1 = a.length;
ai = 0;
if (col <= int1) {
str = str+"<table width = '300' border = '4'>";
para (i = 0; i <col; ++ i) {
if (i == 0) {
str = str+"<tr> <th scope = 'col'>"+(a [ai ++])+"</th>";
}
demás{
if (i == (col-1)) {
str = str+"<th scope = 'col'>"+(a [ai ++])+"</th> </tr>";
}
demás{
str = str+"<th scope = 'col'>"+(a [ai ++])+"</th>";
}
}
}
if (int1> col) {
if (fila> 1) {
str = tableValue (a, ai, fila-1, col, str);
}
}
str = str+ "</table>";
aa.innerhtml = str;
}
}
</script>
<form de nombre = "form1" método = "post" action = "">
<p> <b> Número de línea: </b>
<input name = "name1" type = "text" value = "4">
<b> Número de columnas: </b>
<input name = "name2" type = "text" value = "4">
<input type = "button" name = "Subt3" value = "Generate Table" onClick = "TableClick (document.form1.name1, document.form1.name2, document.form1.name3)"> </p>
<p> <b align = "top"> valor de tabla: </b> </p>
<p>
<input name = "name3" wrap = "virtual" value = "col1#col2#col3#col4#row1#a1#a2#a3#row2#b1#b2#b3#row3#c1#c2#c3">
</p>
</form>
<div id = "aa"> </div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.