How to find cell text by row index by jQuery

Question

I have two rows of an html table:

<table id="mytable">
<tbody>
<tr><td rowspan="2">Row text</td><td>first cell</td><td>second cell</td><td>third cell</td></tr>
<tr>
   <td><input type="text" value="" /></td>
   <td><input type="text" value="" /></td>
   <td><input type="text" value="" /></td>
</tr>
</tbody>
</table>

I have to get the text of respective cell from first row while click on any input field of second row. As for example, if any user clicks on first input field of second row, 'first cell' should be get by jQuery. I am trying to achieve this as below:

$('#mytable tbody tr td input[type="text"]').click( function(){
   var thisRow = $(this).closest('tr').index();
   var thisCell = $(this).closest('td').index();
   var upRow = thisRow-1;
   var firstCellText = upRow.find('td:eq(thiscell+1)').text();
alert(firstCellText);
});

but the text is not getting as expected. How to get the text?

Pranav C Balan · Accepted Answer · 2015-10-12T07:09:05.717

You need to concatenate the string using +. Also you can select previous tr using prev(), no need to select it using index.

$('#mytable tbody tr td input[type="text"]').click(function() {
  var thisRow = $(this).closest('tr');
  var thisCell = $(this).closest('td').index();
  var firstCellText = thisRow.prev().find('td:eq(' + (thisCell + 1) + ')').text();
  alert(firstCellText);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="mytable">
  <tbody>
    <tr>
      <td rowspan="2">Row text</td>
      <td>first cell</td>
      <td>second cell</td>
      <td>third cell</td>
    </tr>
    <tr>
      <td>
        <input type="text" value="" />
      </td>
      <td>
        <input type="text" value="" />
      </td>
      <td>
        <input type="text" value="" />
      </td>
    </tr>
  </tbody>
</table>

UPDATE : If you want to get text from first row always then use, :first to get first row. ( Suggested by @arunbahal )

var $row = $('#mytable tbody tr:first');
$('#mytable tbody tr td input[type="text"]').click(function() {
  var firstCellText = $row.find('td:eq(' + ($(this).closest('td').index() + 1) + ')').text();
  alert(firstCellText);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="mytable">
  <tbody>
    <tr>
      <td rowspan="2">Row text</td>
      <td>first cell</td>
      <td>second cell</td>
      <td>third cell</td>
    </tr>
    <tr>
      <td>
        <input type="text" value="" />
      </td>
      <td>
        <input type="text" value="" />
      </td>
      <td>
        <input type="text" value="" />
      </td>
    </tr>
  </tbody>
</table>

$('input[type="text"]').click(function(){ console.log(2342); var index = $('#mytable tr:eq(1) > td').index($(this).parent("td")); console.log(index); console.log($("#mytable tr:first").find("td:eq("+(index+1)+")").text()); }); — arun bahal, Oct 12 '15 at 06:22
@Pranav your code is working only for first cell, but what about if click on third or forth cell? — Abdullah Mamun-Ur- Rashid, Oct 12 '15 at 06:52
@AbdullahMamun-Ur-Rashid, I just wrote as per your html mark up. You can tweek the code little bit if you want for different row by chaning tr:first to tr:eq(index) — arun bahal, Oct 12 '15 at 07:10

score 0 · Answer 2 · answered Oct 12 '15 at 06:27

Please try the bellow code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){

$('#mytable tbody tr td input[type="text"]').click( function(){
 var thisCell = $(this).closest('td').index();
 var celltext = $(this).closest('tr').prev().find("td:eq("+thisCell+")").text();
 alert(celltext);
});

});
</script>

<table id="mytable">
<tbody>
<tr>
 <td>first cell</td>
 <td>second cell</td>
 <td>third cell</td>
</tr>
<tr>
   <td><input type="text" value="" id="1"/></td>
   <td><input type="text" value="" id="2"/></td>
   <td><input type="text" value="" /></td>
</tr>
</tbody>
</table>

How to find cell text by row index by jQuery

2 Answers2