如何使用JQuery从表中选择非空的最后一个单元格的前一个兄弟(How to select the previous sibling of last cell which is not null fr

编程入门行业动态更新时间:2024-10-17 02:57:40

如何使用JQuery从表中选择非空的最后一个单元格的前一个兄弟(How to select the previous sibling of last cell which is not null from table, using JQuery)

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

<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的td ，而td中没有任何数据，其中name=product 。有谁知道我做错了什么，或者我怎样才能实现我想要的？

I have a table with following rows and cells:

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?

最满意答案

找到非空单元格并从中选择前一个单元格：

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

更多推荐

本文发布于:2023-08-05 05:37:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1428131.html