get id of a cell in a table inside a div (JS and HTML)

Question

Hi I have a php script that draws a table subject to certain conditions. When the table is drawn it is inside a div called ‘window’ and the table is called ‘visi’ I then want to use the code below to get the id’s of each cell in the table. I can get the class name no problem but get absolutely nothing from the id. Can anyone give me an idea of what i am doing wrong?. I have tried a similar peice of code on a table that is not inside a div and it works fine. Any help would be great and I hope the code makes sense.

function confirm_allocate() {
var msg = ""   
var tab = document.getElementById('visi');
var r = tab.rows.length

for (i=0; i<r; i++){
cc = tab.rows.cells.length
         for (col=0; col<cc; col++){
            x=document.getElementById('visi').rows.cells;   

            iden = x[col].className
            ref =  x[col].id

            msg += "Class =" + iden + " ///    Id =" + ref +  "\r" 
         } 
} 
alert (msg ) 
}

If it helps this is the code to draw the table (but this is called using js/ ajax after getting the information for the table )

<?php

$table = ""  ;
include '../database_sql/dbconnect.php' ;
include '../functions/job_details.php';
include '../functions/check_date.php';
include '../functions/stock_list.php' ; 
include '../functions/allocated_on_date.php' ; 

$jobdate = $_GET['jobdate'] ;
$jobnumber = $_GET['jobnumber'] ;
$jobname = $_GET['jobname'] ;

$screens = screens_per_job($jobnumber,$size) ;

$table =  "<h2 align= 'center' > $jobname (Job Number $jobnumber) : Screens required : $screens </h2>"  ;
$table .= "<table id='visi' width='480px'  align='center'  cellspacing='1'  cellpadding='1'   border='1' ><tr>"  ;

// get stock list from DB 
stock_list() ; 
$len = count( $stock);

$evresult = mysql_query("SELECT * FROM event WHERE jobnumber = '$jobnumber' ")  ;
$event_row = mysql_fetch_array($evresult);

for ($counter = 0; $counter < $len; $counter++) {
      $item =  $stock[$counter] ;
      $items = $item . "s" ; 
      $booked_for_job = $event_row[$items] ;
      $result = mysql_query("SELECT * FROM $item ")  ;
      allocated_on_date($jobdate) ; // function 

         if ($booked_for_job) {   
         $count =  1 ;
         $table .= "<td >$item<br> [$booked_for_job to Allocate] </td> " ;

               WHILE ($row = mysql_fetch_array($result)) { ;
               $booked_job = $screens[$item][$count]["job"] ;  // from the   allocated_on_date($jobdate)  function  
               $description = $row['trailer_id'];
               $class = $items ;
               $id_items = $items . $count ;
               $count ++ ;   

                        if ($booked_job == $jobnumber) {  // allocated to current job
                        $table .= "<td class='truckbox' > <div class='$class' id='$id_items' onClick='allocate(\"$booked_for_job\",\"$id_items\")'  > " ;
                        $table .= "$num </div>   </td>"  ;

                                 } ELSEIF ($booked_job === 0 ) {  // available to allocated 
                                 $class .= "g"   ;
                                    $table .= "<td class='truckbox' > <div class='$class' id='$id_items' onClick='allocate(\"$booked_for_job\",\"$id_items\")'  > " ;
                                 $table .= "$num </div>   </td>"  ;

                                                   } ELSE {    // allocated to ANOTHER job 
                                                   $class .= "a"   ;
                                                   $table .= "<td class='truckbox' > <div class='$class' id='$items' > " ;
                                                   $table .= "</td> "  ;
                                                   }

               } // while 

         $table .= "</tr>" ; 
         } ; // if
}; //for


$table .= "</table> " ;

$table .= "<table width='200px'  align='center'  cellspacing='12'  cellpadding='1'   ><tr>" ; // draw table buttons close and allocate
$table .= "</tr><tr>" ;
$table .= "<td class='truckbox' <div class='yesbutton' id='yes' onClick='confirm_allocate()' ; return false ;  >  ";
$table .= "<td class='truckbox' <div class='nobutton' id='no' onClick='hide()'   >  ";
$table .= "</tr></table> ";

echo $table ; // finally draw table   

include '../database_sql/dbclose.php' ;

?>

Answer 1

I don't see any id attributes on the table cells (td elements) that are being generated. So ref is just going to be blank or undefined.

If that's not the problem then it could be the .rows.cells. Try .getElementsByTagName('td') instead. I think that line should be outside the loop, since it's not changing on each iteration.

Also, the latter part of your HTML is wrong - you don't close the td tag. Instead of <td class='truckbox' <div class... it should be <td class='truckbox'><div class...

Answer 2

You forgot to access the array elements:

...
for (i=0; i<r; i++) {
  var row = tab.rows[i];
  var cc = row.cells.length;

  for (col=0; col<cc; col++){
    var x = row.cells[col];
...