Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript jQuery
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.
 
<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 29-Sep-12 5:04am
dilzz1.2K
Edited 29-Sep-12 5:13am
v2
Comments
Sandeep Mewara at 29-Sep-12 13:00pm
   
Did yu try anything by yourself? Where from you got the above code/page implementation?

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Step 1. The CSS
 
.getval
{
    text-decoration: underline;
    cursor: pointer;
    color: blue;
}
 
Step 2. the Script
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
    <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>
  Permalink  
Comments
dilzz at 30-Sep-12 0:17am
   
Thanks for ur great answer....... :)
enhzflep at 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)



Advertise | Privacy | Mobile
Web02 | 2.8.141022.2 | Last Updated 29 Sep 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100