javascript - 如何在此表格布局中查找文本框值？

Question

我想colB在同一行上单击按钮时获取文本框的值。但是，我的选择器没有到达那里。此外，它必须在 IE8 中工作。

小提琴

<table>
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>colA</th>
            <th>colB</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> <a class=btn class=foo>foo</a>

            </td>
            <td>
                <input type=text value=1 />
            </td>
            <td>
                <input type=text value=2 />
            </td>
        </tr>
        <tr>
            <td> <a class=btn class=foo>foo</a>

            </td>
            <td>
                <input type=text value=3 />
            </td>
            <td>
                <input type=text value=4 />
            </td>
        </tr>
    </tbody>
</table>


$('.foo').on('click', function (item, evt) {
    var foo = $(evt.target);
    var tr = btn.parent().parent();
    var col3 = tr.children(':eq(2)');
    var txt = col3.find('input');
    alert(txt.val());
});

Answer 1

我建议：

$('.foo').on('click', function () {
    var btn = $(this),
        tr = btn.closest('tr'),
        col3 = tr.find('td').eq(2),
        txt = col3.find('input');

    alert(txt.val());
});

JS 小提琴演示。

请注意，这需要一些更正的 HTML：

<td>
    <a class='btn foo'>foo</a>    
</td>

你有多个class属性（你只能有一个），每个属性都有一个（不带引号的）类名（这是有效的，引号是可选的，但前提是只有一个值）。

此外，您正在使用：

var foo = $(evt.target);

在该on()方法中似乎没有迭代器（这是有道理的，因为它一次只能作用于一个元素），所以事件对象在你拥有的地方item，并且没有evt被传递，所以选择器是一个null目的。

并具有以下内容：

var tr = btn.parent().parent();

您从未定义btn变量，因此它不能用于查找祖先。

参考：

• closest().

Answer 2

与其使用 jQuery 代码执行此操作，不如为与该行相关的按钮分配一个 id。当它被点击时，抓住相应列的文本框值，它会变得更简单。此外，您分配类和类型的方式也不正确。它们需要用引号引起来。多个类也不需要多个类属性，所以按钮类应该是class="btn foo"，而不是class="btn" class="foo"。

例子：

<tbody>
    <tr>
        <td> <a id="col1" class="btn foo">foo</a>

        </td>
        <td>
            <input id="col1_input1" type="text" value=1 />
        </td>
        <td>
            <input id="col1_input2" type="text" value=2 />
        </td>
    </tr>

ETC