如何从给定两个类之间的表中获取所有 tr 和 td？
Posted
技术标签:
【中文标题】如何从给定两个类之间的表中获取所有 tr 和 td？【英文标题】：How to get all the tr and td from a table in between given two classes? 【发布时间】：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 的值 您是在寻找适用于这一实例的代码还是将其应用于不同的表？如果您只需要此表，那么您不妨简单地获取<tr class="odd"> 的第一个实例
我不认为你能找到一个“干净”的选择器，你必须迭代。
@Fallenreaper : 试图获取给定两类 td 之间的所有元素
【参考方案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 代码并按
<tr>
然后循环每个tr得到td的
或者使用 jquery 你可以这样：
$('#table_id, .table-class > tbody > tr').each(function(value, index)/*You code here*/);
【讨论】：
以上是关于如何从给定两个类之间的表中获取所有 tr 和 td？的主要内容，如果未能解决你的问题，请参考以下文章