insertRow() วิธีการ
ความหมายและการใช้งาน
insertRow() วิธีการใช้ในการแทรกแถวใหม่ในตำแหน่งที่ระบุในตาราง
ไวยากรณ์
tableObject.insertRow (ดัชนี)
ส่งกลับค่า
ส่งกลับ TableRow แทนแถวที่แทรกใหม่
แสดงให้เห็น
วิธีการนี้จะสร้างวัตถุ TableRow ใหม่ซึ่งเป็นตัวแทนของแท็ก <tr> ใหม่และแทรกลงในตารางที่ตำแหน่งที่ระบุ
แถวใหม่จะถูกแทรกก่อนแถวที่ดัชนี หากดัชนีเท่ากับจำนวนแถวในตาราง แถวใหม่จะถูกเพิ่มต่อท้ายตาราง
หากตารางว่างเปล่า แถวใหม่จะถูกแทรกลงในส่วน <tbody> ใหม่ ซึ่งตัวมันเองจะถูกแทรกลงในตาราง
โยน
ถ้าดัชนีพารามิเตอร์น้อยกว่า 0 หรือมากกว่าหรือเท่ากับจำนวนแถวในตาราง วิธีการนี้จะส่งออกข้อยกเว้น DOMException พร้อมรหัส INDEX_SIZE_ERR
ตัวอย่าง
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<script type="text/javascript">
ฟังก์ชัน insRow()
-
document.getElementById('myTable').insertRow(0)
-
</สคริปต์>
</หัว>
<ร่างกาย>
<table id="myTable">
<tr>
<td>แถว1 เซลล์1</td>
<td>แถว1 เซลล์2</td>
</tr>
<tr>
<td>เซลล์ Row21</td>
<td>เซลล์ Row22</td>
</tr>
</ตาราง>
<br />
<ประเภทอินพุต = "ปุ่ม" onclick = "insRow ()"
ค่า="แทรกแถวใหม่">
</ร่างกาย>
</html>
ลบเซลล์()
ความหมายและการใช้งาน
DeleteCell() วิธีการใช้ในการลบเซลล์ (<td> องค์ประกอบ) ในแถวของตาราง
ไวยากรณ์
tablerowObject.deleteCell (ดัชนี)
แสดงให้เห็น
ดัชนีพารามิเตอร์คือตำแหน่งในแถวขององค์ประกอบตารางที่จะลบ
วิธีนี้จะลบองค์ประกอบตารางในตำแหน่งที่ระบุในแถวของตาราง
โยน
ถ้าดัชนีพารามิเตอร์น้อยกว่า 0 หรือมากกว่าหรือเท่ากับจำนวนขององค์ประกอบตารางในแถว วิธีการนี้จะส่งออกข้อยกเว้น DOMException พร้อมรหัส INDEX_SIZE_ERR
ตัวอย่าง
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<script type="text/javascript">
ฟังก์ชั่นเดลโรว์()
-
document.getElementById('myTable').deleteRow(0)
-
</สคริปต์>
</หัว>
<ร่างกาย>
<table id="myTable">
<tr>
<td>แถว1 เซลล์1</td>
<td>แถว1 เซลล์2</td>
</tr>
<tr>
<td>เซลล์ Row21</td>
<td>เซลล์ Row22</td>
</tr>
</ตาราง>
<br />
<ประเภทอินพุต = "ปุ่ม" onclick = "delRow ()"
value="ลบแถวแรก">
</ร่างกาย>
</html>
แทรกเซลล์()
ความหมายและการใช้งาน
insertCell() วิธีการใช้ในการแทรก <td> องค์ประกอบที่ว่างเปล่าในตำแหน่งที่ระบุในแถวของตาราง HTML
ไวยากรณ์
tablerowObject.insertCell (ดัชนี)
ส่งกลับค่า
วัตถุ TableCell เป็นตัวแทนขององค์ประกอบ <td> ที่สร้างขึ้นใหม่และแทรก
แสดงให้เห็น
วิธีการนี้จะสร้างองค์ประกอบ <td> ใหม่และแทรกลงในแถวที่ตำแหน่งที่ระบุ เซลล์ใหม่จะถูกแทรกก่อนที่เซลล์จะอยู่ที่ตำแหน่งที่ระบุโดยดัชนี ถ้าดัชนีเท่ากับจำนวนเซลล์ในแถว เซลล์ใหม่จะถูกต่อท้ายแถว
โปรดทราบว่าวิธีนี้สามารถแทรกได้เฉพาะองค์ประกอบตารางข้อมูล <td> เท่านั้น หากคุณต้องการเพิ่มองค์ประกอบส่วนหัวในแถว คุณต้องสร้างและแทรกองค์ประกอบ <th> โดยใช้เมธอด Document.createElement() และเมธอด Node.insertBefore() (หรือวิธีการที่เกี่ยวข้อง)
โยน
ถ้าดัชนีพารามิเตอร์น้อยกว่า 0 หรือมากกว่าหรือเท่ากับจำนวนขององค์ประกอบตารางในแถว วิธีการนี้จะส่งออกข้อยกเว้น DOMException พร้อมรหัส INDEX_SIZE_ERR
ตัวอย่าง
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<script type="text/javascript">
ฟังก์ชั่น insCell()
-
var x=document.getElementById('tr2').insertCell(0)
x.innerHTML="จอห์น"
-
</สคริปต์>
</หัว>
<ร่างกาย>
<ตาราง>
<tr id="tr1">
<th>ชื่อ</th>
<th>นามสกุล</th>
</tr>
<tr id="tr2">
<td>ปีเตอร์</td>
<td>กริฟฟิน</td>
</tr>
</ตาราง>
<br />
<input type="button" onclick="insCell()" value="Insert cell">
</ร่างกาย>
</html>
ลบเซลล์()
ความหมายและการใช้งาน
DeleteCell() วิธีการใช้ในการลบเซลล์ (<td> องค์ประกอบ) ในแถวของตาราง
ไวยากรณ์
tablerowObject.deleteCell (ดัชนี)
แสดงให้เห็น
ดัชนีพารามิเตอร์คือตำแหน่งในแถวขององค์ประกอบตารางที่จะลบ
วิธีนี้จะลบองค์ประกอบตารางในตำแหน่งที่ระบุในแถวของตาราง
โยน
ถ้าดัชนีพารามิเตอร์น้อยกว่า 0 หรือมากกว่าหรือเท่ากับจำนวนขององค์ประกอบตารางในแถว วิธีการนี้จะส่งออกข้อยกเว้น DOMException พร้อมรหัส INDEX_SIZE_ERR
ตัวอย่าง
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<script type="text/javascript">
ฟังก์ชั่นเดลเซลล์()
-
document.getElementById('tr2').deleteCell(0)
-
</สคริปต์>
</หัว>
<ร่างกาย>
<ตาราง>
<tr id="tr1">
<th>ชื่อ</th>
<th>นามสกุล</th>
</tr>
<tr id="tr2">
<td>ปีเตอร์</td>
<td>กริฟฟิน</td>
</tr>
</ตาราง>
<br />
<input type="button" onclick="delCell()" value="ลบเซลล์">
</ร่างกาย>
</html>
การใช้งานในโครงการ:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
วาร์ตอินเด็กซ์ = 0;
// เพิ่มแถวแบบไดนามิก
unction ผนวกแปลง () {
//var sel = document.getElementById("selectConvertName");
var sel = document.getElementsByName("selectConvertName")[0];
var className;
ถ้า(null!=sel){
สำหรับ (var i = 0; i < sel.options.length; i++){
ถ้า(sel.options[i].selected)
className=sel.options[i].value;
-
-
//ข้อมูลมาจากรูปแบบ ajax, json
Convert.getConvertBean2Json(ชื่อคลาส,
ฟังก์ชั่น (ผลลัพธ์) {
var obj = eval('('+ผลลัพธ์+')');
ตาราง var = document.getElementById("convertTable");
var newRow = table.insertRow(trIndex+1);
newRow.insertCell(0).innerHTML = obj.name+"<input type='button' value='Delete' onclick='deleteRow(this)'>";
newRow.insertCell(1).innerHTML = "<input type='text' name='convertList["+trIndex+"].id'><input type='hidden' name='convertList["+trIndex+"].name ' value='"+obj.name+"'>";
ถ้า(null!=obj.paramList){
var paramStr = "";
สำหรับ (var i = 0; i < obj.paramList.length; i++){
paramStr = paramStr+
"ชื่อพารามิเตอร์:"+obj.paramList[i].name+
";ประเภทพารามิเตอร์:"+obj.paramList[i].type+
"; ค่าพารามิเตอร์: <input name='convertList["+trIndex+"].paramList["+i+"].value' type='text'><br>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].name' value='"+obj.paramList[i].name+"'>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].type' value='"+obj.paramList[i].type+"'>";
-
newRow.insertCell(2).innerHTML = paramStr;
-
trIndex++;
-
-
//ลบแถว
ใน DeleteRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('convertTable').deleteRow(i);
trIndex--;
-
</สคริปต์>