Question

我想隐藏 tr＆gt; tr类为td的表status-locked，如果复选框为检查

我有一张看起来像这样的桌子。它使用Ajax加载器从数据库加载数据，因此如果它超过4个产品，则会有第2页链接。如果单击第2页链接，则使用AJAX加载数据。该表仅根据来自数据库的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 td class="status-locked"并且有效。

＆＃13;

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

＆＃13;

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

＆＃13;

问题是指AJAX从database加载新数据并选中tr＆gt; td＆gt; class="status-locked"复选框示出了？

我希望隐藏tr td class="status-locked" $(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'); });，除非取消选中复选框。

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

implementation 'com.google.guava:guava:23.0-android'

Answer 1

尝试将逻辑分开：

$( 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();
});

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

仅当复选框更改时才会触发您的功能。如果你想解决你的问题，你需要在你的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或任何您想要的地方调用它

即使在AJAX加载时也隐藏基于复选框状态的表tr

3 个答案: