4

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"));
        });
    });
});
4

4 に答える 4

2

最も近いセレクターが必要です 

$(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());
    });
});​

また、クリックにバインドするために、行を反復処理する必要はありません。セレクターでそれを行うことができますtr.itemRow > td > input.ss

nameSpan要素の id の複製は許可されていないため、 span が class を持つようにマークアップを変更する必要があります。

<span class="nameSpan" />
于 2012-05-26T07:51:22.903 に答える
1 
$(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コールバック スコープid内を取得するには十分です。click

$(this).closest('tr').attr('id')trそれが属するのIDを返します

続きを読む

.最も近い()

。親（）

デモ

于 2012-05-26T07:49:00.797 に答える
0

これを試してください。HTML内の「id」の重複を削除してください

$(".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;
});
于 2012-05-26T08:00:17.840 に答える
0

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.
于 2012-05-26T07:47:41.203 に答える