Question

表：

<table id=tblList>
     <thead>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Status</th>
          <th>Action</th>
     </thead>
     <tbody>
          <tr>
               <td>Jane</td>
               <td>Doe</td>
               <td>Pending</td>
               <td><button class="cancelThis">Cancel</button></td>
          </tr>
          <tr>
               <td>John</td>
               <td>Doe</td>
               <td>Cancelled</td>
               <td><button class="cancelThis">Cancel</button></td>
          </tr>
     </tbody>
</table>

和脚本

var search = 'Cancelled';
$('#tblAppointment tr td').filter(function () {
     return $(this).text() == search;
}).parent('tr').css('color', 'red');

使用上面的代码，我设法将包含“已取消”的行的颜色更改为红色

并与此：

$('#tblAppointment tr td').filter(function () {
    return $(this).text() == search;
}).find(".cancelThis").prop("disabled", true);

不起作用。

应为：对于包含字符串“已取消”的每一行，取消按钮都将被禁用。不包含字符串“已取消”的行将不受影响。

TIA。

Answer 1

您可以添加与正在使用的逻辑相同的逻辑，在.parent('tr')之前添加.find(".cancelThis").prop("disabled", true);

$('#tblAppointment tr td').filter(function() {
  return $(this).text() == search;
}).parent('tr').find(".cancelThis").prop("disabled", true);

您可以减少一些代码，

var search = 'Cancelled';
var t = $('#tblAppointment tr td').filter(function() {
  return $(this).text() == search;
}).parent('tr');

t.css('color', 'red');
t.find(".cancelThis").prop("disabled", true);

演示

var search = 'Cancelled';
$('#tblAppointment tr td').filter(function() {
  return $(this).text() == search;
}).parent('tr').css('color', 'red');

$('#tblAppointment tr td').filter(function() {
  return $(this).text() == search;
}).parent('tr').find(".cancelThis").prop("disabled", true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id=tblAppointment>
  <thead>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Status</th>
    <th>Action</th>
  </thead>
  <tbody>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
      <td>Pending</td>
      <td><button class="cancelThis">Cancel</button></td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>Cancelled</td>
      <td><button class="cancelThis">Cancel</button></td>
    </tr>
  </tbody>
</table>

Answer 2

您的初始查询正在获取<td>元素的列表。因此，当您在其上调用find时，您仅在<td>（其中没有.cancelThis）元素内进行搜索。您必须执行以下操作：

$('#tblAppointment tr td').filter(function () {
    return $(this).text() == search;
}).parent('tr').find(".cancelThis").prop("disabled", true);

但是，我能想到您可能要解决的一个问题。如果名字或姓氏是“已取消”怎么办？您的查询也将与此匹配。如果您将类添加为状态<td>，则可以专门搜索它：

<table id='tblAppointment'>
     <thead>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Status</th>
          <th>Action</th>
     </thead>
     <tbody>
          <tr>
               <td>Jane</td>
               <td>Doe</td>
               <td class='status'>Pending</td>
               <td><button class="cancelThis">Cancel</button></td>
          </tr>
          <tr>
               <td>John</td>
               <td>Doe</td>
               <td class='status'>Cancelled</td>
               <td><button class="cancelThis">Cancel</button></td>
          </tr>
     </tbody>
</table>

$('#tblAppointment tr td.status').filter(function () {
    return $(this).text() == search;
}).parent('tr').find(".cancelThis").prop("disabled", true);

这只会查看td.status元素的文本，而不会查看其他元素（例如名字和姓氏）。

jQuery-对于包含禁用字符串按钮的每一行

2 个答案: