CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-tablesiblings
Rabia Rana Khan
Rabia Rana Khan

Reputation: 202

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

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?

Upvotes: 1

Views: 230

Answers (3)

J. Titus
J. Titus

Reputation: 9690

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>

Upvotes: 2

yihyang
yihyang

Reputation: 111

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.

Upvotes: 0

Parvez Rahaman
Parvez Rahaman

Reputation: 4397

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>

Upvotes: 0

Related Questions