How to get tables <td> content by <th> value

Question

I have table with many rows in html like this .

<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>

and on click delete button i want to take choosen items ID in deleteFromList() function and i need help cause i dont know how can i do it.

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> 

You can do like above.

Answer 2

I think your html template sould look like this:

<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="button" ng-click="deleteFromList(item)"/></p></td>
    </tr>
</tbody>

And then in your controller you do something like this:

$scope.deleteFromList = function(item) {
    var index = $scope.serverData1.indexOf(item);
    $scope.serverData1 = $scope.serverData1.slice(index, 1);
}