get value on click from table using javascript

[Alex gRin]

Please help get value on click from table using java script

I have a table generated from mysql query I have a code that highlight the row on the mouse click it the JavaScript but I also want to get the value of the cells from the row that is highlighted I tried doing different stuff but I always get an error value undefined.

Here is my code

in the JavaScript function I not only want to get the row highlighted but I also want to get the values of the cell in a row on mouse click

 

function tableHighlightRow() {
  if (document.getElementById && document.createTextNode) {
    var tables=document.getElementsByTagName('table');
   for (var i=0;i<tables.length;i++)
    {
      if(tables[i].className=='hilite') {

      var trs=tables[i].getElementsByTagName('tr');
        for(var j=0;j<trs.length;j++)
{
          if(trs[j].parentNode.nodeName=='TBODY') {
            trs[j].onclick=function(){this.className='hilight';return false}
            trs[j].ondblclick=function(){this.className='';return false}

          }
        }
      }
    }
  }
}
window.onload=function(){tableHighlightRow();}

    </script>
<?php


$con2 = mysql_connect('localhost', 'root');
if (!$con2)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("students", $con2);

$sql2="SELECT HA_BLDG_CODE, HA_ROOM_NUMBER, Mail_Ltr, RRCD_CODE, Capacity, Gender, Restriction_Name, RoomComments, Notes FROM housing_assignments WHERE Gender = 'Female'";

$result2 = mysql_query($sql2);

echo "<table class='hilite' id='highlight' >
<tr>
<th>Building Code</th>
<th>Room Number</th>
<th>Mail Ltr</th>
<th>RRCD Code</th>
<th>Gender</th>
<th>Restriction</th>
<th>Comments</th>
<th>Note</th>
</tr>";

while($row2 = mysql_fetch_array($result2))
  {


  echo "<tr>";
  echo "<td >" . $row2['HA_BLDG_CODE'] . "</td>";
  echo "<td>" . $row2['HA_ROOM_NUMBER'] . "</td>";
  echo "<td>" . $row2['Mail_Ltr'] . "</td>";
  echo "<td>" . $row2['RRCD_CODE'] . "</td>";
 echo "<td>" . $row2['Gender'] . "</td>";
  echo "<td>" . $row2['Restriction_Name'] . "</td>";
  echo "<td>" . $row2['RoomComments']. "</td>";
  echo "<td>" . $row2['Notes']. "</td>";


  echo "</tr>";

  }
echo "</table>";

    




mysql_close($con2);
?>   

THANKS IN ADVANCE

[Eric Pascarello]

first ting for a performance boost, you do not want to check for the body each time in the loop. Instead only grab the rows in the body to start with

var trs=tables[i].getElementsByTagName("tbody")[0].getElementsByTagName('tr');  
for(var j=0;j<trs.length;j++) {  
    trs[j].onclick=function(){this.className='hilight';return false}  
    trs[j].ondblclick=function(){this.className='';return false}  
}  

If you have multiple tbodies, than you can add a loop there.

To get the values of the cells it would just be something like

var theCells = this.getElementsByTagName("td");
for(var i=0;i<theCells.length;i++){
   alert(theCells[i].innerHTML);
}

Eric>

[Alex gRin]

Thanks your suggestion worked fine but now I am face with different problem this code works fine

<?php
$q=$_REQUEST["q"];

$con2 = mysql_connect('localhost', 'root');
if (!$con2)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("students", $con2);

$sql2="SELECT HA_BLDG_CODE, HA_ROOM_NUMBER, Mail_Ltr, RRCD_CODE, Capacity, Gender, Restriction_Name, RoomComments, Notes FROM housing_assignments WHERE Gender = 'Male'";//  '".$q."'";

$result2 = mysql_query($sql2);

echo "<table class='hilite' id='highlight' >
<tr>
<th>Building Code</th>
<th>Room Number</th>
<th>Mail Ltr</th>
<th>RRCD Code</th>
<th>Gender</th>
<th>Restriction</th>
<th>Comments</th>
<th>Note</th>
</tr>";

while($row2 = mysql_fetch_array($result2))
  {


  echo "<tr>";
  echo "<td >" . $row2['HA_BLDG_CODE'] . "</td>";
  echo "<td>" . $row2['HA_ROOM_NUMBER'] . "</td>";
  echo "<td>" . $row2['Mail_Ltr'] . "</td>";
  echo "<td>" . $row2['RRCD_CODE'] . "</td>";
 echo "<td>" . $row2['Gender'] . "</td>";
  echo "<td>" . $row2['Restriction_Name'] . "</td>";
  echo "<td>" . $row2['RoomComments']. "</td>";
  echo "<td>" . $row2['Notes']. "</td>";


  echo "</tr>";

  }
echo "</table>";

$myFile = "testFile.txt";
$fh = fopen($myFile, 'w') or die("can't open file");
fwrite($fh, $job);

fclose($fh)

?>
          </li>		<li id="li_2" >
		<label class="description" for="element_2">First Name</label>
		<div>
        <INPUT TYPE="button" NAME="button1" Value="Click2" onclick="displaymessage()" />

			<input name="fname" type="text" class="element text medium" id="fname" maxlength="255" value="<?php echo $job; ?>" />
		</div>
		</li>		<li id="li_3" >
        <?




mysql_close($con2);
?>
     <script type="text/javascript">


function tableHighlightRow() {
  if (document.getElementById && document.createTextNode) {
    var table=document.getElementsByTagName('table');

   for (var i=0;i<table.length;i++)
    {
      if(table[i].className=='hilite') {

      var trs=table[i].getElementsByTagName('tr');
        for(var j=0;j<trs.length;j++)
{
          if(trs[j].parentNode.nodeName=='TBODY') {
          trs[j].onclick=function(){var theCells = this.getElementsByTagName("td");
 for(var i=0;i<theCells.length;i++){
    alert(theCells[i].innerHTML);
 } this.className='hilight' ; ;return false}
            trs[j].ondblclick=function(){this.className='';return false}
            //  var theCells =trs[j].getElementsByTagName("td");
          // alert( theCells[1].innerHTML );
 //for(var i=0;i<theCells.length;i++){


// alert(theCells[i].innerHTML);
 }
          }
        }
      }
    }
  }
//}

setTimeout('tableHighlightRow()', 1000 );

    </script>
   

and I am trying to send it to another php/html page the problem is the JavaScript is not running everything else works fine
is there a way to do this

here is my ajax function which is on separate file specifically for calling files using ajax

 var xmlhttp;

function showUser(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="getuser.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
   
   document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
   

is there a way to use this ajax to send the php function above with JavaScript working

Thanks in advance
and Thanks for all the support this site is providing while I work on this project
I would really appreciate any help I am new to web programming that may be the reason why I have so many questions.

[Ifraz Imanudeen]

Try having a Another column and use hyper Link.
<td><a href="ThatPage.php?edit=<?php echo $row['id'];?>WhatEver</a></td>

On that page create the query

Alex gRin wrote: Please help get value on click from table using java script

I have a table generated from mysql query I have a code that highlight the row on the mouse click it the JavaScript but I also want to get the value of the cells from the row that is highlighted I tried doing different stuff but I always get an  error value undefined.

Here is my code

in the JavaScript function I not only want to get the row highlighted but I also want to get the values of the cell in a row on mouse click

 

function tableHighlightRow() {
  if (document.getElementById && document.createTextNode) {
    var tables=document.getElementsByTagName('table');
   for (var i=0;i<tables.length;i++)
    {
      if(tables[i].className=='hilite') {

      var trs=tables[i].getElementsByTagName('tr');
        for(var j=0;j<trs.length;j++)
{
          if(trs[j].parentNode.nodeName=='TBODY') {
            trs[j].onclick=function(){this.className='hilight';return false}
            trs[j].ondblclick=function(){this.className='';return false}

          }
        }
      }
    }
  }
}
window.onload=function(){tableHighlightRow();}

    </script>
<?php


$con2 = mysql_connect('localhost', 'root');
if (!$con2)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("students", $con2);

$sql2="SELECT HA_BLDG_CODE, HA_ROOM_NUMBER, Mail_Ltr, RRCD_CODE, Capacity, Gender, Restriction_Name, RoomComments, Notes FROM housing_assignments WHERE Gender = 'Female'";

$result2 = mysql_query($sql2);

echo "<table class='hilite' id='highlight' >
<tr>
<th>Building Code</th>
<th>Room Number</th>
<th>Mail Ltr</th>
<th>RRCD Code</th>
<th>Gender</th>
<th>Restriction</th>
<th>Comments</th>
<th>Note</th>
</tr>";

while($row2 = mysql_fetch_array($result2))
  {


  echo "<tr>";
  echo "<td >" . $row2['HA_BLDG_CODE'] . "</td>";
  echo "<td>" . $row2['HA_ROOM_NUMBER'] . "</td>";
  echo "<td>" . $row2['Mail_Ltr'] . "</td>";
  echo "<td>" . $row2['RRCD_CODE'] . "</td>";
 echo "<td>" . $row2['Gender'] . "</td>";
  echo "<td>" . $row2['Restriction_Name'] . "</td>";
  echo "<td>" . $row2['RoomComments']. "</td>";
  echo "<td>" . $row2['Notes']. "</td>";


  echo "</tr>";

  }
echo "</table>";

    




mysql_close($con2);
?>   

THANKS IN ADVANCE

[Ifraz Imanudeen]

on ThatPage.php

use
if(isset($_GET['edit'])){   $id_ret = $_GET['edit'];   $sql = mysqli_query($connect, "SELECT * FROM yourtable WHERE id=$id_ret");   $res = mysqli_fetch_arry($rec);   $blabla = $res['name'];   $blablabla = $res['name1'];   $blablablabla = $res['name2']; } <Div><?php echo $blabla; ?></Div> <Div><?php echo $blablabla; ?></Div> <Div><?php echo $blablablabla; ?></Div>

Ifraz Imanudeen wrote:Try having a Another column and use hyper Link.
<td><a href="ThatPage.php?edit=<?php echo $row['id'];?>WhatEver</a></td>

On that page create the query