บทความนี้อธิบายวิธีการของ JS ที่ควบคุมการสร้างแบบไดนามิกของตารางแถวและคอลัมน์โดยพลการบนหน้าเว็บ แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
นี่เป็นเอฟเฟกต์รหัสง่ายมากสำหรับการสร้างตารางออนไลน์โดยใช้ JS
ผ่านรหัสฟังก์ชัน JS คุณสามารถสร้างตารางที่คุณต้องการโดยอัตโนมัติโดยป้อนจำนวนแถวและคอลัมน์โดยตรง
แน่นอนคุณยังสามารถขยายรหัส JS เพื่อใช้ข้อความในรูปแบบต่าง ๆ
คัดลอกรหัสดังนี้: <html>
<head>
<title> js สร้างตารางไดนามิก </title> แบบไดนามิก
<style type = "text/css">
ตาราง {ตัวอักษรขนาด: 14px;}
</style>
</head>
<body>
<ภาษาสคริปต์ = "JavaScript">
ฟังก์ชั่น tableclick (ชื่อ 1, name2, name3) {
Trow = name1.Value;
tcol = name2.value;
TV = name3.Value;
if ((trow == "") || (tcol == "") || (tv == "")) {
การแจ้งเตือน ("กรุณากรอกเงื่อนไขในการสร้างแบบฟอร์ม");
-
อื่น{
r = parseint (Trow);
c = parseInt (TCOL);
ตารางที่ 1 (R, C, TV);
-
-
ฟังก์ชั่น tablevalue (a, ai, แถว, col, str) {
int1 = a.length;
สำหรับ (i = 0; i <rows; ++ i) {
สำหรับ (j = 0; j <col; ++ j) {
if ((j == 0) && (ai> = int1)) {break;}
if (ai> = int1) {
str = str+"<td scope = 'col'> </td>";
-
อื่น{
ถ้า (j == 0) {
str = str+"<tr> <th scope = 'col'>"+(a [ai ++])+"</th>";
-
อื่น{
ถ้า (j == col-1) {
str = str+"<td scope = 'col'>"+(a [ai ++])+"</td>";
-
อื่น{
str = str+"<td scope = 'col'>"+(a [ai ++])+"</td>";
-
-
-
-
str = str+"</tr>";
-
return str;
-
ฟังก์ชั่นตารางที่ 1 (แถว, col, str1) {
var str = "";
a = ใหม่อาร์เรย์ ();
s = สตริงใหม่ (str1);
a = s.split ("#");
int1 = a.length;
ai = 0;
if (col <= int1) {
str = str+"<width table = '300' border = '4'>";
สำหรับ (i = 0; i <col; ++ i) {
ถ้า (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>";
-
-
-
ถ้า (int1> col) {
ถ้า (แถว> 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>
<input name = "name1" type = "text" value = "4">
<b> จำนวนคอลัมน์: </b>
<input name = "name2" type = "text" value = "4">
<อินพุต type = "ปุ่ม" name = "submit3" value = "สร้างตาราง" onclick = "tableclick (document.form1.name1, document.form1.name2, document.form1.name3)"> </p>
<p> <b align = "top"> ค่าตาราง: </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>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน