Question

我有一个包含多行和5列的表，其中包含一些数据：

<table>
  <thead>
   ...stuff...
  </thead>
  <tbody>
     <tr>
      <td width="1" class="gui-valign-top">
       .... stuff....
      </td>
      <td>
       <a class="gui-bold" title="Reference / PO box" href="some-url">Reference / PO box</a>
      </td>
      <td width="1">
      .... stuff....
      </td>
      <td width="1">
      .... stuff....
      </td>
      <td width="10%" class="gui-align-right">
        .... stuff....          
      </td>
      <td width="10%" class="gui-align-right">
          .... stuff....           
      </td>
     </tr>
     .... start of new <tr> ....

在任何表格行的第二个单元格内，始终存在一个带有标题的链接。我尝试做的是找到一个特定的标题，如果该标题存在，那么清空该特定行的所有表格单元格** 。问题是我可以找到正确的标题，但我无法清空正确的单元格。如果名称存在，我会尝试给出黑色背景。

到目前为止我的JQUERY：

          $("#gui-wrapper .gui-table td a").filter(function(){
            return $(this).text() == 'Reference / PO box';   
          }).css("background-color", "#1699f0");

这段代码找到了正确的text / td，但是我要做什么来清空所有单元格，但是这个单元格中有文本然后给出黑色背景？

我无法使用id或其他任何内容，因为这是全部自动创建的。

任何人？ THX。

Answer 1

要清空所有该行中的单元格（包括具有特定<a>元素的单元格）：

$("#gui-wrapper .gui-table td a").filter(function(){
    return $(this).text() == 'Reference / PO box';   
}).closest('tr').find('td').empty();

$(".gui-table td a").filter(function(){
    return $(this).text() == 'Reference / PO box';   
}).closest('tr').find('td').empty();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="gui-table">
  <tbody>
     <tr>
      <td width="1" class="gui-valign-top">
       .... stuff....
      </td>
      <td>
       <a class="gui-bold" title="Reference / PO box" href="some-url">Reference / PO box</a>
      </td>
      <td width="1">
      .... stuff....
      </td>
      <td width="1">
      .... stuff....
      </td>
      <td width="10%" class="gui-align-right">
        .... stuff....          
      </td>
      <td width="10%" class="gui-align-right">
          .... stuff....           
      </td>
     </tr>
     <tr>
      <td width="1" class="gui-valign-top">
       .... stuff....
      </td>
      <td>
       <a class="gui-bold" title="a different title" href="some-url">a different title indeed</a>
      </td>
      <td width="1">
      .... stuff....
      </td>
      <td width="1">
      .... stuff....
      </td>
      <td width="10%" class="gui-align-right">
        .... stuff....          
      </td>
      <td width="10%" class="gui-align-right">
          .... stuff....           
      </td>
     </tr>
    </tbody>
  </table>

要清除除包含给定<a>元素的单元格之外的所有单元格：

$("#gui-wrapper .gui-table td a").filter(function(){ return $(this).text() == 'Reference / PO box'; }).closest('td').siblings().empty(); $(".gui-table td a").filter(function(){ return $(this).text() == 'Reference / PO box'; }).closest('td').siblings().empty(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="gui-table"> <tbody> <tr> <td width="1" class="gui-valign-top"> .... stuff.... </td> <td> <a class="gui-bold" title="Reference / PO box" href="some-url">Reference / PO box</a> </td> <td width="1"> .... stuff.... </td> <td width="1"> .... stuff.... </td> <td width="10%" class="gui-align-right"> .... stuff.... </td> <td width="10%" class="gui-align-right"> .... stuff.... </td> </tr> <tr> <td width="1" class="gui-valign-top"> .... stuff.... </td> <td> <a class="gui-bold" title="a different title" href="some-url">a different title indeed</a> </td> <td width="1"> .... stuff.... </td> <td width="1"> .... stuff.... </td> <td width="10%" class="gui-align-right"> .... stuff.... </td> <td width="10%" class="gui-align-right"> .... stuff.... </td> </tr> </tbody> </table>

参考文献：

closest()。

empty()。

find()。

Answer 2

你可以这样做，

$("#gui-wrapper .gui-table td a:contains('Reference / PO box')").closest("td").next() empty();

元素存在时清空单元格

2 个答案: