使用 jQuery 修改 table 行

Question

我有一个小 table，我想用一些 jQuery 进行修改。我无法更改静态 HTML 上的 classes，所以这一切都需要通过 jQuery 完成。我想看看带有 class=x 的 td 是否显示“48 小时保持”，然后带有 class=y 的 td 是否更改为 Unavilable。我不知道如何排除不同 tr 中的事物。

<table>
  <tr>
    <td class="x">48 Hour Hold</td>
    <td class="y">Available</td>
  </tr>
  <tr>
    <td class="x">Reference Desk</td>
    <td class="y">Available</td>
  </tr>
</table>

$(document).ready(function(){
  if($(".x:contains(48 Hour Hold)")){
    $(".y:contains(Available)").text('Unavailable');
  };
})

结果最终应该是这样的：

<table>
  <tr>
    <td class="x">48 Hour Hold</td>
    <td class="y">Unavailable</td>
  </tr>
  <tr>
    <td class="x">Reference Desk</td>
    <td class="y">Available</td>
  </tr>
</table>

Answer 1

你不需要 if 条件，你可以 select 所有包含给定字符串的 .x 元素然后修改 text() next('.y') 元素，像这样：

$('.x:contains("48 Hour Hold")').next('.y').text('Unavailable');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="x">48 Hour Hold</td>
    <td class="y">Available</td>
  </tr>
  <tr>
    <td class="x">Reference Desk</td>
    <td class="y">Available</td>
  </tr>
  <tr>
    <td class="x">48 Hour Hold</td>
    <td class="y">Available</td>
  </tr>
</table>

使用 jQuery 修改 table 行

Modifying table rows with jQuery

jquery

html

siblings