CODEWITHSUNDEEP
jqueryjquery-selectors
mattematico
mattematico

Reputation: 669

working with a item in a table with jquery

I have a table with items in a row, each item have a button.

I want to click on that button and get the values from my item. Like "You have clicked button1 and the name of you item is item1"

Oh, ofcourse I do this in a repeater and the I have the primarykey as the tr id.

I have a jsfiddle example that my explain more, right now the only working thing is that when I click on the button it shows the buttonname.

Thanks in advance!

Html

<table id="presTable">
        <tr>
            <th></th>
            <th>
                Name
            </th>
            <th>
                Adress
            </th>
        </tr>

        <tr id="Name0" class="itemRow">
            <td>
                <input type="button" class="ss" id="Button0"
                value="Test"/>
            </td>
            <td>
                <span id="nameSpan">Name0</span>
            </td>
            <td>
               <span id="spanAdress">  Adress0</span>
            </td>
        </tr>

        <tr id="Name1" class="itemRow">
            <td>
                <input type="button" class="ss" id="Button1" 
                value="Test"/>
            </td>
            <td>
                <span id="nameSpan">Name1</span>
            </td>
            <td>
               <span id="spanAdress">  Adress1</span>
            </td>
        </tr>

        <tr id="Name2" class="itemRow">
            <td>
                <input type="button" class="ss" id="Button2"
                value="Test"/>
            </td>
            <td>
                <span id="nameSpan">Name2</span>
            </td>
            <td>
               <span id="spanAdress">  Adress2</span>
            </td>
        </tr>
</table>

Jquery

$(function () {        
    $('tr.itemRow > td > input.ss').each(function (row) {
        $(this).click(function (button) {
            alert("You have pushed the button " + $(this).attr("id"));
        });
    });
});

Upvotes: 4

Views: 176

Answers (4)

Ramaraj Karuppusamy
Ramaraj Karuppusamy

Reputation: 2360

Try this one. Please remove 'id' duplications in your html

$(".ss").click(function (evt) {
     var id = $(evt.target).attr("id");
     var parent_id = $(evt.target).parent().attr("id");
     var message = "You have clicked " + id  + " and the name of your item is " + parent_id;
});

Upvotes: 0

archil
archil

Reputation: 39501

You just need closest selector 

$(function() {
    $('tr.itemRow > td > input.ss').click(function() {
        $this = $(this);
        alert("You have pushed at the button " + $this.attr("id") +  
        " name of you item is " + 
        $this.closest('tr').find('span.nameSpan').text());
    });
});​

And for binding to clicks, you do not need to iterate through rows. You can do that by selector tr.itemRow > td > input.ss

You should change your markup so that span has the class nameSpan, because duplicating id s of elements is not allowed

<span class="nameSpan" />

Upvotes: 2

thecodeparadox
thecodeparadox

Reputation: 87073

$(function() {

    $('input.ss', '#presTable').click(function() {
        alert('You have pressed ' + this.id + ' and the name of you item is item ' + $(this).closest('tr').attr('id'));

     // To get value of span

     alert($(this)
                 .parent() // jump to parent td
                 .next('td') // go to next td that has span
                 .find('span') // catch the span
                 .text()); // get the text within span

    });

});

this.id is enough to get the id within click callback scope.

$(this).closest('tr').attr('id') will return id of the tr it belong

read more

.closest()

.parent()

DEMO

Upvotes: 1

Ja͢ck
Ja͢ck

Reputation: 173662

If your ss class is only used for the inputs inside the table, you can simplify your selector:

$('input.ss').on('click', function() {
    var id = $(this).parents('tr').attr('id');
    alert("You pushed button " + id);
});

After that you have to traverse up to the closest tr parent and get its id.

Update

To make sure the input.ss will try to find items outside the table:

$('#presTable').find('input.ss') // etc.

Upvotes: 0

Related Questions