Click here to Skip to main content
15,883,828 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Dear Experts,

i have populated some datas in tables and in that table contains 5 columns and many rows...

Here is the below code of data populated in table.

HTML
<table>
<tr>
<td><label> Name 1</label></td>
<td><label> Age 1</label></td>
<td><label> Sex 1</label></td>
<td><label> Adress 1</label></td>
<td><a href ='#' class = 'getval'>Details</a></td>
</tr>

<tr>
<td><label> Name 2</label></td>
<td><label> Age 2</label></td>
<td><label> Sex 2</label></td>
<td><label> Adress 2</label></td>
<td><a href ='#' class = 'getval'>Details</a></td>
</tr>

<tr>
<td><label> Name 3</label></td>
<td><label> Age 3</label></td>
<td><label> Sex 3</label></td>
<td><label> Adress 3</label></td>
<td><a href ='#' class = 'getval'>Details</a></td>
</tr>

<tr>
<td><label> Name 4</label></td>
<td><label> Age 4</label></td>
<td><label> Sex 4</label></td>
<td><label> Adress 4</label></td>
<td><a href ='#' class = 'getval'>Details</a></td>
</tr>

<tr>
<td><label> Name 5</label></td>
<td><label> Age 5</label></td>
<td><label> Sex 5</label></td>
<td><label> Adress 5</label></td>
<td><a href ='#' class = 'getval'>Details</a></td>
</tr>
</table>


I need javascript to get all the values when i click the "Details" link.
I mean when i click the "Details" link then i get the corresponding values (Name, Age,Sex and Adress).

Is there any javascript to get this .. please help me.


Thanks

Dileep
Posted
Updated 29-Sep-12 5:13am
v2
Comments
Sandeep Mewara 29-Sep-12 13:00pm    
Did yu try anything by yourself? Where from you got the above code/page implementation?

1 solution

Step 1. The CSS

CSS
.getval
{
    text-decoration: underline;
    cursor: pointer;
    color: blue;
}


Step 2. the Script
JavaScript
function detailClick(element)
{
    var detailsTd = element;    //.parentNode;
    var detailsTr = detailsTd.parentNode;
    var labelList = detailsTr.getElementsByTagName('label');

    var str = "Name: " + labelList[0].textContent + "\n";
    str += "Age: " + labelList[1].textContent + "\n";
    str += "Sex: " + labelList[2].textContent + "\n";
    str += "Adr: " + labelList[3].textContent + "\n";
    alert(str);
}



Step 3. The HTML
HTML
<table>
    <tbody>
        <tr>
            <td><label> Name 1</label></td>
            <td><label> Age 1</label></td>
            <td><label> Sex 1</label></td>
            <td><label> Adress 1</label></td>
            <td class = 'getval' onclick='detailClick(this);'>Details</td>
        </tr>

        <tr>
            <td><label> Name 2</label></td>
            <td><label> Age 2</label></td>
            <td><label> Sex 2</label></td>
            <td><label> Adress 2</label></td>
            <td class = 'getval' onclick='detailClick(this);'>Details</td>
        </tr>
    </tbody>
</table>
 
Share this answer
 
Comments
dilzz 30-Sep-12 0:17am    
Thanks for ur great answer....... :)
enhzflep 30-Sep-12 0:25am    
You're welcome. :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900