Question

我正在尝试获取tr中所有输入的信息，我使用此jquery来测试如何执行此操作，但我无法让它工作。

<table>
<tr id="" class="line">
    <input id='' class='' type='hidden' name='rpiid' value='123' />
    <input id='' class='' type='hidden' name='sensor_id' value='1' />
    <input id='' class='' type='hidden' name='when' value='2014-02-24 05:00:03' />
    <td>Home
        <BR />2014-02-24
        <BR />05:00:03</td>
    <td>
        <input id='' class='val_displayed' type='text' name='val' value='761' />
    </td>
    <td>
        <input id='' class='' type='checkbox' name='train' value='True' checked />
    </td>
    <td>
        <input id='' class='' type='checkbox' name='valid' value='True' />
    </td>
    <td>
        <button id='update' class='' type='' name='button' value='update' src=''>update</button>
        <button id='delete' class='' type='' name='button' value='delete' src=''>delete</button>
    </td>
    <td id="resultFromGet"></td>
</tr>
<tr id="" class="line">
    <input id='' class='' type='hidden' name='rpiid' value='456' />
    <input id='' class='' type='hidden' name='sensor_id' value='2' />
    <input id='' class='' type='hidden' name='when' value='2014-02-24 04:00:03' />
    <td>Home
        <BR />2014-02-24
        <BR />04:00:03</td>
    <td>
        <input id='' class='val_displayed' type='text' name='val' value='456' />
    </td>
    <td>
        <input id='' class='' type='checkbox' name='train' value='True' />
    </td>
    <td>
        <input id='' class='' type='checkbox' name='valid' value='True' />
    </td>
    <td>
        <button id='update' class='' type='' name='button' value='update' src=''>update</button>
        <button id='delete' class='' type='' name='button' value='delete' src=''>delete</button>
    </td>
    <td id="resultFromGet"></td>
</tr>
</table>

这是我的jquery代码：

$(document).ready(function () {
    var button;
    var line;
    var inputs;
    $('button#update').click(function () {
        button = $(this);
        line = button.closest('.line');
        inputs = line.find('input');
        inputs.each(function (id, item) {
            alert(item.attr('name'));
        });
    });
});

我真的不明白出了什么问题，如何将var输入内的所有内容打印到屏幕以进行调试。我也试过了：

alert(JSON.stringify(inputs, null, 4));

但它没有给我任何东西:(。

Answer 1

元素的ID必须是唯一的，您可以使用按钮值

$(document).ready(function () {
    $('button[value=update]').click(function () {
        var button = $(this);
        var line = button.closest('.line');
        var inputs = line.find('input');
        inputs.each(function (id, item) {
            alert($(item).attr('name'));
        });
    });
});

演示：Fiddle

或代替ID设置update / delete作为按钮的类名，并将其用作选择器

<button class='update' type='' name='button' value='update' src=''>update</button>
<button class='delete' type='' name='button' value='delete' src=''>delete</button>

然后

$('button.update').click(function () {
    ...
})

演示：Fiddle

同样在每个循环中，item是一个dom元素，而不是jQuery对象，所以你必须使用$(item).attr()

Answer 2

试试这个：

alert($(item).attr('name'));

而不是：

alert(item.attr('name'));

Answer 3

首先使用class而不是id

<button class='update' type='' name='button' value='update' src=''>update</button>

$(document).ready(function () {
    var button;
    var line;
    var inputs;
    $('.update').click(function () {      
        button = $(this);
        line = $(this).parents('tr')

        inputs = line.find('input');
        inputs.each(function (id, item) {
            alert($(item).attr('name'));
        });
    });
});

示例http://jsfiddle.net/kR9W4/2/

如何让tr内的所有输入都无法正常工作

3 个答案: