根据最后一行的所有字段中的内容隐藏表格列 - jQuery

Question

我希望有人可以帮助我解决我面临的问题。正如标题所述，我很难根据每列最后一行的所有字段中的数据隐藏表中的列。

基本上，如果 0 放置在任何列的最后一行，我需要隐藏该列。如果它包含另一个数字，则应显示该列。

从 Stack Overflow 上一个非常有帮助的人那里修改脚本排。另外，它会删除我想要的最后一行，而不是列。

这是我目前拥有的代码：

$('button').on('click', function () {
    var $rowsNo = $('#mytable tbody tr:last').filter(function () {
       return $.trim($(this).find('td').eq(2).text()) === "0"
    }).toggle();
});

这是 HTML：

<button>Hide/Show</button>
<table id="mytable">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>ActiveYN</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>12345</td>
            <td>0</td>
        </tr>
        <tr>
            <td>Orange</td>
            <td>67890</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Mango</td>
            <td>456745</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

我希望我已经足够清楚了。如果您不明白并需要澄清，请告诉我。

Answer 1

可能对你有帮助，租一次试试。

$(document).ready(function() {

$('#mytable tbody tr:last').children('td').each(function(index,event) {
  if ($(event).text() == 0) {
    $('#mytable tr').each(function(indexIn,eventIn) {
        $(eventIn).children('td').eq(index).css('display','none');
        $(eventIn).children('th').eq(index).css('display','none');
    });
  } 
 }); 
});

祝你好运:)

Answer 2

您可以使用td 的index 其值为0 使用.eq() 获取表格每一行中的所有单元格

var trs = $('#mytable tbody tr');
var trh = $('#mytable thead tr');
$('#mytable tbody tr:last td').each(function(index) {
    if (+$.trim($(this).text()) === 0) {
        trs.find('td:eq(' + index + ')').toggle();
        trh.find('th:eq(' + index + ')').toggle();
    }
});

$('button').on('click', function() {
  var trs = $('#mytable tbody tr');
  var trh = $('#mytable thead tr');
  $('#mytable tbody tr:last td').each(function(index) {
    if (+$.trim($(this).text()) === 0) {
      trs.find('td:eq(' + index + ')').toggle();
      trh.find('th:eq(' + index + ')').toggle();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Hide/Show</button>
<table id="mytable">
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>ActiveYN</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>12345</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>67890</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Mango</td>
      <td>456745</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

Answer 3

您需要检查tbody 的最后一行，并确定包含0 的那一列的index，然后在tbody 和thead 中隐藏整个column，如下所示，

以下将为您提供last roq 在tbody 中的子td（内容块）

 $('#mytable tbody tr:last').children('td')

以下将为您提供header

 $('#mytable thead tr').eq(0).children('th')

    $(document).ready(function() {
    
    $('#mytable tbody tr:last').children('td').each(function(index,event) {
      if ($(this).text() == 0) {
        $('#mytable tbody tr').each(function(indexIn,eventIn) {
            $(this).children('td').eq(index).css('display','none');
        });
    
        //also hide to headers
        $('#mytable thead tr').eq(0).children('th').eq(index).css('display','none');
      } 
     }); 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Hide/Show</button>
<table id="mytable">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>ActiveYN</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>12345</td>
            <td>0</td>
        </tr>
        <tr>
            <td>Orange</td>
            <td>67890</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Mango</td>
            <td>456745</td>
            <td>0</td>
        </tr>
    </tbody>
</table>