根据第一个单元格内容获取表单元格值

Question

I have a page with multiple dynamic tables , one of the table looks like the below structure

Col1 Col2 Col3
1    One  Two
2    b    15/12/2017
3    a    X
2    W    10/12/2014

HTML

<table id="table1">
<tbody>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr> <td>1</td>
     <td>b</td>
     <td>15/12/2017</td>
</tr>
<tr> <td>2</td>
     <td>b</td>
     <td>15/10/2017</td>
</tr>

<tr> <td>3</td>
     <td>b</td>
     <td>15/09/2017</td>
</tr>
</tbody>
</table>

I would like to know How can I get the cell in col3 with header name based on the value at col1 ?

EX:

I want to find the table by ID and check its first cell for each row, if it equal 2 then get the cell value of col 3 in the same row !

Any help would be fully appreciated

Answer 1

With jQuery it's quite easy; if you've found the cell, get the row, and the third cell in that row;

$('td') // Select all cells
.filter(function() { // Filter the cells
    return $(this).text() == '2';
})
.closest('tr') // get the table row
.find('td') // select all cells in that row
.eq(2) // select the third cell (0-based index)
.text(); // this will output '15/12/2017'

edit I'm in a good mood today, check this little demo; https://jsfiddle.net/a32knb81/ . Just input your search key in the input field an you'll get the value of the third column in that same row.

Answer 2

You can try something with jquery like below snippet.

Update: you can get particular column by table header as well using $('th:contains("col3")').index()

 $(document).ready(function() { $('#myTable').find('tbody td:first-child').each(function() { if ($(this).text() == '2') { console.log($(this).closest('tr').find('td').eq($('th:contains("col3")').index()).text()); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable"> <thead> <th>col1</th> <th>col2</th> <th>col3</th> </thead> <tbody> <tr> <td>1</td> <td>one</td> <td>ONE</td> </tr> <tr> <td>2</td> <td>two</td> <td>TWO</td> </tr> <tr> <td>3</td> <td>three</td> <td>THREE</td> </tr> </tbody> </table>