javascript - 如何通过<th>值获取表<td>内容

Question

我的表格在 html 中有很多行，如下所示。

<table id="selectTerminals" size="35">
    <thead>
        <tr>
            <th>ID</th>
            <th>name</th>
            <th>Full Name</th>
            <th>Configure</th>
        </tr>
    </thead>    
    <tbody>
        <tr dir-paginate="item in serverData1 | filter:filterData | itemsPerPage: serverData1.length">
            <td>{{item.id}}</td>
            <td>{{item.abvrName}}</td>
            <td>{{item.name}}</td>
            <td><p><input class="deleteFromList" name="delete" value="Delete " type="submit" ng-click="deleteFromList()"/></p></td>
        </tr>
    </tbody>
</table>

点击删除按钮后，我想在deleteFromList()函数中获取所选项目ID，我需要帮助，因为我不知道该怎么做。

Answer 1

<table id="selectTerminals" size="35">
    <thead>
        <tr>
            <th>ID</th>
            <th>name</th>
            <th>Full Name</th>
            <th>Configure</th>
        </tr>
    </thead>
    <tbody>
        <tr dir-paginate="item in serverData1 | filter:filterData | itemsPerPage: serverData1.length">
            <td>{{item.id}}</td>
            <td>{{item.abvrName}}</td>
            <td>{{item.name}}</td>>
            <!-- Pass `this` to the deleteFromList -->
            <td><p><input class="deleteFromList" name="delete" value="Delete " type="submit" ng-click="deleteFromList(this)"/></p></td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">

/* Assuming your function like this. */
function deleteFromList(ele)
{
    /* You could get the specified id by this. */
    var id = ele.parentNode.parentNode.parentNode.firstElementChild.innerHTML;
    // other logic.
}
</script>

你可以像上面那样做。