Как выбрать предыдущие родственную последнюю ячейку, которая не является нулевой из таблицы, с помощью JQuery

Question

У меня есть таблица со следующими строками и клетками:

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

Я хотел бы, чтобы выбрать index в tr, который в этом случае последний td и не имеет данных под товарной колонкой. Я попытался следующие функции JQuery, но они не работают: метод Sibling

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

, а также предыдущий метод

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

Но я не могу получить номер индекса последнего tr, у которого нет данных в заголовке продукта. Другими словами, я не могу получить td с name=index в tr, у которого нет данных в td с name=product. Кто-нибудь знает, что я делаю неправильно, или как я могу достичь того, что я ищу?

Answer 1

Найти не пустую ячейку и выберите предыдущую ячейку из него:

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>

Answer 2

Если вы хотите, чтобы использовать trindex это

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

Else если вы хотите выбрать name="index" использовать этот

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>

Answer 3

Пробыв некоторое время на понимание вашего вопроса, я думаю, что вы пытаетесь сделать следующее: Возвращаясь индексом последней ячейки, где в колонке «Продукт» не является пустой (примечание попробуйте не описывать его как NULL, поскольку это очень специфический термин для хранения db). Кроме того, я бы подумал, что было бы лучше, если бы вы могли сделать это с использованием другого языка, такого как PHP, чтобы сравнить, является ли полученное значение NULL (поскольку NULL отличается от пустого пространства), попробуйте посмотреть предыдущее обсуждение here)

Однако для выполнения того, что вы хотели бы достичь, я написал короткий код следующим образом.

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

В основном то, что он делает то, что он найдет Т.Р. таблицы и сравнить построчно проверить 2-й столбец td:eq(1) видеть, пуст ли исходное значение HTML (извините, но я хотел бы еще раз это emphsize не очень хороший метод сравнения) и вернуть значение.

Я не оптимизировал код, основанный на производительности, но я думаю, этого должно быть достаточно для достижения того, что вы хотели бы сделать.

Надеюсь, это поможет.

С уважением.