Click here to Skip to main content
12,406,795 members (60,272 online)
Rate this:
 
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.3K
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

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web01 | 2.8.160730.1 | Last Updated 29 Sep 2012
Copyright © CodeProject, 1999-2016
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