Ok below is a more detailed code which worked only just half way I wanted. I managed to get the table row but now I want to view the content of the first element of the selected table row... how do I do it ?
Code:
<script type="text/javascript">
onload=function addRowListeners() {
/* source code partially from: http://bytes.com/forum/thread148858.html */
/* Use this function as a common event listener for each row. */
function showRowNum() {
/* Check that the rowIndex property is
* supported before trying to use it.
*/
if('number' == typeof this.rowIndex) {
var rowSelected = this.rowIndex+1
alert('You clicked row: ' + rowSelected);
var table = document.getElementById('catTable');
alert('Table is catTable');
var row = table.rows[rowSelected];
alert('row is '+row);
var cell = row.cell[0];
alert('cell is '+cell);
var content = cell.firstChild.nodeValue;
alert('Selected content: '+content);
//alert();
}
}
/* Check that the getElementById method is
* supported before trying to use it.
*/
if(document.getElementById) {
/* Change the string, 'myTable', to reflect the actual id. */
var table = document.getElementById('catTable'), rows;
/* Ensure a reference was obtained and
* that we can access the rows.
*/
if(table && (rows = table.rows)) {
/* Add the listener to each row in the table. */
for(var i = 0, n = rows.length; i < n; ++i) {
rows[i].onclick = showRowNum;
}
}
}
}
</script>
<table border="1" name="catTable" id="catTable" rules="cols" width="80%" align="center" onClick="wasClicked()">
<thead style="background-color:#cdc673">
<th>ID</th>
<th>Password</th>
<th>Username</th>
</thead>
<tbody class="scrollable">
<!-- Some JSP codes to populate the table //-->
</tbody>
</table>
I hope someone could actively help me with these Javascript because I am doing this webpage which runs on a dateline and I need this one up so I can progress onto the next phase of building the website. I hope with so much codes I have put out here, it might have shown a far clearer picture on what's wrong with my codes.
Now, I would like to know why the alert for the rows gave some weird element lines ilike [object HTMLTableRowElement] rather than a number ? For now, I want the javascript to show the 'alert('row is '+row)' as in 'row is 2' or some nummerical format so that I can take this numerical number , to search for a particular row and retrieve the data value in the particular row's cell[0].
If anyone want to help but don't understand what I am saying, do post to get me to clarify what I want.