用于响应引导css的jQuery选择器

我正在使用bootstrap来实现响应用户界面。正常查看页面时，我有一个带按钮的表格。当我按下按钮时，我需要用role=“row”选择最近的tr。我通过以下方法做到了这一点：

var selectedRow = $(this).closest('tr[role="row"]');

当页面进入响应模式时，我的表将获得额外的tr元素。如何使用role=“row”选择第一个父级tr，以便选择器在这两种情况下都能工作

正常页面：

        <tbody>
        <tr role="row" class="odd parent">
            <td tabindex="0"></td>
            <td>Name1</td>
            <td class="sorting_1">Event1</td>
            <td>Something1</td>
            <td>YES</td>
            <td>
                <button class="editDetail"><span class="glyphicon glyphicon-pencil text-primary"></span></button></td>
        </tr>
        <tr role="row" class="odd parent">
            <td tabindex="1"></td>
            <td>Name2</td>
            <td class="sorting_1">Event2</td>
            <td>Something2</td>
            <td>YES</td>
            <td>
                <button class="editDetail"><span class="glyphicon glyphicon-pencil text-primary"></span></button></td>
        </tr>
    </tbody>

名称1
事件1
有些事
对
姓名2
事件2
什么
对

响应页面

        <tbody>
        <tr role="row" class="odd parent">
            <td tabindex="0"></td>
            <td>Name1</td>
            <td class="sorting_1">Event1</td>
            <td>Something1</td>

        </tr>
        <tr class="child">
            <td class="child" colspan="6">
            <ul data-dtr-index="0">
                <li data-dtr-index="4">
                    <span class="dtr-data">YES</span>
                </li>
                <li data-dtr-index="5">
                    <span class="dtr-title"></span> 
                    <span class="dtr-data">
                    <button class="editDetail"><span class="glyphicon glyphicon-pencil text-primary"></span></button>
                    </span>
                </li>
            </ul>
            </td>
        </tr>
        <tr role="row" class="odd parent">
            <td tabindex="0"></td>
            <td>Name2</td>
            <td class="sorting_1">Event2</td>
            <td>Something2</td>

        </tr>
        <tr class="child">
            <td class="child" colspan="6">
            <ul data-dtr-index="0">
                <li data-dtr-index="4">
                    <span class="dtr-data">YES</span>
                </li>
                <li data-dtr-index="5">
                    <span class="dtr-title"></span> 
                    <span class="dtr-data">
                    <button class="editDetail"><span class="glyphicon glyphicon-pencil text-primary"></span></button>
                    </span>
                </li>
            </ul>
            </td>
        </tr>
    </tbody>

名称1
事件1
有些事


对




姓名2
事件2
什么


对

根据您提供的内容，尝试替换以下内容：

var selectedRow = $(this).closest('tr[role="row"]');

据此：

var selectedRow = $(this).parents('tr[role="row"]');

---

根据您提供的内容，尝试替换以下内容：

var selectedRow = $(this).closest('tr[role="row"]');

据此：

var selectedRow = $(this).parents('tr[role="row"]');

---

在您的场景中，您可以使用以下代码获得角色为“row”的所需tr

如果您不想使用此代码，还有一种更简单的方法。 您可以使用window.width获取屏幕的当前分辨率，并根据当前分辨率编写相应的代码

---

希望这将对您有所帮助。

在您的场景中，您可以使用下面的代码获得角色为“row”的所需tr

如果您不想使用此代码，还有一种更简单的方法。 您可以使用window.width获取屏幕的当前分辨率，并根据当前分辨率编写相应的代码

---

希望这能对您有所帮助。

您好，谢谢您的回复，很遗憾，我在响应模式下遇到错误。请注意有两个按钮，一个隐藏，另一个显示在新元素中。这是我在单击时开始的级别，由于某些原因，我无法选择带有目标标记的top tr元素。编辑：现在才意识到我不需要父元素，但是前面的tr元素带有role=“row”您能在JSFIDLE中提供场景吗？这将更容易帮助：）嗨，谢谢你的回复，不幸的是，我在响应模式下遇到了错误。请注意有两个按钮，一个隐藏，另一个显示在新元素中。这是我在单击时开始的级别，由于某些原因，我无法选择带有目标标记的top tr元素。编辑：现在才意识到我不需要父元素，但是前面的tr元素带有role=“row”您能在JSFIDLE中提供场景吗？你的具体要求是什么？您想从具有角色“行”的最近/最近tr获取数据，还是想从触发按钮单击事件的当前tr获取数据？我需要来自具有角色“行”的最近tr（响应案例中的前二个元素）的数据您的确切要求是什么？您想从具有角色“行”的最近/最近tr获取数据，还是想从触发按钮单击事件的当前tr获取数据？我需要来自具有角色“行”的最近tr（响应案例中的前二个元素）的数据