即使在 AJAX 加载时，也会根据复选框状态隐藏 table tr

Question

我想隐藏 table tr 其中tr>td class status-locked , 如果复选框被选中.

我有一个 table 看起来像这样。它使用 Ajax loader 从数据库加载数据，因此如果它的产品超过 4 个，就会有第 2 页 link。如果单击第 2 页 link，它会使用 AJAX 加载数据。 table 仅根据 AJAX 从数据库加载数据获取新数据。

<input type="checkbox" id="product-toggle"  style="border: 1px  #000; background-color: #000;">

<table>
  <tr>
    <td class="status-locked">text</td>
    <td>text</td>
    <td>text</td>
    <td class="status-locked">text</td>
  </tr>
</table>
<button>1</button> <button>2</button>

现在我使用 jquery 来隐藏 tr 和具有 class="status-locked" 的 td 并且它有效。

$(document).ready(function () {
$('#product-toggle').change(function(){
  if($(this).prop("checked")) {
     $('tr:has(td.status-locked)').hide();
  } else {
    $('tr:has(td.status-locked)').show();
  }
});
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
 <body> 
<input type="checkbox" id="product-toggle"  style="border: 1px  #000; background-color: #000;">

    <table>
      <tr>
        <td>hide</td>
        <td>hide</td>
        <td>hide</td>
        <td class="status-locked">hide</td>
      </tr>
      <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
      </tr>
      <tr>
        <td>hide</td>
        <td>hide</td>
        <td>hide</td>
        <td class="status-locked">hide</td>
      </tr>
    </table>
    <button>1</button> <button>2</button>
</body>
</html>

问题是如果 AJAX 从 database 加载新数据并且复选框被选中 tr>td>class="status-locked" 显示?

我希望隐藏带有 td 和 class="status-locked" 的 tr，除非未选中复选框。

此 Jquery 适用于页面刷新但不适用于 AJAX table 加载：

$(function(){        
$('#product-toggle')
  .prop('checked', localStorage.input === 'true')
  .on('change', function() {
     localStorage.input = this.checked;
     if (localStorage.input === 'true') {
       $('tr:has(td.status-locked)').hide();
     } 
  })
  .trigger('change');
});

Answer 1

您没有在选择器中选择 td 元素。尝试使用 $('tr td.status-locked')

$(document).ready(function () {
$('#product-toggle').change(function(){
  if($(this).prop("checked")) {
     $('tr td.status-locked').hide();
  } else {
    $('tr td.status-locked').show();
  }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="checkbox" id="product-toggle">
    <table>
      <tr>
        <td>hide</td>
        <td>hide</td>
        <td>hide</td>
        <td class="status-locked">hide</td>
      </tr>
      <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
      </tr>
      <tr>
        <td>hide</td>
        <td>hide</td>
        <td>hide</td>
        <td class="status-locked">hide</td>
      </tr>
    </table>
    <button>1</button> <button>2</button>

Answer 2

只有当复选框发生变化时，您的功能才会被触发。如果你想解决你的问题，你需要在你的 javascript 中写这样的东西：`

$(document).ready(function () {
    hideShowRow();
    $('#product-toggle').change(function(){
      hideShowRow();
    });
});
function hideShowRow(){
      if($(this).prop("checked")) {
         $('tr:has(td.status-locked)').hide();
      } else {
        $('tr:has(td.status-locked)').show();
      }
}

` ... 这样您就可以随时调用您的函数 hideShowRow()。您可以在 document.ready、ajax.success 或任何您想要的地方调用它

Answer 3

尝试像这样分离逻辑：

$( document ).ready(function () {
    toggleRow();
    $('#product-toggle').on('change', toggleRow);
});

function toggleRow() {
    if( $('#product-toggle').prop("checked") ) {
         $('tr:has(td.status-locked)').hide();
    } else {
        $('tr:has(td.status-locked)').show();
    }
}

然后使用将在每个 ajax 请求后调用的 .ajaxComplete() 方法：

$( document ).ajaxComplete(function() {
  toggleRow();
});

即使在 AJAX 加载时，也会根据复选框状态隐藏 table tr

Hide table tr based in checkbox status even on AJAX load

html

javascript

ajax

jquery

onchange