Question

我有这个html表：

<table class="relativeTable">
    <tbody>
        <tr class="relativeTableTR">
            <td class="relativeTableTD">
                <script type="text/javascript">
                    ...
                </script>
            </td>
        </tr>
        <tr class="relativeTableTR">
            <td class="relativeTableTD">
                <div>
                    <div>
                        <label for="12">Name</label>
                    </div>
                    <input id="12" type="text"/>
                </div>
            </td>
        </tr>
        <tr class="relativeTableTR">
            <td class="relativeTableTD">
                <div>
                    <div>
                        <label for="12">Name</label>
                    </div>
                    <textarea rows="4" cols="30" id="te"></textarea>
                </div>
            </td>
        </tr>
        <tr class="relativeTableTR">
            <td class="relativeTableTD">
                <div>
                    <div>
                        <label>
                            Radiobtns
                        </label>
                    </div>
                    <table class="input-list radio-buttons">
                        <tbody>
                            <tr>
                                <td>
                                    <label>
                                        <input id="Radio1" type="radio" value="[no]~[no]">
                                    </label>
                                </td>
                                <td>
                                    <label>
                                        <span>nei</span>
                                    </label>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

如何迭代表中的所有行（tr），并找到包含input或textarea元素的单元格。匹配的单元格（td）应标有样式=＆＃39; padding-top：2px;＆＃39;

在我的例子中，应该选择最后3个relativeTableTDs（而不是第一个）。

这样的事情：

$("tr.relativeTableTR").each(function()
{
    TODO: find td of class relativeTableTD containing input or textarea, and set style...
});

Answer 1

您只需要:has和css。 :has接受一个选择器，只选择指定了选择器的元素，在本例中为:input，处理textarea和input等。

$('.relativeTableTD:has(:input)').css('padding-top', '2px');

此外，如果要设置更多样式，则只需将它们放在一个类中，然后使用.addClass('className')将其添加到集合中

使用jQuery，迭代html表中的行，在单元格上设置class

1 个答案: