如何使用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>

我想选择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的索引号。 换句话说，我无法获得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

如果要获取tr index使用此

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

否则，如果要选择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与空空格“”不同，请尝试查看此处的先前讨论） ）

但是，为了执行您想要实现的目标，我编写了以下简短代码。

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

基本上，它的作用是找到表的tr并逐行比较以检查第二列td:eq(1)以查看原始HTML值是否为空（对不起，我想再次强调一下它不是非常好的比较方法）并返回值。

我尚未根据性能优化代码，但我认为它足以实现您想要的工作。

希望这可以帮助。

问候。