a的顺序

时间:2014-05-12 09:33:38

标签: javascript jquery html

我试图找到<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>

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

我的逻辑是这样的

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

我如何在jQuery中实现它?

4 个答案:

答案 0 :(得分:3)

jQuery有index()方法,它基于零,但eq()

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

答案 1 :(得分:1)

var tdIndex=$('.icon_edit').parent('td').index();

$("table th:eq('"+ tdIndex+"')");

Fiddle DEMO

答案 2 :(得分:1)

尝试使用.index()我建议您使用.closest()代替.parents()

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

答案 3 :(得分:0)

我宁愿在标题上使用一个类,因为如果你某天更改列的顺序,你的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类,因为图标类名称也可能会更改。