【问题标题】:hide the whole column隐藏整列
【发布时间】:2013-04-25 07:16:45
【问题描述】:

隐藏它所在的列。我已创建。

我的桌子在下面;

<table id="tester" border='1'>
<tbody>
    <tr>
        <td>test1</td>
        <td>test2</td>
        <td>test3</td>
    </tr>
    <tr>
        <td>test1</td>
        <td></td>
        <td>test3</td>
    </tr>
    <tr>
        <td>test1</td>
        <td>test2</td>
        <td>test3</td>
    </tr>
    <tr>
        <td>test1</td>
        <td>test2</td>
        <td>test3</td>
    </tr>
    <tr>
        <td>test1</td>
        <td>test2</td>
        <td>test3</td>
    </tr>
</tbody>
</table>

我正在尝试使用的 Jquery 在下面;

任何帮助将不胜感激。

【问题讨论】:

  • 迭代 td 并使用 $('td').text() 将其文本提取到 var 中,然后检查该 var 长度。 > 0
  • 可能是 $('td:nth-child(2)').style.display="none";有效(我不知道)
  • 似乎 jsfiddle 示例将“纯 js”作为选择,并且在我添加 jquery 后,它确实隐藏了一列。还有更多吗?

标签: javascript jquery html


【解决方案1】:

试试这个:

function hidecol2() {
    var cell = $('#tester > tbody > tr:eq(1) > td:eq(1)');
    if (cell.text() == '') cell.parent().parent().children().children(':nth-child(2)').hide;
};

【讨论】:

  • 其实if (cell.is(':empty') == '')可能被认为是更好的风格。
  • 对不起 - 我的错。试试这个:if (cell.text() == '') cell.parent().parent().children().children(':nth-child(2)').hide;
【解决方案2】:

我认为您正在寻找。

$.each($('table > tbody > tr'), function(){
  if($(this).find('td:empty').length>0){
    // You can hide
    $(this).hide();

    // Or Remove
    $(this).remove();

    // Or Fadeout and remove
    $(this).fadeOut(250, function(){$(this).remove();});
  }
});

【讨论】:

  • 对不起,我误解了你的问题。您需要在 yxour jsfiddle 中包含 jQuery 并使用我放入 answear 的代码
【解决方案3】:

若要在其中一个单元格为空时隐藏整列,请使用以下命令:

$.each($('td:empty'), function(){
  $('td:nth-child(' + ($(this).index() + 1) + ')').hide();
});

jsFiddle

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-11-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-19
    • 2020-08-23
    • 2014-11-28
    相关资源
    最近更新 更多