如何从给定两个类之间的表中获取所有 tr 和 td？

【问题标题】：How to get all the tr and td from a table in between given two classes?如何从给定两个类之间的表中获取所有 tr 和 td？
【发布时间】：2018-03-17 10:16:02
【问题描述】：

我的table 是这种格式：

<table id="permissions" class="sticky-enabled tableheader-processed sticky-table permissions-processed">
    <thead>
        <tr>
            <th>Permission</th>
            <th class="checkbox">Staff</th>
        </tr>
    </thead>
    <tbody>
        <tr class="even">
            <td class="module" id="module-heartbeat_ui" colspan="2">Heartbeat UI</td>
        </tr>
        <tr class="odd">
            <td class="permission">
                <div id="edit-admin-heartbeat-configure" class="form-item form-type-item">
                    Configure heartbeat
                    <div class="description">Manage the heartbeat streams and configuration settings.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-admin-heartbeat-configure">
                    <label class="element-invisible" for="edit-4-admin-heartbeat-configure">Staff: Configure heartbeat </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-admin-heartbeat-configure" name="4[admin heartbeat configure]" value="admin heartbeat configure"><input type="checkbox" class="dummy-checkbox" disabled="disabled"
                        checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>

        <tr class="odd">
            <td class="module" id="module-heartbeat" colspan="2">Heartbeat activity</td>
        </tr>
        <tr class="even">
            <td class="permission">
                <div id="edit-admin-heartbeat-templates" class="form-item form-type-item">
                    Administer heartbeat templates
                    <div class="description">Manage the heartbeat templates.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-admin-heartbeat-templates">
                    <label class="element-invisible" for="edit-4-admin-heartbeat-templates">Staff: Administer heartbeat templates </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-admin-heartbeat-templates" name="4[admin heartbeat templates]" value="admin heartbeat templates"><input type="checkbox" class="dummy-checkbox" disabled="disabled"
                        checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>
        <tr class="odd">
            <td class="permission">
                <div id="edit-admin-heartbeat-delete-all" class="form-item form-type-item">
                    Delete all activity
                    <div class="description">Master permission to delete all activity.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-admin-heartbeat-delete-all">
                    <label class="element-invisible" for="edit-4-admin-heartbeat-delete-all">Staff: Delete all activity </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-admin-heartbeat-delete-all" name="4[admin heartbeat delete all]" value="admin heartbeat delete all"><input type="checkbox" class="dummy-checkbox" disabled="disabled"
                        checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>
        <tr class="even">
            <td class="permission">
                <div id="edit-admin-heartbeat-delete-own" class="form-item form-type-item">
                    Delete own activity
                    <div class="description">Permission for the actor to delete own activity.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-admin-heartbeat-delete-own">
                    <label class="element-invisible" for="edit-4-admin-heartbeat-delete-own">Staff: Delete own activity </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-admin-heartbeat-delete-own" name="4[admin heartbeat delete own]" value="admin heartbeat delete own"><input type="checkbox" class="dummy-checkbox" disabled="disabled"
                        checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>
        <tr class="odd">
            <td class="permission">
                <div id="edit-view-heartbeat-messages" class="form-item form-type-item">
                    View activity
                    <div class="description">Global permission to view heartbeat activity.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-view-heartbeat-messages">
                    <label class="element-invisible" for="edit-4-view-heartbeat-messages">Staff: View activity </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-view-heartbeat-messages" name="4[view heartbeat messages]" value="view heartbeat messages"><input type="checkbox" class="dummy-checkbox" disabled="disabled"
                        checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>
        <tr class="even">
            <td class="permission">
                <div id="edit-access-heartbeat-activity-profiles" class="form-item form-type-item">
                    Access heartbeat activity profiles
                    <div class="description">Permission to see user profiles or links to the user profile.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-access-heartbeat-activity-profiles">
                    <label class="element-invisible" for="edit-4-access-heartbeat-activity-profiles">Staff: Access heartbeat activity profiles </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-access-heartbeat-activity-profiles" name="4[access heartbeat activity profiles]" value="access heartbeat activity profiles"><input type="checkbox" class="dummy-checkbox"
                        disabled="disabled" checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>
        <tr class="odd">
            <td class="permission">
                <div id="edit-view-single-activity-stream" class="form-item form-type-item">
                    View activity in Single activity
                    <div class="description">Stream access: Single activity.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-view-Single-activity-stream">
                    <label class="element-invisible" for="edit-4-view-single-activity-stream">Staff: View activity in Single activity </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-view-single-activity-stream" name="4[view Single activity stream]" value="view Single activity stream"><input type="checkbox" class="dummy-checkbox" disabled="disabled"
                        checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>
        <tr class="even">
            <td class="permission">
                <div id="edit-view-views-activity-stream" class="form-item form-type-item">
                    View activity in Views activity
                    <div class="description">Stream access: Views activity.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-view-Views-activity-stream">
                    <label class="element-invisible" for="edit-4-view-views-activity-stream">Staff: View activity in Views activity </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-view-views-activity-stream" name="4[view Views activity stream]" value="view Views activity stream"><input type="checkbox" class="dummy-checkbox" disabled="disabled"
                        checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>

        <tr class="odd">
            <td class="module" id="module-hide_modules" colspan="2">Hide Modules</td>
        </tr>
        <tr class="odd">
            <td class="permission">
                <div id="edit-edit-webform-components" class="form-item form-type-item">
                    Content authors: access and edit webform components and settings
                    <div class="description">Grants additional access to the webform components and settings to users who can edit the content. Generally an authenticated user permission.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-edit-webform-components">
                    <label class="element-invisible" for="edit-4-edit-webform-components">Staff: Content authors: access and edit webform components and settings </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-edit-webform-components" name="4[edit webform components]" value="edit webform components" checked="checked"><input type="checkbox" class="dummy-checkbox"
                        disabled="disabled" checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>
    </tbody>
</table>

我需要使用 jQuery 在td 的class="module" id="module-heartbeat_ui" 和class="module" id="module-heartbeat" 之间找到表的所有tr。是否有任何简写的 jQuery 代码来获取tr 和td 之间的那些出现。

【问题讨论】：

  • 那么，你想用树叶来确定父母的范围吗？
  • 看起来更像是您只是想获取位于 TR:odd 中的 UI 的值
  • 您是在寻找适用于这一实例的代码还是将其应用于不同的表？如果您只需要此表，那么您不妨简单地获取&lt;tr class="odd"&gt; 的第一个实例
  • 我不认为你能找到一个“干净”的选择器，你必须迭代。
  • @Fallenreaper : 试图获取给定两类 td 之间的所有元素

标签： javascript jquery html-table


【解决方案1】：

听起来你想使用 nextUtil

$('tr:has("td#module-heartbeat_ui")').nextUntil('tr:has("td#module-heartbeat")').addBack().find("td").css("background-color","yellow")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="permissions" class="sticky-enabled tableheader-processed sticky-table permissions-processed">
    <thead>
        <tr>
            <th>Permission</th>
            <th class="checkbox">Staff</th>
        </tr>
    </thead>
    <tbody>
        <tr class="even">
            <td class="module" id="module-heartbeat_ui" colspan="2">Heartbeat UI</td>
        </tr>
        <tr class="odd">
            <td class="permission">
                <div id="edit-admin-heartbeat-configure" class="form-item form-type-item">
                    Configure heartbeat
                    <div class="description">Manage the heartbeat streams and configuration settings.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-admin-heartbeat-configure">
                    <label class="element-invisible" for="edit-4-admin-heartbeat-configure">Staff: Configure heartbeat </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-admin-heartbeat-configure" name="4[admin heartbeat configure]" value="admin heartbeat configure"><input type="checkbox" class="dummy-checkbox" disabled="disabled"
                        checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>

        <tr class="odd">
            <td class="module" id="module-heartbeat" colspan="2">Heartbeat activity</td>
        </tr>
        <tr class="even">
            <td class="permission">
                <div id="edit-admin-heartbeat-templates" class="form-item form-type-item">
                    Administer heartbeat templates
                    <div class="description">Manage the heartbeat templates.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-admin-heartbeat-templates">
                    <label class="element-invisible" for="edit-4-admin-heartbeat-templates">Staff: Administer heartbeat templates </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-admin-heartbeat-templates" name="4[admin heartbeat templates]" value="admin heartbeat templates"><input type="checkbox" class="dummy-checkbox" disabled="disabled"
                        checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>
        <tr class="odd">
            <td class="permission">
                <div id="edit-admin-heartbeat-delete-all" class="form-item form-type-item">
                    Delete all activity
                    <div class="description">Master permission to delete all activity.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-admin-heartbeat-delete-all">
                    <label class="element-invisible" for="edit-4-admin-heartbeat-delete-all">Staff: Delete all activity </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-admin-heartbeat-delete-all" name="4[admin heartbeat delete all]" value="admin heartbeat delete all"><input type="checkbox" class="dummy-checkbox" disabled="disabled"
                        checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>
        <tr class="even">
            <td class="permission">
                <div id="edit-admin-heartbeat-delete-own" class="form-item form-type-item">
                    Delete own activity
                    <div class="description">Permission for the actor to delete own activity.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-admin-heartbeat-delete-own">
                    <label class="element-invisible" for="edit-4-admin-heartbeat-delete-own">Staff: Delete own activity </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-admin-heartbeat-delete-own" name="4[admin heartbeat delete own]" value="admin heartbeat delete own"><input type="checkbox" class="dummy-checkbox" disabled="disabled"
                        checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>
        <tr class="odd">
            <td class="permission">
                <div id="edit-view-heartbeat-messages" class="form-item form-type-item">
                    View activity
                    <div class="description">Global permission to view heartbeat activity.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-view-heartbeat-messages">
                    <label class="element-invisible" for="edit-4-view-heartbeat-messages">Staff: View activity </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-view-heartbeat-messages" name="4[view heartbeat messages]" value="view heartbeat messages"><input type="checkbox" class="dummy-checkbox" disabled="disabled"
                        checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>
        <tr class="even">
            <td class="permission">
                <div id="edit-access-heartbeat-activity-profiles" class="form-item form-type-item">
                    Access heartbeat activity profiles
                    <div class="description">Permission to see user profiles or links to the user profile.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-access-heartbeat-activity-profiles">
                    <label class="element-invisible" for="edit-4-access-heartbeat-activity-profiles">Staff: Access heartbeat activity profiles </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-access-heartbeat-activity-profiles" name="4[access heartbeat activity profiles]" value="access heartbeat activity profiles"><input type="checkbox" class="dummy-checkbox"
                        disabled="disabled" checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>
        <tr class="odd">
            <td class="permission">
                <div id="edit-view-single-activity-stream" class="form-item form-type-item">
                    View activity in Single activity
                    <div class="description">Stream access: Single activity.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-view-Single-activity-stream">
                    <label class="element-invisible" for="edit-4-view-single-activity-stream">Staff: View activity in Single activity </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-view-single-activity-stream" name="4[view Single activity stream]" value="view Single activity stream"><input type="checkbox" class="dummy-checkbox" disabled="disabled"
                        checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>
        <tr class="even">
            <td class="permission">
                <div id="edit-view-views-activity-stream" class="form-item form-type-item">
                    View activity in Views activity
                    <div class="description">Stream access: Views activity.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-view-Views-activity-stream">
                    <label class="element-invisible" for="edit-4-view-views-activity-stream">Staff: View activity in Views activity </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-view-views-activity-stream" name="4[view Views activity stream]" value="view Views activity stream"><input type="checkbox" class="dummy-checkbox" disabled="disabled"
                        checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>

        <tr class="odd">
            <td class="module" id="module-hide_modules" colspan="2">Hide Modules</td>
        </tr>
        <tr class="odd">
            <td class="permission">
                <div id="edit-edit-webform-components" class="form-item form-type-item">
                    Content authors: access and edit webform components and settings
                    <div class="description">Grants additional access to the webform components and settings to users who can edit the content. Generally an authenticated user permission.</div>
                </div>
            </td>
            <td class="checkbox">
                <div class="form-item form-type-checkbox form-item-4-edit-webform-components">
                    <label class="element-invisible" for="edit-4-edit-webform-components">Staff: Content authors: access and edit webform components and settings </label>
                    <input class="rid-4 form-checkbox real-checkbox" type="checkbox" id="edit-4-edit-webform-components" name="4[edit webform components]" value="edit webform components" checked="checked"><input type="checkbox" class="dummy-checkbox"
                        disabled="disabled" checked="checked" title="This permission is inherited from the authenticated user role." style="display: none;">
                </div>
            </td>
        </tr>
    </tbody>
</table>

【讨论】：

  • addBack() 这个函数在 jQuery 旧版本上可用吗？他们从哪个版本推出？
  • 就在文档api.jquery.com/addback 中，它告诉你什么版本。
  • 如果你用的是6岁的1.7，它有andSelf
【解决方案2】：

在 JavaScript 中，您可以获取表格元素 HTML 代码并按 &lt;tr&gt; 然后循环每个tr得到td的

或者使用 jquery 你可以这样：

$('#table_id, .table-class > tbody > tr').each(function(value, index){/*You code here*/});

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2019-09-16
    • 2021-09-14
    • 1970-01-01
    • 1970-01-01
    • 2020-01-03
    • 2013-08-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode