Order of a <td> in a <tr>

Order of a <td> in a <tr>

本文关键字：gt lt tr in td Order of      更新时间：2023-09-26

我试图找到<td>在<tr>中的顺序。我有一个类似的表格结构

<table>
    <tbody>
        <tr>
            <th> Name </th>
            <th> Edit </th>
            <th> Delete </th>
        <tr>
        <tr>
            <td> Tom </td>
            <td> <i class="icon icon_edit"></i> </td>
            <td> <i class="icon icon_remove"></i> </td>
        <tr>
    <tbody>
</table>

我必须使用<i class="icon icon_edit">查找表头<th> Edit </th>。我试图使用parents((找到它，但仍然没有找到任何方法来找到父<td>在行中的位置。

我的逻辑是这样的

parentTD = $('.icon_edit').parents('td')
positionOfparentTD = 2  //Which i dont know how to
correspondingHeader = $("table th:eq(2)")

如何在jQuery中实现这一点？

jQuery有一个index()方法，它是零基的，但eq() 也是 
var parentTD            = $('.icon_edit').closest('td')
var positionOfparentTD  = parentTD.index(); // 1
var correspondingHeader = $("table th:eq("+positionOfparentTD+")")

var tdIndex=$('.icon_edit').parent('td').index();
$("table th:eq('"+ tdIndex+"')");

Fiddle DEMO

尝试使用.index((，我建议您使用.closest((而不是.aparents((，

parentTD = $('.icon_edit').closest('td');
positionOfparentTD = parentTD.index();
correspondingHeader = $("table th:eq("+ positionOfparentTD  +")")

我宁愿在头上使用一个类，因为如果有一天更改列的顺序，您的Javascript可能会忘记更新，因此将无法再工作。

以下是我要做的：

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th class="edit-header">Edit</th>
            <th>Delete</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td>Tom</td>
            <td class="edit"><i class="icon icon_edit"></i></td>
            <td><i class="icon icon_remove"></i></td>
        <tr>
    <tbody>
</table>

然后使用jQuery:

var $editHeader = $('.edit').parents('thead').find('.edit-header');

我在编辑单元上也添加了edit类，因为图标类名可能也会更改。

相关文章：