CODEWITHSUNDEEP
c#javascriptjqueryasp.net-mvchtml-helper
Sharon Watinsan
Sharon Watinsan

Reputation: 9850

Display all the values of a table row in a Jquery Alert

I have a table, with 3 columns. the last column is a link when i click on that link i need the values of the particular row to be displayed as an alert.

<table border="1">
    <tr>
        <th>
            id
            </th>
        <th>
            name
        </th>
          <th> 
            Occupation
        </th>
        <th>
            click the link
        </th>
    </tr>

@foreach (var i in Model.allHuman)
{
    <tr>
        <td>
            @Html.DisplayFor(mo => i.id)
        </td>
        <td>
            @Html.DisplayFor(mo => i.name)
        </td>
         <td>
            @Html.DisplayFor(mo => i.occupation)
        </td>
        <td>
            <a href='' id='ppl' name='ppl' class='humanclass'> display </a>
        </td>

When the user clicks on the link, an alert will be displayed with the content of that particuar row. The content should have the format ID followed by NAME and OCCUPATION.

JQuery method :

  $(function () {
        $('.humanclass').click(function () {
            alert( ?????????? );   // How to display ID, NAME and OCCUPATION of the ROW          
        });
    });

Upvotes: 0

Views: 1385

Answers (2)

Ryan George
Ryan George

Reputation: 186

It is possible to use the jQuery parent function to get the context of the current row that you clicked.

$('.humanclass').click(function () {
    var rowContext = $(this).parent('tr');
    var id = $("td:nth-child(0)", rowContext).val();
    var name = $("td:nth-child(1)", rowContext).val();
    var occupation = $("td:nth-child(2)", rowContext).val();
    alert(id+' '+name+' '+occupation);
});

Upvotes: 2

AliRıza Adıyahşi
AliRıza Adıyahşi

Reputation: 15866

one of possible solutions : add data attribute to link like this:

<a href='' id='ppl' name='ppl' class='humanclass' data-id='@(i.id)' data-name='@(i.name)' data-occupation='@(i.occupation)' "> display </a>

and get it in jquery function

$(function () {
    $('.humanclass').click(function () {
        alert($(this).data("id"), $(this).data("name"), $(this).data("occupation"));  
    });
});

Upvotes: 2

Related Questions