如何使用 JQuery select 来自 table 的最后一个不为空的单元格的前一个兄弟节点

Question

我有一个 table 包含以下行和单元格：

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

我想 select tr 的 index，在本例中是最后一个 td，并且在 Product Column 下没有任何数据。我尝试使用 JQuery 函数，但它们不起作用： 兄弟方法

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

还有 以前的方法

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

但我无法获得最后一个 tr 的索引号，它的产品标题中没有数据。换句话说，我无法在 tr 中获得 td 和 name=index，而 td 和 name=product 中没有任何数据。有谁知道我做错了什么或者我怎样才能实现我想要的？

Answer 1

找到非空单元格和select它的前一个单元格：

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

如果你想获得 tr index 使用这个

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

否则如果你想要 select 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

在花一些时间理解您的问题后，我认为您正在尝试完成以下操作：返回 "Product" 列不为空的最后一个单元格的索引（注意请尽量不要将其描述为 NULL因为它是数据库存储的一个非常具体的术语）。而且，我认为如果您可以使用 PHP 等其他语言来比较检索到的值是否为 NULL 会更好（因为 NULL 不同于空 space ""，试着看看之前的讨论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);

基本上它所做的是找到 table 的 tr 并逐行比较以检查第二列 td:eq(1) 以查看原始 HTML 值是否为空（对不起，但我想再次强调这不是一个很好的比较方法）和 return 值。

我没有根据性能优化代码，但我认为它应该足以实现你想做的事情。

希望这对您有所帮助。

此致。

如何使用 JQuery select 来自 table 的最后一个不为空的单元格的前一个兄弟节点

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

html

javascript

jquery

html-table

siblings