Cet article décrit la méthode de JS contrôlant la génération dynamique de tables de lignes et de colonnes arbitraires sur la page Web. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Il s'agit d'un effet de code très simple pour générer des tables en ligne à l'aide de JS
Grâce au code de fonction JS, vous pouvez générer automatiquement le tableau dont vous avez besoin en entrant directement le nombre de lignes et de colonnes
Bien sûr, vous pouvez également étendre le code JS pour implémenter diverses formes de génération de texte
Copiez le code comme suit: <html>
<adal>
<Title> JS Générez dynamiquement des tables </TITME>
<style type = "text / css">
Tableau {taille de police: 14px;}
</ style>
</ head>
<body>
<script linguisse = "javascript">
fonction tableclick (name1, name2, name3) {
Trow = name1.value;
Tcol = name2.value;
Tv = name3.Value;
if ((trow == "") || (tcol == "") || (tv == "")) {
alert ("Veuillez remplir les conditions de fabrication du formulaire");
}
autre{
r = parseInt (trow);
c = parseInt (tcol);
Tableau 1 (R, C, TV);
}
}
fonction tablevalue (a, ai, lignes, col, str) {
int1 = a.Length;
pour (i = 0; i <lignes; ++ i) {
pour (j = 0; j <col; ++ j) {
if ((j == 0) && (ai> = int1)) {break;}
if (ai> = int1) {
str = str + "<td scope = 'col'> </td>";
}
autre{
if (j == 0) {
str = str + "<tr> <th Scope = 'Col'>" + (a [Ai ++]) + "</th>";
}
autre{
if (j == col-1) {
str = str + "<td scope = 'col'>" + (a [ai ++]) + "</td>";
}
autre{
str = str + "<td scope = 'col'>" + (a [ai ++]) + "</td>";
}
}
}
}
str = str + "</tr>";
}
retour STR;
}
Tableau de fonction 1 (Row, Col, str1) {
var str = "";
a = nouveau array ();
s = nouvelle chaîne (str1);
a = s.split ("#");
int1 = a.Length;
ai = 0;
if (col <= int1) {
str = str + "<table width = '300' border = '4'>";
pour (i = 0; i <col; ++ i) {
if (i == 0) {
str = str + "<tr> <th Scope = 'Col'>" + (a [Ai ++]) + "</th>";
}
autre{
if (i == (col-1)) {
str = str + "<th scope = 'col'>" + (a [ai ++]) + "</th> </tr>";
}
autre{
str = str + "<th scope = 'col'>" + (a [ai ++]) + "</th>";
}
}
}
if (int1> col) {
if (row> 1) {
str = tableValue (a, ai, row-1, col, str);
}
}
str = str + "</ table>";
aa.innerhtml = str;
}
}
</cript>
<form name = "form1" méthode = "post" action = "">
<p> <b> Numéro de ligne: </b>
<input name = "name1" type = "text" value = "4">
<b> Nombre de colonnes: </b>
<input name = "name2" type = "text" value = "4">
<input type = "Button" name = "soume3" value = "générer la table" onclick = "tableClick (document.form1.name1, document.form1.name2, document.form1.name3)"> </p>
<p> <b align = "top"> Valeur du tableau: </b> </p>
<p>
<entrée 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>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.