この記事では、Webページ上の任意の行と列のテーブルの動的生成を制御するJSの方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
これは、JSを使用してオンラインでテーブルを生成するための非常に単純なコード効果です
JS機能コードを介して、行と列の数を直接入力することで、必要なテーブルを自動的に生成できます
もちろん、JSコードを拡張して、さまざまな形式の生成テキストを実装することもできます
次のようにコードをコピーします：<html>
<head>
<title> jsは動的にテーブルを生成します</title>
<style type = "text/css">
表{font-size：14px;}
</style>
</head>
<body>
<スクリプト言語= "javascript">
function tableclick（name1、name2、name3）{
tro = name1.value;
tcol = name2.value;
TV = name3.Value;
if（（trow == ""）||（tcol == ""）||（tv == ""））{
アラート（「フォームを作成するための条件に記入してください」）;
}
それ以外{
r = parseint（trow）;
c = parseint（tcol）;
表1（R、C、TV）;
}
}
function tableValue（a、ai、rows、col、str）{
int1 = a.length;
for（i = 0; i <rows; ++ i）{
for（j = 0; j <col; ++ j）{
if（（j == 0）&&（ai> = int1））{break;}
if（ai> = int1）{
str = str+"<td scope = 'col'> </td>";
}
それ以外{
if（j == 0）{
str = str+"<tr> <th scope = 'col'>"+（a [ai ++]）+"</th>";
}
それ以外{
if（j == col-1）{
str = str+"<td scope = 'col'>"+（a [ai ++]）+"</td>";
}
それ以外{
str = str+"<td scope = 'col'>"+（a [ai ++]）+"</td>";
}
}
}
}
str = str+"</tr>";
}
strを返します。
}
関数table1（row、col、str1）{
var str = "";
a = new Array（）;
s = new String（str1）;
a = s.split（ "＃"）;
int1 = a.length;
ai = 0;
if（col <= int1）{
str = str+"<table width = '300' border = '4'>";
for（i = 0; i <col; ++ i）{
if（i == 0）{
str = str+"<tr> <th scope = 'col'>"+（a [ai ++]）+"</th>";
}
それ以外{
if（i ==（col-1））{
str = str+"<th scope = 'col'>"+（a [ai ++]）+"</th> </tr>";
}
それ以外{
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;
}
}
</script>
<form name = "form1" method = "post" action = "">
<p> <b>行番号：</b>
<入力名= "name1" type = "text" value = "4">
<b>列の数：</b>
<入力名= "name2" type = "text" value = "4">
<入力型= "ボタン" name = "submit3" value = "生成テーブル" onclick = "tableclick（document.form1.name1、document.form1.name2、document.form1.name3）"> </p>
<p> <b align = "top">テーブル値：</b> </p>
<p>
<入力名= "name3" wrap = "仮想"値= "col1＃col2＃col3＃col4＃row1＃a1＃a2＃a3＃row2＃b1＃b2＃b3＃row3＃c1＃c2＃c3">
</p>
</form>
<div id = "aa"> </div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。