Grab Table input onclick

[Total: 0    Average: 0/5]

This will take the input from an HTML table and put it into form data.

Head Code:

style>
body
 {
   color: black;
   background-color: #AFA;
 }
TR
 {
   font-weight: bold;
   background-color: #ADF;
 }
TH
 {
   background-color: black;
   color: #ADF;
 }
.shim {height:1px; background-color:black;}
</style>
<script>
var cols=new Array();
cols[0]="A";
cols[1]="B";
cols[2]="C";
function getData(_row)
{
  for(var i=0;i<cols.length;i++)
  {
    var _temp=document.getElementById("s"+_row+cols[i]).innerHTML;
    document.getElementById("f"+cols[i]).value=_temp;
  }
}
function over(_row)
{
  document.getElementById("r"+_row).style.backgroundColor="red";
}
function out(_row)
{
  document.getElementById("r"+_row).style.backgroundColor="#ACF";
}
</script>

Body Code:

This is the table.<BR />
Select a row by moving the mouse over the row and then clicking.<BR />
The contents of the table will then be copied over into the form below.<BR />
<table cellpadding=1 cellspacing=0>
<tr>
  <th>Column 1</th>

  <th>Column 2</th>
  <th>Column 3</th>
</tr>
<tr id="r1" onclick="getData(1)" onmouseover="over(1)" onmouseout="out(1)" title="Click Me">
  <td id="s1A">spot 1A</td>
  <td id="s1B">spot 1B</td>
  <td id="s1C">spot 1C</td>

</tr>
<tr class="shim"><td colspan=3><img src="/images/shim.gif" height=1 width=1></td></tr>
<tr id="r2" onclick="getData(2)" onmouseover="over(2)" onmouseout="out(2)" title="Click Me">
  <td id="s2A">spot 2A</td>
  <td id="s2B">spot 2B</td>
  <td id="s2C">spot 2C</td>
</tr>
<tr class="shim"><td colspan=3><img src="/images/shim.gif" height=1 width=1></td></tr>
<tr id="r3" onclick="getData(3)" onmouseover="over(3)" onmouseout="out(3)" title="Click Me">
  <td id="s3A">spot 3A</td>

  <td id="s3B">spot 3B</td>
  <td id="s3C">spot 3C</td>
</tr>
</table>
<HR>
This is the form.<BR />
It is updated by the choosing of a row in the table above.<BR />
<form name=myform>
Text Box: <input id="fA" type=text name=f1 value="" readonly onfocus="self.blur"><BR />
Text Box: <input id="fB" type=text name=f2 value="" readonly onfocus="self.blur"><BR />

Text Area: <textarea id="fC" name=f3 readonly onfocus="self.blur"></textarea>
</form>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *