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

时间:2016-12-12 12:13:40

标签: javascript jquery html mysql html-table

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

基本上,如果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>

我希望我已经足够清楚了。如果您不理解并需要澄清,请告诉我。

3 个答案:

答案 0 :(得分:0)

您可以使用值为0的index td来使用.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>

答案 1 :(得分:0)

可能会帮助你,租赁尝试一次。

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

祝你好运:)

答案 2 :(得分:0)

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

以下内容会在td(内容区块)中为您提供lasttbody个孩子的 $('#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>
if(this.options.targetElement) {
  var parentElem = angular.element((this.options.targetElement));
  var childElem = $compile(this.container)($scope)[0];
  $timeout( function(){
        parentElem.append(childElem);
  }, 0, false );
  }