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 Fiddle demo

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

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

您有多个class属性（您只能拥有一个），每个属性都有一个（未引用的）类名（有效，引用可选但仅，如果只有一个值。）

另外，您正在使用：

var foo = $(evt.target);

在on()方法中，似乎没有迭代器（这是有意义的，因为它一次只能作用于一个元素），所以event-object是您有item，并且没有传递evt，因此选择器是null对象。

以下内容：

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

您从未定义btn变量，因此无法用于查找祖先。

参考文献：

closest()。

Answer 2

为什么不为与该行相关的按钮分配id，而不是使用jQuery代码执行此操作。单击它时，抓取相应列的文本框值，可以使它更简单。此外，分配类和类型的方式也不正确。它们需要用引号括起来。多个类也不需要多个类属性，因此按钮类应为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>

等

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

2 个答案: