วิธีสร้างตารางในจาวาสคริปต์ (สองวิธีในการวาดตารางในจาวาสคริปต์)

1. ฟังก์ชัน insertRow() และ insertCell()

ฟังก์ชัน insertRow() สามารถรับพารามิเตอร์ในรูปแบบต่อไปนี้:

insertRow(ดัชนี): ดัชนีเริ่มต้นจาก 0

ฟังก์ชันนี้จะเพิ่มแถวใหม่ก่อนแถวของดัชนี เช่น insertRow(0) ซึ่งจะเพิ่มแถวใหม่ก่อนแถวแรก ฟังก์ชัน insertRow() เริ่มต้นจะเทียบเท่ากับ insertRow(-1) ซึ่งจะเพิ่มแถวใหม่ที่ส่วนท้ายของตาราง โดยทั่วไปเมื่อเราใช้งาน: objTable.insertRow(objTable.rows.length) จะเป็นการเพิ่มแถวใหม่ที่ส่วนท้ายของตาราง objTable

การใช้งาน insertCell() และ insertRow จะเหมือนกันและจะไม่กล่าวถึงในที่นี้

2. วิธีการ DeleteRow() และ DeleteCell()

ฟังก์ชัน DeleteRow() สามารถรับพารามิเตอร์ได้ โดยมีรูปแบบดังนี้ DeleteRow(index): ดัชนีเริ่มต้นจาก 0

ความหมายเช่นเดียวกับสองวิธีข้างต้นคือการลบแถวและเซลล์ในตำแหน่งที่ระบุ พารามิเตอร์ที่จะส่งผ่าน: ดัชนีคือตำแหน่งของแถวในตาราง สามารถรับได้โดยวิธีการต่อไปนี้แล้วลบออก:

คัดลอกรหัสรหัสดังต่อไปนี้:

var row=document.getElementById("รหัสของแถว");

var index=row.rowIndex;//มีแอตทริบิวต์นี้ อิอิ

objTable.deleteRow(ดัชนี);

ให้ฉันบอกคุณเกี่ยวกับปัญหาที่ฉันพบระหว่างการใช้งาน เมื่อลบแถวในตาราง หากคุณลบแถวใดแถวหนึ่ง จำนวนแถวในตารางจะเปลี่ยนไปทันที ดังนั้น หากคุณต้องการลบแถวทั้งหมดในตาราง รหัสต่อไปนี้ผิด:

คัดลอกรหัสรหัสดังต่อไปนี้:

ฟังก์ชั่น clearRow(){

objTable= document.getElementById("myTable");

สำหรับ( var i=1; i<objTable.rows.length ; i++ )

-

tblObj.deleteRow(i);

-

-

รหัสนี้ต้องการลบเนื้อหาของตารางของตารางต้นฉบับ มีสองปัญหา ก่อนอื่น ไม่สามารถลบแถว(i) ได้ แต่ควรเป็นลบแถว(1) เนื่องจากเมื่อลบแถวของตาราง จำนวนแถวในตารางจะเปลี่ยนไป นี่คือกุญแจสำคัญของปัญหา แถวยาวขึ้นเรื่อยๆ และจำนวนแถวที่ถูกลบจะน้อยกว่าครึ่งหนึ่งของที่คาดไว้เสมอ ลบตารางอย่างถูกต้อง บรรทัดของโค้ดควรมีลักษณะดังนี้:

คัดลอกรหัสรหัสดังต่อไปนี้:

ฟังก์ชั่น clearRow(){

objTable= document.getElementById("myTable");

ความยาว var= objTable.rows.length;

สำหรับ (var i=1; i<length; i++)

-

objTable.deleteRow(i);

-

-

3. ตั้งค่าคุณสมบัติของเซลล์และแถวแบบไดนามิก

A. ใช้เมธอด setAttribute() ด้วยรูปแบบต่อไปนี้: setAttribute(attribute, คุณลักษณะค่า)

หมายเหตุ: วิธีการนี้สามารถใช้ได้กับวัตถุ DOM เกือบทั้งหมด พารามิเตอร์แรกคือชื่อของแอตทริบิวต์ เช่น: border และพารามิเตอร์ตัวที่สองคือค่าที่คุณต้องการตั้งค่าสำหรับเส้นขอบ เช่น: 1

คัดลอกรหัสรหัสดังต่อไปนี้:

var objMyTable = document.getElementById("myTable");

objMyTable.setAttribute("border",1);//กำหนดเส้นขอบของตารางเป็น 1

สำหรับสิ่งอื่นๆ เช่น หากคุณต้องการตั้งค่าความสูงของ TD คุณจะต้องได้รับอ็อบเจ็กต์ TD ก่อน จากนั้นจึงใช้เมธอด setAttribute()

คัดลอกรหัสรหัสดังต่อไปนี้:

var objCell = document.getElementById("myCell");

objCell.setAttribute("height",24);//กำหนดความสูงของเซลล์เป็น 24

ฉันประสบปัญหากับการตั้งค่าสไตล์เมื่อใช้งาน คุณไม่สามารถใช้ setAttribute("class","inputbox2"); คุณควรใช้ setAttribute("className","inputbox2") แทน ฮ่าๆ ฉันเดาว่าคนอื่นๆ ก็ประสบปัญหาเดียวกัน , คุณลักษณะบางอย่างไม่สอดคล้องกับสิ่งที่เรามีใน DW 555 เรามาสำรวจด้วยตัวเองกันดีกว่า

B. การมอบหมายโดยตรง

คัดลอกรหัสรหัสดังต่อไปนี้:

var objMyTable = document.getElementById("myTable");

objMyTable.border=1;//ตั้งค่าเส้นขอบเป็น 1 สำหรับตาราง

วิธีนี้ก็ใช้ได้กับทุกคนนะ 555

4. สร้างตาราง

เมื่อคุณเข้าใจการเพิ่มและการลบแถว <tr> และเซลล์ <td> แล้ว คุณจะสามารถสร้างตารางได้

ขั้นตอนที่ 1: คุณต้องมีตารางที่คุณต้องการเปลี่ยนแปลงแบบไดนามิก สิ่งที่ฉันกำลังพูดถึงคือตารางที่มีอยู่แล้วบนเพจ เราจำเป็นต้องตั้งค่า id: myTable

คัดลอกรหัสรหัสดังต่อไปนี้:

var objMyTable = document.getElementById("myTable");

ขั้นตอนที่ 2: สร้างวัตถุแถวและคอลัมน์

คัดลอกรหัสรหัสดังต่อไปนี้:

ดัชนี var = objMyTable.rows.length-1;

var nextRow = objMyTable.insertRow(index);//แถวที่จะเพิ่มจะถูกเพิ่มจากแถวที่สองถึงแถวสุดท้าย

//หมายเลขกล่องเซลล์

var newCellCartonNo = nextRow.insertCell();

var boxNoName = "IptCartonNo";

newCellCartonNo.innerHTML = "<input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";

newCellCartonNo.setAttribute("className,"tablerdd");

เพียงเท่านี้คุณก็สามารถสร้างแถวและคอลัมน์ได้ ฉันได้โพสต์รหัสเฉพาะด้านล่าง เป็นเพียงตัวอย่างง่ายๆ แต่วิธีการน่าจะเป็นไปตามข้างต้น ฮ่าๆ เรามาสำรวจกันแบบช้าๆ กันดีกว่า~

คัดลอกรหัสรหัสดังต่อไปนี้:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<หัว>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>บลูเรย์-บลูไชน์</title>

<ภาษาสคริปต์ = "จาวาสคริปต์">

จำนวนนับ=เท็จ,NO=1;

ฟังก์ชัน addRow(){

นับ=!นับ;

//เพิ่มแถว

var newTr = testTbl.insertRow(testTbl.rows.length);

//เพิ่มสองคอลัมน์

var newTd0 = newTr.insertCell();

var newTd1 = newTr.insertCell();

var newTd2 = newTr.insertCell();

//กำหนดเนื้อหาและคุณสมบัติของคอลัมน์

ถ้า(นับ){newTr.style.พื้นหลัง="#FFE1FF";}

อย่างอื่น {newTr.style.พื้นหลัง="#FFEFD5";}

newTd0.innerHTML = '<input type=checkbox id="box4">';

ไม่++

newTd1.innerText="บรรทัด "+ ไม่+";

-

</สคริปต์>

</หัว>

<ร่างกาย>

<เส้นขอบตาราง=0 cellspacing="1" id="testTbl" style="font-size:14px;" >

<tr bgcolor="#FFEFD5">

<td width=6%><input type=checkbox id="box1"></td>

<td>บรรทัดที่ 1</td>

<td> </td>

</tr>

</ตาราง>

<ฉลาก>

<input type="button" value="Insert row" onclick="addRow()" />

</ฉลาก>

</ร่างกาย>

</html>

5. ผนวก Child() วิธีการ

คัดลอกรหัสรหัสดังต่อไปนี้:

<html>

<หัว>

<title>หน้าทดสอบของฉัน</title>

<script type="text/javascript">

-

var textNumber = 1;

ฟังก์ชั่น addTextBox (แบบฟอร์ม, afterElement) {

// เพิ่มหมายเลขกล่องข้อความ

ข้อความหมายเลข++;

//สร้างป้ายกำกับ

var label = document.createElement("ฉลาก");

//สร้างกล่องข้อความ

var textField = document.createElement("อินพุต");

textField.setAttribute("ประเภท", "ข้อความ");

textField.setAttribute("ชื่อ", "txt" + textNumber);

textField.setAttribute("id","txt"+textNumber);

// เพิ่มข้อความของป้ายกำกับ

label.appendChild(document.createTextNode("กล่องข้อความ #"+textNumber+": "));

// ใส่กล่องข้อความเข้าไปข้างใน

label.appendChild(ฟิลด์ข้อความ);

// เพิ่มทั้งหมดลงในแบบฟอร์ม

form.insertBefore (ฉลาก, afterElement);

กลับเท็จ;

-

ฟังก์ชั่น RemoveTextBox (แบบฟอร์ม) {

if (textNumber > 1) { // หากมีกล่องข้อความมากกว่าหนึ่งกล่อง

// ลบอันสุดท้ายที่เพิ่มเข้ามา

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

ข้อความหมายเลข--;

-

-

-

</สคริปต์>

<style type="text/css">

-

ฉลาก {

จอแสดงผล:บล็อก;

ระยะขอบ:.25em 0em;

-

-

</สไตล์>

</หัว>

<ร่างกาย>

<form id="myForm" method="get" action="./" />

<label>กล่องข้อความ #1: <input type="text" name="txt1" id="txt1" /></label>

<p>

<input type="button" value="เพิ่มกล่องข้อความ" onclick="addTextBox(this.form,this.parentNode)" />

<input type="button" value="ลบกล่องข้อความ" onclick="removeTextBox(this.form)" />

</p>

<p><input type="ส่ง" value="ส่ง" /></p>

</แบบฟอร์ม>

</ร่างกาย>

</html>

<html>

<หัว>

<title>หน้าทดสอบของฉัน</title>

<script type="text/javascript">

-

var textNumber = 1;

ฟังก์ชั่น addTextBox (แบบฟอร์ม, afterElement) {

// เพิ่มหมายเลขกล่องข้อความ

ข้อความหมายเลข++;

//สร้างป้ายกำกับ

var label = document.createElement("ฉลาก");

//สร้างกล่องข้อความ

var textField = document.createElement("อินพุต");

textField.setAttribute("ประเภท", "ข้อความ");

textField.setAttribute("ชื่อ", "txt" + textNumber);

textField.setAttribute("id","txt"+textNumber);

// เพิ่มข้อความของป้ายกำกับ

label.appendChild(document.createTextNode("กล่องข้อความ #"+textNumber+": "));

// ใส่กล่องข้อความเข้าไปข้างใน

label.appendChild(ฟิลด์ข้อความ);

// เพิ่มทั้งหมดลงในแบบฟอร์ม

form.insertBefore (ฉลาก, afterElement);

กลับเท็จ;

-

ฟังก์ชั่น RemoveTextBox (แบบฟอร์ม) {

if (textNumber > 1) { // หากมีกล่องข้อความมากกว่าหนึ่งกล่อง

// ลบอันสุดท้ายที่เพิ่มเข้ามา

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

ข้อความหมายเลข--;

-

-

-

</สคริปต์>

<style type="text/css">

-

ฉลาก {

จอแสดงผล:บล็อก;

ระยะขอบ:.25em 0em;

-

-

</สไตล์>

</หัว>

<ร่างกาย>

<form id="myForm" method="get" action="./" />

<label>กล่องข้อความ #1: <input type="text" name="txt1" id="txt1" /></label>

<p>

<input type="button" value="เพิ่มกล่องข้อความ" onclick="addTextBox(this.form,this.parentNode)" />

<input type="button" value="ลบกล่องข้อความ" onclick="removeTextBox(this.form)" />

</p>

<p><input type="ส่ง" value="ส่ง" /></p>

</แบบฟอร์ม>

</ร่างกาย>

</html>