Tables

right click menu t return cell and header info

HTML

<table cellspacing="1" id="recordingTable">

  <input id name type="hidden" value="recordingTable">
  
  <!-- this is the head element -->
  <thead class="callView">
    <!--specify the columns -->
    <tr>
      <th>STATE</th>
      <th>CALLID</th>
      <th>COLLECTED</th>
      <th>ZONE</th>
    </tr>
  </thead>
  
  <!-- -->
  <tbody class="callView">
    <tr>
      <td>0</td>
      <td>10001</td>
      <td>1</td>
      <td>0</td>
    </tr> 
    
    <tr>
      <td>1</td>
      <td>10002</td>
      <td>0</td>
      <td>1</td>
    </tr> 
    
    <tr>
      <td>0</td>
      <td>10003</td>
      <td>spring</td>
      <td>1</td>
    </tr> 
    
  </tbody>  
</table>

<hr>
<div id='out'></div>

CSS

table {
    border-collapse: collapse;
    background-color: grey;
}
table, th, td {
    border: 1px solid black;
}

JavaScript

var tbl = document.getElementById("recordingTable");
tbl.onclick = function(e)
{
	console.log(e.target.innerHTML);
  console.log(e.target.cellIndex);
  console.log(e.target.parentElement.rowIndex);
}
/*if (tbl != null) {
    for (var i = 0; i < tbl.rows.length; i++) {
        for (var j = 0; j < tbl.rows[i].cells.length; j++)
        		
            tbl.rows[i].cells[j].onclick = function () { getval(this); };
    }
}
 
function getval(cel) {
    alert(cel.innerHTML);
    
}*/