JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Table Cell Population

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jul 2009
Posts: 81
Reputation: AshtonHogan is an unknown quantity at this point 
Solved Threads: 1
AshtonHogan AshtonHogan is offline Offline
Junior Poster in Training

Table Cell Population

 
0
  #1
Aug 26th, 2009
Hi,

I'm trying to do the following:
1. Click on a row (ANY cell of that row)
2. Depending on where I clicked, a javascript function should get the value of EACH cell in THAT row, and populate it to text boxes.

Below is my code thus far:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <html>
  2.     <head>
  3.         <title>
  4.             Trial & Error - Table Cells
  5.         </title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             function getRow(t) {
  10.                 var col=t.cellIndex;
  11.                 var row=t.parentNode.rowIndex;
  12.                 var tableRow = document.getElementById("selectRow");
  13.                 var tableCells = tableRow.getElementsByTagName("td");
  14.                 document.testForm.inputA.value = (tableCells[0].innerText);
  15.                 document.testForm.inputB.value = (tableCells[1].innerText);
  16.                 document.testForm.inputC.value = (tableCells[2].innerText);
  17.                 document.testForm.inputD.value = (tableCells[3].innerText);
  18.                 document.testForm.inputE.value = (tableCells[4].innerText);
  19.                 document.testForm.inputF.value = (tableCells[5].innerText);
  20.                 document.testForm.inputG.value = (tableCells[6].innerText);
  21.             }
  22.         </script>
  23.         <form name="testForm" action='test6.html'>
  24.             <table border='1' style="background-color:black; color:white">
  25.                 <tr id="selectRow">
  26.                     <td width='150px' onclick="getRow(this)">
  27.                         <b>Test A</b>
  28.                     </td>
  29.                     <td onclick="getRow(this)">
  30.                         <b>Test B</b>
  31.                     </td>
  32.                     <td onclick="getRow(this)">
  33.                         <b>Test C</b>
  34.                     </td>
  35.                     <td onclick="getRow(this)">
  36.                         <b>Test D</b>
  37.                     </td>
  38.                     <td onclick="getRow(this)">
  39.                         <b>Test E</b>
  40.                     </td>
  41.                     <td onclick="getRow(this)">
  42.                         <b>Test F</b>
  43.                     </td>
  44.                     <td onclick="getRow(this)">
  45.                         <b>Test G</b>
  46.                     </td>
  47.                 </tr>
  48.                 <tr>
  49.                     <td width='150px' onclick="getRow(this)">
  50.                         <b>Test 1</b>
  51.                     </td>
  52.                     <td onclick="getRow(this)">
  53.                         <b>Test 2</b>
  54.                     </td>
  55.                     <td onclick="getRow(this)">
  56.                         <b>Test 3</b>
  57.                     </td>
  58.                     <td onclick="getRow(this)">
  59.                         <b>Test 4</b>
  60.                     </td>
  61.                     <td onclick="getRow(this)">
  62.                         <b>Test 5</b>
  63.                     </td>
  64.                     <td onclick="getRow(this)">
  65.                         <b>Test 6</b>
  66.                     </td>
  67.                     <td onclick="getRow(this)">
  68.                         <b>Test 7</b>
  69.                     </td>
  70.                 </tr>
  71.                 <tr>
  72.                     <td>
  73.                         <input type='text' name='inputA' value=''/>
  74.                     </td>
  75.                     <td>
  76.                         <input type='text' name='inputB' value=''/>
  77.                     </td>
  78.                     <td>
  79.                         <input type='text' name='inputC' value='' />
  80.                     </td>
  81.                     <td>
  82.                         <input type='text' name='inputD' value='' />
  83.                     </td>
  84.                     <td>
  85.                         <input type='text' name='inputE' value='' />
  86.                     </td>
  87.                     <td>
  88.                         <input type='text' name='inputF' value='' />
  89.                     </td>
  90.                     <td>
  91.                         <input type='text' name='inputG' value='' />
  92.                     </td>
  93.                 </tr>
  94.             </table>
  95.         </form>
  96.     </body>
  97. </html>

Everything works perfectly EXCEPT that I cannot utilise this with more than one row. Could someone please test this and tell me how I can make it more dynamic?

Say for example I was dynamically generating table rows and it would be unknown to me how many rows there would be until the program ran; how would I be able to make this function detect which information to populate into input areas?

Thanks a lot,
-Ash
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 81
Reputation: AshtonHogan is an unknown quantity at this point 
Solved Threads: 1
AshtonHogan AshtonHogan is offline Offline
Junior Poster in Training

Re: Table Cell Population

 
0
  #2
Aug 27th, 2009
Nevermind, I found the solution:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <html>
  2. <head><title></title></head>
  3. <body>
  4. <script type="text/javascript">
  5.             function getRow(t) {
  6.                 var col=t.cellIndex;
  7.                 var row=t.parentNode.rowIndex;
  8.                 var testTable = document.getElementById("testTable");
  9.                 alert(testTable.rows[row].cells[col].innerHTML);
  10.             }
  11. </script>
  12.  
  13.  <table id="testTable" border='1' style="background-color:black; color:white">
  14.                 <tr>
  15.                     <td width='150px' onclick="getRow(this)">
  16.                        test 1
  17.                     </td>
  18.                     <td onclick="getRow(this)">
  19.                         <b>Test B</b>
  20.                     </td>
  21.                 </tr>
  22.                 <tr>
  23.                     <td width='150px' onclick="getRow(this)">
  24.                        test 2
  25.                     </td>
  26.                     <td onclick="getRow(this)">
  27.                         <b>Test B</b>
  28.                     </td>
  29.                 </tr>
  30. </table>
  31. </body>
  32. </html>

My only question now is:
Is there a better way to retrieve cell data than innerHTML ? I tried "data" but it returns "[object]"... When I use innerHTML it returns the html tags, along with the text, and I only want the text...

Thanks.
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2006
Posts: 262
Reputation: Dukane is an unknown quantity at this point 
Solved Threads: 22
Dukane's Avatar
Dukane Dukane is offline Offline
Posting Whiz in Training

Re: Table Cell Population

 
0
  #3
Aug 28th, 2009
I am no expert, by try this: http://blog.coderlab.us/2005/09/22/u...-with-firefox/
It is very important to read this: http://www.catb.org/~esr/faqs/smart-questions.html
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box browser bug calendar captchaformproblem cart close codes column cookies css date debugger decimal dependent design disablefirebug dom download element embed engine enter error events ext file firefox focus form frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 iframe index java javascript javascripthelp2020 jawascriptruntimeerror jquery jsp libcurl listbox maps masterpage media menu microsoft mimic mp4 onmouseoutdivproblem onmouseover paypal pdf php player position post problem programming prototype redirect regex safari scale scriptlets scroll search security select software sql text textarea toggle unicode variables w3c website window windowofwords windowsxp
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC