Question

我有这张桌子。我想要的是当点击编辑按钮时，它会向我显示页面加载时的TD索引作为警报。在此先感谢我希望有人帮助我...

如何通过javascript获取html table td cell index？

        <tbody>
            <tr class="row" >
                <td>Yes</td>
                <td class="lalign" >0
                </td>

                <td >Route 3
                </td>

                <td >3
                </td>
                <td id="long">77.22496
                </td>

                <td  id="lat">30.242607
                </td>

                <td >null
                </td>
                <td >3
                </td>

                <td>
                    <input type="button" value="Edit" onclick=""/>
                    <input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"/>

                </td>
            </tr>

        </tbody>
    </table>

Answer 1

FIDDLE DEMO

   <td>
          <input type="button" value="Edit" onclick=""/>
           <input type="button" value="Delete" onclick="deleteRow(this)"/>
   </td>

然后

function deleteRow(obj){

var index= $(obj).closest("td").index();

}

Answer 2

$(SELECTOR).closest("td").index();

Answer 3

<table>
     <tbody>
            <tr class="row" >
                <td>Yes</td>
                <td class="lalign" >0
                </td>

                <td >Route 3
                </td>

                <td >3
                </td>
                <td id="long">77.22496
                </td>

                <td  id="lat">30.242607
                </td>

                <td >null
                </td>
                <td >3
                </td>

                <td>
                    <input type="button" value="Edit" onclick=""/>
                    <input type="button" class="deleteBtn" value="Delete"/>

                </td>
            </tr>

        </tbody>
    </table>

jQuery和GT;

$(".deleteBtn").click( function(){

var index= $(this).closest("td").index();
alert(index);
});

FIddLE

<强>更新

如果您希望当前单元格编号相对于父行：

var indextd= $(this).closest("td").index()+1;
alert(indextd);

如果您想要当前的单元格编号相对于包含的表格：

var indextd= $(this).closest("td").index()+1;
var indextr= $(this).closest("tr").index()+1;

alert(indextd*indextr);

UPDATED FIDDLE

Answer 4

添加id edit编辑按钮<input id="edit" type="button" value="Edit" onclick=""/>然后您可以执行以下操作：

更新了HTML

<table>
    <tbody>
        <tr class="row" >
            <td>Yes</td>
            <td class="lalign" >0
            </td>

            <td >Route 3
            </td>

            <td >3
            </td>
            <td id="long">77.22496
            </td>

            <td  id="lat">30.242607
            </td>

            <td >null
            </td>
            <td >3
            </td>

            <td>
                <input id="edit" type="button" value="Edit" onclick=""/>
                <input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"/>

            </td>
        </tr>

    </tbody>
</table>

JS

$(document).ready(function() {
    $('#edit').click(function(){
       console.log($(this).parent("td").index()); 
    });
});

<强> Demo Link

我希望使用javascript / jquery从表中获取TD索引

4 个答案: