Este artigo descreve o método de JS controlando a geração dinâmica de tabelas arbitrárias de linha e coluna na página da web. Compartilhe para sua referência. A análise específica é a seguinte:
Este é um efeito de código muito simples para gerar tabelas on -line usando JS
Através do código da função JS, você pode gerar automaticamente a tabela necessária digitando diretamente o número de linhas e colunas
Obviamente, você também pode estender o código JS para implementar várias formas de geração de texto
Copie o código da seguinte forma: <html>
<head>
<title> JS gerar dinamicamente tabelas </title>
<style type = "text/css">
Tabela {font-size: 14px;}
</style>
</head>
<Body>
<Script Language = "JavaScript">
função tableclick (nome1, nome2, nome3) {
Trow = name1.value;
Tcol = name2.Value;
Tv = name3.Value;
if ((trow == "") || (tcol == "") || (tv == "")) {
alerta ("Por favor, preencha as condições para fazer o formulário");
}
outro{
r = parseint (trow);
c = parseint (tcol);
Tabela1 (R, C, TV);
}
}
function tableValue (a, ai, linhas, col, str) {
int1 = A.Length;
para (i = 0; i <linhas; ++ i) {
for (j = 0; j <col; ++ j) {
if ((j == 0) && (ai> = int1)) {break;}
if (ai> = int1) {
str = str+"<td scope = 'col'> </td>";
}
outro{
if (j == 0) {
str = str+"<tr> <th scope = 'col'>"+(a [ai ++])+"</th>";
}
outro{
if (j == col-1) {
str = str+"<td scope = 'col'>"+(a [ai ++])+"</td>";
}
outro{
str = str+"<td scope = 'col'>"+(a [ai ++])+"</td>";
}
}
}
}
str = str+"</tr>";
}
retornar str;
}
Função Tabela1 (linha, col, str1) {
var str = "";
a = new Array ();
s = new String (str1);
a = s.split ("#");
int1 = A.Length;
ai = 0;
if (col <= int1) {
str = str+"<width = '300' borda = '4'>";
para (i = 0; i <col; ++ i) {
if (i == 0) {
str = str+"<tr> <th scope = 'col'>"+(a [ai ++])+"</th>";
}
outro{
if (i == (col-1)) {
str = str+"<th scope = 'col'>"+(a [ai ++])+"</th> </tr>";
}
outro{
str = str+"<th scope = 'col'>"+(a [ai ++])+"</th>";
}
}
}
if (int1> col) {
if (linha> 1) {
str = TableValue (a, ai, linha-1, col, str);
}
}
str = str+ "</ tabela>";
aa.innerhtml = str;
}
}
</script>
<formul
<p> <b> Número da linha: </b>
<input name = "name1" type = "text" value = "4">
<b> Número de colunas: </b>
<input name = "name2" type = "text" value = "4">
<input type = "button" name = "submit3" value = "generate tabela" onclick = "tableClick (document.form1.name1, document.form1.name2, document.form1.name3)"> </p>
<p> <b align = "top"> Tabela Valor: </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>
</morm>
<div id = "aa"> </div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.