tableDom.html | Explore in Territory

<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>
chromium/third_party/blink/web_tests/tables/mozilla/dom/tableDom.html
