Table input function

silentq · Sep 28, 2007

Hi
I've made this function that, when you click on a cell it enters your word into that cell (the word you ebtered into the text box. I want to use just one function to be able to populate all cells. Like, you enter word, click cell C#, it enters it there, then you enter new word and click cell B! and it imputs there. this is what I have:

Code:

<script language="javascript">


 function moveToCell() {
document.getElementById('cell').innerHTML = document.getElementById('input_word').value;
}

</script>
<table width="500" border="1" cellspacing="0" cellpadding="1" id="tabletable">
  <tr>
    <th scope="col" width="25%" style="background-color:#666666"> </th>
    <th scope="col" width="25%">A</th>
    <th scope="col" width="25%">B</th>
    <th scope="col" width="25%">C</th>
  </tr>
  <tr>
    <td>1</td>
    <td onclick="moveToCell()" id="cell"><div id="A1"></div></td>
    <td><div id="B1"></div></td>
    <td><div id="C1"></div></td>
  </tr>
  <tr>
    <td>2</td>
    <td  onclick="moveToCell()" id="cell2"><div id="A2"></div></td>
    <td><div id="B2"></div></td>
    <td><div id="C2"></div></td>
  </tr>
  <tr>
    <td>3</td>
    <td><div id="A3"></div></td>
    <td><div id="B3"></div></td>
    <td><div id="C3"></div></td>
  </tr>
  <tr>
    <td>4</td>
    <td><div id="A4"></div></td>
    <td><div id="B4"></div></td>
    <td><div id="C4"></div></td>
  </tr>
</table>
<p>
<form name="tableform" action="#">
Enter Word: <input type="text" id="input_word" /><p>
</form><p>
<div style="font-size:10px">Click Cell To Enter Word</div>
<p>

I dont want to make a separate function for each cell, anybody got any tips?

j4606 · Sep 28, 2007

Something like this... not tested but its an idea

Code:

var tds = document.getElementsByTagName('td')
for (var i = 0; i<tds.length; i++){
tds[i].onclick=moveToCell;
}

your going to have to use eventListener or attachevent probobly but you get the idea.

silentq · Sep 28, 2007

thanks for your help

j4606 · Sep 28, 2007

Code:

<html>
    <head>
        <script type="text/javascript">
			function moveToCell() {
				document.getElementById('cell').innerHTML = document.getElementById('input_word').value;
			}
			function maketdsclick(){
				var tds = document.getElementsByTagName('td');
				for (var i = 0; i<tds.length; i++){
					(tds[i].addEventListener)?tds[i].addEventListener('click', moveToCell, false):tds[i].attachEvent('onclick', moveToCell);
				}
			}
        </script>
    </head>
    <body onload="maketdsclick()">
<table width="500" border="1" cellspacing="0" cellpadding="1" id="tabletable">
  <tr>
    <th scope="col" width="25%" style="background-color:#666666"> </th>
    <th scope="col" width="25%">A</th>
    <th scope="col" width="25%">B</th>
    <th scope="col" width="25%">C</th>
  </tr>
  <tr>
    <td>1</td>
    <td onclick="moveToCell()" id="cell"><div id="A1"></div></td>
    <td><div id="B1"></div></td>
    <td><div id="C1"></div></td>
  </tr>
  <tr>
    <td>2</td>
    <td  onclick="moveToCell()" id="cell2"><div id="A2"></div></td>
    <td><div id="B2"></div></td>
    <td><div id="C2"></div></td>
  </tr>
  <tr>
    <td>3</td>
    <td><div id="A3"></div></td>
    <td><div id="B3"></div></td>
    <td><div id="C3"></div></td>
  </tr>
  <tr>
    <td>4</td>
    <td><div id="A4"></div></td>
    <td><div id="B4"></div></td>
    <td><div id="C4"></div></td>
  </tr>
</table>
<p>
<form name="tableform" action="#">
Enter Word: <input type="text" id="input_word" /><p>
</form><p>
<div style="font-size:10px">Click Cell To Enter Word</div>
<p>
    </body>
</html>

np

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Table input function

silentq

Programmer

j4606

MIS

silentq

Programmer

j4606

MIS

Similar threads

Part and Inventory Search

Sponsor