Artikel ini menjelaskan metode JS yang mengendalikan generasi dinamis tabel baris dan kolom sewenang -wenang di halaman web. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
Ini adalah efek kode yang sangat sederhana untuk menghasilkan tabel online menggunakan JS
Melalui kode fungsi JS, Anda dapat secara otomatis menghasilkan tabel yang Anda butuhkan dengan langsung memasukkan jumlah baris dan kolom
Tentu saja, Anda juga dapat memperluas kode JS untuk mengimplementasikan berbagai bentuk teks menghasilkan
Salin kode sebagai berikut: <Html>
<head>
<title> JS secara dinamis menghasilkan tabel </iteme>
<type style = "text/css">
Tabel {font-size: 14px;}
</tyle>
</head>
<body>
<bahasa skrip = "javascript">
fungsi tableClick (name1, name2, name3) {
Trow = name1.value;
Tcol = name2.value;
Tv = name3.value;
if ((trow == "") || (tcol == "") || (tv == "")) {
waspada ("Harap isi persyaratan untuk membuat formulir");
}
kalau tidak{
r = parseInt (trow);
c = parseInt (TCOL);
Table1 (R, C, TV);
}
}
function tableValue (a, ai, baris, col, str) {
int1 = a.length;
untuk (i = 0; i <rows; ++ i) {
untuk (j = 0; j <col; ++ j) {
if ((j == 0) && (ai> = int1)) {break;}
if (ai> = int1) {
str = str+"<td scope = 'col'> </td>";
}
kalau tidak{
if (j == 0) {
str = str+"<tr> <tH scope = 'col'>"+(a [ai ++])+"</th>";
}
kalau tidak{
if (j == col-1) {
str = str+"<td scope = 'col'>"+(a [ai ++])+"</td>";
}
kalau tidak{
str = str+"<td scope = 'col'>"+(a [ai ++])+"</td>";
}
}
}
}
str = str+"</tr>";
}
mengembalikan str;
}
fungsi table1 (baris, col, str1) {
var str = "";
a = array baru ();
s = string baru (str1);
a = s.split ("#");
int1 = a.length;
ai = 0;
if (col <= int1) {
str = str+"<tabel lebar = '300' border = '4'>";
untuk (i = 0; i <col; ++ i) {
if (i == 0) {
str = str+"<tr> <tH scope = 'col'>"+(a [ai ++])+"</th>";
}
kalau tidak{
if (i == (col-1)) {
str = str+"<tH scope = 'col'>"+(a [ai ++])+"</th> </tr>";
}
kalau tidak{
str = str+"<tH scope = 'col'>"+(a [ai ++])+"</th>";
}
}
}
if (int1> col) {
if (baris> 1) {
str = tableValue (a, ai, row-1, col, str);
}
}
str = str+ "</able>";
aa.innerhtml = str;
}
}
</script>
<Form name = "Form1" Metode = "POST" ACTION = "">
<p> <b> Nomor baris: </b>
<input name = "name1" type = "text" value = "4">
<b> Jumlah kolom: </b>
<input name = "name2" type = "text" value = "4">
<input type = "Tombol" name = "Submit3" value = "menghasilkan tabel" onclick = "tableClick (document.form1.name1, document.form1.name2, document.form1.name3)"> </p>
<p> <B align = "Top"> Nilai Tabel: </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>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.