4

我有一个表格，里面有一行项目，每个项目都有一个按钮。

我想单击该按钮并从我的项目中获取值。就像“您点击了 button1 并且您的项目名称是 item1”

哦，当然我在中继器中执行此操作，并且我将主键作为 tr id。

我有一个jsfiddle示例，我对此进行了更多解释，现在唯一有效的是，当我单击按钮时，它会显示按钮名称。

提前致谢！

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

您应该更改标记，以便 span 具有类nameSpan，因为不允许复制元素的 id

<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

阅读更多

.closest()

.parent()

演示

于 2012-05-26T07:49:00.797 回答
0

如果您的ss类仅用于表内的输入，您可以简化选择器：

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

之后，您必须遍历到最近的tr父级并获取其 ID。

更新

为确保input.ss将尝试查找表外的项目：

$('#presTable').find('input.ss') // etc.
于 2012-05-26T07:47:41.203 回答
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 回答