Как выбрать последнюю ячейку из таблицы, которая не является пустым, используя 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'></td> 
    <td name='product'></td> 
    <td name='description'></td> 
    </tr> 
</table> 

Мне нужно, чтобы выбрать значение для последнего td с индексом Name = ' ', который не является нулевым. Любой может понять, как это можно сделать.

Answer 1

Используйте следующий селектор:

$('td[name=index]:not(:empty):last') 

Answer 2

Для чисто образовательных целей, здесь не является версия JQuery:

function getLastNonEmptyCell(tableSelector) { 
    //Find parent table by selector 
    var table = document.querySelector(tableSelector) 
    //Return null if we can't find the table 
    if(!table){ 
    return null; 
    } 
    var cells = table.querySelectorAll("td") 
    var lastNonEmptyCell = null; 
    //Iterate each cell in the table 
    //We can just overwrite lastNonEmptyCell since it's a synchronous operation and the return value will be the lowest item in the DOM 
    cells.forEach(function(cell) { 
    //!! is used so it's so if it is not null, undefined, "", 0, false 
    //This could be changed so it's just cell.innerText.trim() !== "" 
    if (!!cell.innerText) { 
     lastNonEmptyCell = cell; 
    } 
    }) 

    return lastNonEmptyCell; 
} 

var cell = getLastNonEmptyCell("#table1") 

Редактировать

Как @squint предположили, что это может быть сделано гораздо более сугубо:

function lastNonEmptyCell(tableSelector) { 
    //Since we want the last cell that has content, we get the last-child where it's not empty. This returns the last row. 
    var row = document.querySelectorAll(tableSelector + " td:not(:empty):last-child") 
    //Just grabbing the last cell using the index 
    return row[row.length - 1] 
}