มีหลายแถวในตาราง: var trcnt = table.rows.length; (ตารางคือ ID)
แต่ละแถวมีกี่คอลัมน์: สำหรับ (var i = 0; i <trcnt; i ++)
Table.Rows [i] .cells.length;
ตารางการทำงานของ JavaScript:
inserTrow (), deleterow (), insertcell (), deleteCell () วิธีการ
table.insertrow () อยู่ภายใต้ IE แต่ใน Firefox จะต้องเปลี่ยนเป็น table.insertrow (-1)
ในทำนองเดียวกันควรเปลี่ยน insertcell () ที่สอดคล้องกันเป็น insertcell (-1)
วิธีการแทรก ()
คำจำกัดความและการใช้งาน
วิธี InserTrow () ใช้เพื่อแทรกแถวใหม่ที่ตำแหน่งที่ระบุในตาราง
ไวยากรณ์
TableObject.insertrow (ดัชนี)
ค่าส่งคืน
ส่งคืน tablerow ซึ่งแสดงถึงแถวที่แทรกใหม่
อธิบาย
วิธีนี้สร้างวัตถุ TableRow ใหม่หมายถึงแท็ก <tr> ใหม่และแทรกลงในตำแหน่งที่ระบุในตาราง
บรรทัดใหม่จะถูกแทรกก่อนบรรทัดดัชนี หากดัชนีเท่ากับจำนวนแถวในตารางแถวใหม่จะถูกผนวกเข้ากับส่วนท้ายของตาราง
หากตารางว่างเปล่าแถวใหม่จะถูกแทรกลงในเซ็กเมนต์ <tbody> ใหม่ซึ่งจะถูกแทรกลงในตาราง
ทำให้เสียชีวิต
หากดัชนีพารามิเตอร์น้อยกว่า 0 หรือมากกว่าหรือเท่ากับจำนวนแถวในตารางวิธีนี้จะส่งข้อยกเว้น Domexception ด้วยรหัส index_size_err
ตัวอย่าง
การคัดลอกรหัสมีดังนี้:
<html>
<head>
<script type = "text/javascript">
ฟังก์ชัน insrow ()
-
document.getElementById ('mytable'). InserTrow (0)
-
</script>
</head>
<body>
<table id = "myTable">
<tr>
<td> row1 cell1 </td>
<td> row1 cell2 </td>
</tr>
<tr>
<td> row2 cell1 </td>
<td> Row2 Cell2 </td>
</tr>
</table>
<br />
<อินพุต type = "ปุ่ม" onclick = "insrow ()"
value = "แทรกแถวใหม่">
</body>
</html>
deleteCell ()
คำจำกัดความและการใช้งาน
วิธีการ deleteCell () ใช้ในการลบเซลล์ (<td> องค์ประกอบ) ในแถวตาราง
ไวยากรณ์
tablerowobject.deletecell (ดัชนี)
อธิบาย
ดัชนีพารามิเตอร์คือตำแหน่งขององค์ประกอบตารางที่จะลบในแถว
วิธีนี้จะลบองค์ประกอบตารางที่ตำแหน่งที่ระบุในแถวตาราง
ทำให้เสียชีวิต
หากดัชนีพารามิเตอร์น้อยกว่า 0 หรือมากกว่าหรือเท่ากับองค์ประกอบของตารางในแถววิธีนี้จะส่งข้อยกเว้น Domexception ด้วย code index_size_err
ตัวอย่าง
การคัดลอกรหัสมีดังนี้:
<html>
<head>
<script type = "text/javascript">
ฟังก์ชั่น delrow ()
-
document.getElementById ('mytable'). deleterow (0)
-
</script>
</head>
<body>
<table id = "myTable">
<tr>
<td> row1 cell1 </td>
<td> row1 cell2 </td>
</tr>
<tr>
<td> row2 cell1 </td>
<td> Row2 Cell2 </td>
</tr>
</table>
<br />
<อินพุต type = "ปุ่ม" onclick = "delrow ()"
value = "ลบแถวแรก">
</body>
</html>
insertcell ()
คำจำกัดความและการใช้งาน
วิธี InsertCell () ใช้เพื่อแทรกองค์ประกอบ <TD> ที่ว่างเปล่าที่ตำแหน่งที่ระบุของแถวในตาราง HTML
ไวยากรณ์
tablerowobject.insertcell (ดัชนี)
ค่าส่งคืน
วัตถุ TableCell ที่แสดงองค์ประกอบ <td> ที่สร้างขึ้นใหม่และแทรก
อธิบาย
วิธีนี้จะสร้างองค์ประกอบ <td> ใหม่และแทรกลงในตำแหน่งที่ระบุในแถว เซลล์ใหม่จะถูกแทรกก่อนที่องค์ประกอบตารางจะอยู่ที่ตำแหน่งที่ระบุในดัชนี หากดัชนีเท่ากับจำนวนเซลล์ในแถวเซลล์ใหม่จะถูกผนวกเข้ากับปลายแถว
โปรดทราบว่าวิธีนี้สามารถแทรกองค์ประกอบตารางข้อมูล <td> เท่านั้น หากคุณต้องการเพิ่มองค์ประกอบส่วนหัวลงในแถวคุณต้องสร้างและแทรกองค์ประกอบ <th> โดยใช้วิธี document.createElement () และวิธีการที่ node.insertBefore () (หรือวิธีการที่เกี่ยวข้อง)
ทำให้เสียชีวิต
หากดัชนีพารามิเตอร์น้อยกว่า 0 หรือมากกว่าหรือเท่ากับองค์ประกอบของตารางในแถววิธีนี้จะส่งข้อยกเว้น Domexception ด้วย code index_size_err
ตัวอย่าง
การคัดลอกรหัสมีดังนี้:
<html>
<head>
<script type = "text/javascript">
ฟังก์ชั่น inscell ()
-
var x = document.getElementById ('TR2'). insertCell (0)
X.innerhtml = "John"
-
</script>
</head>
<body>
<table>
<tr id = "tr1">
<th> FirstName </th>
<th> นามสกุล </th>
</tr>
<tr id = "tr2">
<td> Peter </td>
<td> Griffin </td>
</tr>
</table>
<br />
<อินพุต type = "ปุ่ม" onclick = "inscell ()" value = "แทรกเซลล์">
</body>
</html>
deleteCell ()
คำจำกัดความและการใช้งาน
วิธีการ deleteCell () ใช้ในการลบเซลล์ (<td> องค์ประกอบ) ในแถวตาราง
ไวยากรณ์
tablerowobject.deletecell (ดัชนี)
อธิบาย
ดัชนีพารามิเตอร์คือตำแหน่งขององค์ประกอบตารางที่จะลบในแถว
วิธีนี้จะลบองค์ประกอบตารางที่ตำแหน่งที่ระบุในแถวตาราง
ทำให้เสียชีวิต
หากดัชนีพารามิเตอร์น้อยกว่า 0 หรือมากกว่าหรือเท่ากับองค์ประกอบของตารางในแถววิธีนี้จะส่งข้อยกเว้น Domexception ด้วย code index_size_err
ตัวอย่าง
การคัดลอกรหัสมีดังนี้:
<html>
<head>
<script type = "text/javascript">
ฟังก์ชั่น delcell ()
-
document.getElementById ('TR2'). DeleteCell (0)
-
</script>
</head>
<body>
<table>
<tr id = "tr1">
<th> FirstName </th>
<th> นามสกุล </th>
</tr>
<tr id = "tr2">
<td> Peter </td>
<td> Griffin </td>
</tr>
</table>
<br />
<อินพุต type = "ปุ่ม" onclick = "delcell ()" value = "ลบเซลล์">
</body>
</html>
แอปพลิเคชันในโครงการ:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
var trindex = 0;
// เพิ่มแถวแบบไดนามิก
UNCTION APPENDCONVERT () {
// var sel = document.getElementById ("selectconvertName");
var sel = document.getElementSbyName ("SelectConvertName") [0];
var classname;
ถ้า (null! = sel) {
สำหรับ (var i = 0; i <sel.options.length; i ++) {
if (sel.options [i] .Selected)
className = sel.options [i] .Value;
-
-
// ข้อมูลมาจากรูปแบบ AJAX, JSON
Convert.getConvertBean2Json (classname,
ฟังก์ชั่น (ผลลัพธ์) {
var obj = edal ('('+ผลลัพธ์+')');
var table = document.getElementById ("convertable");
var newrow = table.insertrow (Trindex+1);
newrow.insertCell (0) .innerhtml = obj.name+"<อินพุตประเภท = 'ปุ่ม' value = 'ลบ' onClick = 'deleterow (นี่)'>";
newrow.insertCell (1) .innerhtml = "<อินพุต type = 'text' name = 'convertlist ["+trindex+"]. id'> <อินพุต type = 'herved' 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+
"; ค่าพารามิเตอร์: <ชื่ออินพุต = 'convertlist ["+trindex+"]. paramlist ["+i+"]. value' type = 'text'> <br>"+
"<อินพุต type = 'hidden' name = 'convertlist ["+trindex+"]. paramlist ["+i+"]. name' value = '"+obj.paramlist [i] .name+">"+
"<อินพุต 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 ('Convertable'). deleterow (i);
Trindex--;
-
</script>