gecko/layout/html/tests/table/dom/tableDom.html

165 lines
4.2 KiB
HTML

<HEAD>
<SCRIPT src=dom.js>
</SCRIPT>
<SCRIPT>
var count = 1;
function genName(prefix) {
return "X" + count++ + "\n";
}
function doIt() {
var rgInput = document.getElementsByTagName("INPUT")[0];
var rgIndex = rgInput.value;
var rowInput = document.getElementsByTagName("INPUT")[1];
var rowIndex = rowInput.value;
var colInput = document.getElementsByTagName("INPUT")[2];
var colIndex = colInput.value;
var rowSpanInput = document.getElementsByTagName("INPUT")[3];
var rowSpan = rowSpanInput.value;
var colSpanInput = document.getElementsByTagName("INPUT")[4];
var colSpan = colSpanInput.value;
var select = document.getElementsByTagName("SELECT")[0];
var actionIndex = select.selectedIndex;
var table = document.getElementsByTagName("TABLE")[0];
var tbodies = table.tBodies;
var tbody = tbodies.item(rgIndex);
if (0 == actionIndex) {
var rows = tbody.rows;
var row = rows.item(rowIndex);
//appendCell(rowIndex, rowSpan, colSpan);
appendCell(row, 1, 1);
}
else if (1 == actionIndex) {
var rows = tbody.rows;
var row = rows.item(rowIndex);
//insertCell(rowIndex, colIndex, rowSpan, colSpan);
insertCell(row, colIndex, 1, 1);
}
else if (2 == actionIndex) {
var rows = tbody.rows;
var row = rows.item(rowIndex);
deleteCell(row, colIndex);
}
else if (3 == actionIndex) {
appendRow(tbody);
}
else if (4 == actionIndex) {
insertRow(tbody, rowIndex);
}
else if (5 == actionIndex) {
deleteRow(tbody, rowIndex);
}
else if (6 == actionIndex) {
buildTable(rowIndex, colIndex);
}
}
function appendCellx(aRowIndex, aRowSpan, aColSpan) {
var row = document.getElementsByTagName("TR")[aRowIndex];
var cell = document.createElement("TD", null);
cell.rowSpan = 2;
cell.colSpan = aColSpan;
var text = document.createTextNode(genName());
cell.appendChild(text);
row.appendChild(cell);
}
function insertCell(aRowIndex, aColIndex, aRowSpan, aColSpan) {
dump(aRowSpan); dump(aColSpan);
var row = document.getElementsByTagName("TR")[aRowIndex];
//var refCell = document.getElementsByTagName("TD")[0];
var cells = row.cells;
var refCell = cells.item(aColIndex);
var newCell = document.createElement("TD", null);
newCell.rowSpan = aRowSpan;
newCell.colSpan = aColSpan;
var text = document.createTextNode(genName());
newCell.appendChild(text);
row.insertBefore(newCell, refCell);
//dump("SCRIPT: inserted CELL as first cell in first row\n");
}
function deleteCell(aRowIndex, aColIndex) {
var row = document.getElementsByTagName("TR")[aRowIndex];
row.deleteCell(aColIndex);
}
function appendRow(aRowGroupIndex) {
var rg = document.getElementsByTagName("TBODY")[aRowGroupIndex];
var row = document.createElement("TR", null);
rg.appendChild(row);
appendCell(row.rowIndex, 1, 1);
}
function insertRow(aRowGroupIndex, aRowIndex) {
var rg = document.getElementsByTagName("TBODY")[aRowGroupIndex];
var refRow = document.getElementsByTagName("TR")[aRowIndex];
var row = document.createElement("TR", null);
rg.insertBefore(row, refRow);
}
function buildTable(aNumRows, aNumCols) {
var table = document.getElementsByTagName("TABLE")[0];
for (rowX = 0; rowX < aNumRows; rowX++) {
var row = document.createElement("TR", null);
for (colX = 0; colX < aNumCols; colX++) {
var cell = document.createElement("TD", null);
var text = document.createTextNode(genName());
cell.appendChild(text);
row.appendChild(cell);
}
table.appendChild(row);
}
}
</SCRIPT>
</HEAD>
<BODY>
<form>
<select>
<option>append cell</option>
<option>insert cell</option>
<option>delete cell</option>
<option>append row</option>
<option>insert row</option>
<option>delete row</option>
<option>build table</option>
</select>
&nbsp tbody
<input type=text size=5 value=0>
&nbsp row
<input type=text size=5 value=0>
&nbsp col
<input type=text size=5 value=0>
&nbsp row span
<input type=text size=5 value=1>
&nbsp col span
<input type=text size=5 value=1>
&nbsp &nbsp
<INPUT TYPE="button" NAME="doIt" VALUE="Do It" onClick="doIt()" width=100>
</form>
<BR>
<table bgcolor=orange border>
<tbody>
<tr>
<td>c11</td>
</tr>
<tr>
<td>c21</td><td>c22</td>
</tr>
</tbody>
</table>
<BR>
</BODY></HTML>