dynamic table rows

[thotheolh]

Hi. I have a table with a row for id , username and password in a html table. I use JSP to dynamically load create the html table and load data from MySQL database.

I have a textfield for the id, password textfield for password and textfield for username. The use is when I click on a row of the table, the textfields should automatically populate data of the selected row user into their own respective fields. How do I create a function where I click on a row of the table and I could get data from that row selected ?

 

[thotheolh]

I search on the net for a bit of javascript on the portion where you click on a row of a table and I found the following codes...

<SCRIPT LANGUAGE="JavaScript">
            onload=function (){
            TR=document.getElementsByTagName('tr')
            for(i=0; i<TR.length; i++)
            TR[i].onclick=function (){
            var selectedValue = this.getElementsByTagName('td')[0].firstChild.nodeValue
            alert(selectedValue)
            }
            }
            document.getElementById("mnum").value = selectedValue;
            </SCRIPT>

'mnum' is the name of the textfield I want to insert value into.

The code may seem fine but the fact is when i try , I have two tables... one containing data for selection and the second table for formatting the placement of my textfields and labels and plain text. So when i click within the second table, it did what I don't want to... by selecting values within 'tr' of the second table. I want it to exclusively focus on the first table called 'catTable'.

So how do I refine the code I put up to focus primarily on a table id called 'catTable' ?

 

[thotheolh]

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 ?

    <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.

 

[joe]

I'm having a bit of a hard time understanding what you're wanting to do. Are you wanting to display a table and then when a user clicks on a row of that table it populates the information from that row into a another location?