<html>
<head>
<script type="text/javascript">
var counter1 = 1;
var counter2 = 2;
var addingrow = 0;
var numRows = 0;
function insRow()
{
var x=document.getElementById('myTable').insertRow(0);
var y=x.insertCell(0);
var z=x.insertCell(1);
addingrow += 1;
numRows = addingrow - 2;
numRows2 = addingrow - 1;
y.innerHTML=counter1;
z.innerHTML=counter2;
counter1 += 2;
counter2 += 2;
var a=document.getElementById('myTable').rows[addingrow].cells
a[0].innerHTML= counter1;
var b=document.getElementById('myTable').rows[addingrow].cells
b[1].innerHTML=counter2;
}
function changeCell()
{
var x = document.getElementById('cellchange').value;
var y = document.getElementById('myTable').rows[numRows].cells
y[1].innerHTML=x;
}
function changeBackground()
{
var x = document.getElementById('backgroundchange').value;
var y = document.getElementById('myTable').rows[numRows].cells
y[0].bgColor=x;
}
function changeBorder()
{
var x = document.getElementById('borderchange').value;
var y = document.getElementById('myTable').border=x;
}
function check()
{
var x = document.getElementById('cellchange').value;
var y = document.getElementById('myTable').rows[numRows2].cells
y[1].innerHTML=x;
}
</script>
</head>
<body>
<h1>HW js 2</h1>
<table id="myTable" border="1">
</table>
<hr />
<br />
<ol>
<li>
<p><a onclick="insRow();">Each click of this here text adds a row with a content number in the contents starting with the number 1</a></p>
</li>
<li>
<form id="myForm" name="myForm">set the contents of cell number 4 to: <input id="cellchange" type="text"><input type="button" onclick="changeCell();" value="Change cell"></form>
</li>
<li>
<form id="myForm2" name="myForm2">set the background of cell number 3 to: <input id="backgroundchange" type="text"><input type="button" onclick="changeBackground();" value="Change background"></form>
</li>
<li>
<form id="myForm3" name="myForm3">set the border of the table to: <input id="borderchange" type="text"><input type="button" onclick="changeBorder();" value="Change border"></form>
</li>
<li>
<form id="myForm4" name="myForm4">copy contents of cell 4 to cell 2 with this checkbox: <input type="checkbox" id="cellswitch" onclick="check()" /></form>
</li>
<li><form id="myForm5" name="myForm5">Put the contents of cell number 2 in this text input using the 'child' DOM notation<input id="paste" type="text"></form>
</li>
<li>7
</li>
<li>8
</li>
</ol>
</body>
</html>