How to select the previous sibling of last cell which is not null from table, using JQuery

Question

I have a table with following rows and cells:

<table id='table1'>
  <tr id='row1'>
    <th>index</th>
    <th>Product</th>
    <th>Description</th>
  </tr>
  <tr id='row2' name='row'>
    <td name='index'>1</td>
    <td name='product'>Apples</td>
    <td name='description'>fruits</td>
  </tr>
  <tr id='row3' name='row'>
    <td name='index'>2</td>
    <td name='product'>Bananas</td>
    <td name='description'>fruits</td>
  </tr>
  <tr id='row4' name='row'>
    <td name='index'>3</td>
    <td name='product'>Carrots</td>
    <td name='description'>vegetables</td>
  </tr>
  <tr id='row5' name='row'>
    <td name='index'>4</td>
    <td name='product'></td>
    <td name='description'></td>
  </tr>
</table>

I would like to select the index of the tr which is in this case is the last td and does not have any data under Product Column. I have tried following JQuery function but they do not work: Sibling method

 var lastrow=$('td[name=product]:not(:empty):last ~ [name=index]').html();

and also previous method

var lastrow=$('td[name=product]:not(:empty):last').prev().html();

But I cannot get the index number of last tr which has no data in its Product heading. In other words I am unable to get the td with name=index in the tr which does not have any data in td with name=product. Does anyone know what am I doing wrong or how can I achieve what I am looking for?

i don't get it, you say you are looking for the index of a `tr` but your selector is only looking at `td`s. The sibling of a `td` is going to be another `td`. Are you looking for a `td` or a `tr`? If you want a `tr` its going to be a `parent` of a `td`, not a `sibling` — chiliNUT, Jan 31 '17 at 17:42
@chiliNUT She wants the value in the index cell which comes before the product cell — j08691, Jan 31 '17 at 17:44

score 2 · Accepted Answer · edited Feb 01 '17 at 13:17

Find the not empty cell and select the previous cell from it:

var lastCellBeforeCellWithNoData = $('td[name=product]:not(:empty):last').prev('[name=index]');

console.log(lastCellBeforeCellWithNoData.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table1'>
  <tr id='row1'>
    <th>index</th>
    <th>Product</th>
    <th>Description</th>
  </tr>
  <tr id='row2' name='row'>
    <td name='index'>1</td>
    <td name='product'>Apples</td>
    <td name='description'>fruits</td>
  </tr>
  <tr id='row3' name='row'>
    <td name='index'>2</td>
    <td name='product'>Bananas</td>
    <td name='description'>fruits</td>
  </tr>
  <tr id='row4' name='row'>
    <td name='index'>3</td>
    <td name='product'>Carrots</td>
    <td name='description'>vegetables</td>
  </tr>
  <tr id='row5' name='row'>
    <td name='index'>4</td>
    <td name='product'></td>
    <td name='description'></td>
  </tr>
</table>

Nope it doesn't work either. And besides I am looking at first `td` in the respective `tr` which has no value in its `product=name` ` td`. — Rabia Rana Khan, Jan 31 '17 at 17:54
Edited again - I think I understand what you're looking for now after re-re-reading the question. :) — J. Titus, Jan 31 '17 at 17:59

score 0 · Answer 2 · answered Jan 31 '17 at 18:38

If you want to get the tr index use this

var trIndex = $('td[name=product]:empty').parent().index();

Else if you want to the select the name="index" use this one

var nameIndex = $('td[name=product]:empty').prev();

var trIndex = $('td[name=product]:empty').parent().index();
var nameIndex = $('td[name=product]:empty').prev().text();

console.log('Tr Index->'+trIndex, ', name="index"->'+nameIndex);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table1'>
  <tr id='row1'>
    <th>index</th>
    <th>Product</th>
    <th>Description</th>
  </tr>
  <tr id='row2' name='row'>
    <td name='index'>1</td>
    <td name='product'>Apples</td>
    <td name='description'>fruits</td>
  </tr>
  <tr id='row3' name='row'>
    <td name='index'>2</td>
    <td name='product'>Bananas</td>
    <td name='description'>fruits</td>
  </tr>
  <tr id='row4' name='row'>
    <td name='index'>3</td>
    <td name='product'>Carrots</td>
    <td name='description'>vegetables</td>
  </tr>
  <tr id='row5' name='row'>
    <td name='index'>4</td>
    <td name='product'></td>
    <td name='description'></td>
  </tr>
</table>

score 0 · Answer 3 · edited May 23 '17 at 12:00

After spending some time understanding your question, I think that you are trying to accomplish the following: Returning the last cell's index where the "Product" column is not empty (note please try not to describe it as NULL as it is a very specific term for db storage). And also, I would think that it would be better that if you can do it using other language such as PHP to compare whether the retrieved value is NULL (as NULL is different from empty space "", try to look at the previous discussion here)

However to perform what you would like to achieve I have written a short code as follows.

var tr = $('#table1 tr');
var index = 0;
for(i = tr.length - 1; i > 0; i--) {
  if($(tr[i]).find('td:eq(1)').html() != "")  {
    index = i;
    break;
  }
}
console.log(index);

Basically what it does is that it will find the table's tr and compare line by line to check the 2nd column td:eq(1) to see whether the raw HTML value is empty (sorry but I would like to emphsize again it is not a very good comparison method) and return the value.

I have not optimize the code based on the performance but I think it should be suffice in achieving what you would like to do.

Hope this helps.

Regards.

How to select the previous sibling of last cell which is not null from table, using JQuery

3 Answers3