LayoutTests/tables/mozilla/dom/tableDom.html - WebKit - Git at Google

 <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>
	<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>