RetroZilla/layout/html/tests/table/interactive/bug44148.html
2015-10-20 23:03:22 -04:00

72 lines
1.4 KiB
HTML

<HTML>
<HEAD>
<style>
TABLE
{
border: 1px solid grey;
border-spacing: 0px;
border-collapse: collapse;
font-size : 10pt;
}
TD
{
border: 1px solid grey;
width:75px;
}
INPUT
{
width:60px;
font-size:10pt;
border-style:solid;
}
</style>
<script>
function insertTextField()
{
var cell1 = document.getElementById("cell1");
var tf = document.createElement("input");
// remove text node and insert formless textfield
cell1.replaceChild(tf, cell1.firstChild);
}
function removeTextField()
{
var cell1 = document.getElementById("cell1");
var text = document.createTextNode("new text");
cell1.replaceChild(text, cell1.firstChild);
}
</script>
</HEAD>
<BODY>
<table>
<tr>
<td>r1c1</td>
<td>r1c2</td>
<td>r1c3</td>
</tr>
<tr>
<td id="cell1">cell 1</td>
<td id="cell2">cell 2</td>
<td id="cell3">cell 3</td>
</tr>
<tr>
<td>r3c1</td>
<td>r3c2</td>
<td>r3c3</td>
</tr>
</table>
<form>
<input type="button" value="Insert textfield into first cell"
onclick="insertTextField();"
style="width:300px">
<input type="button" value="Remove textfield from first cell"
onclick="removeTextField();"
style="width:300px">
</form>
</BODY>
</HTML>