jQuery .hide 方法在 td 上不起作用？答案

【问题标题】：jQuery .hide method not working on td?jQuery .hide 方法在 td 上不起作用？
【发布时间】：2013-11-07 16:01:57
【问题描述】：

我正在使用 Javascript 和 jQuery 创建一个表格，我希望它在您单击表格第一行上的 td 时，然后该列中的其余 td 下拉。让我尝试通过显示我的代码来解释它。这是我的 Javascript：

function createTr (heights) { //heights is just an array of words
    for (var h=0; h<heights.length; h++) { 
        var theTr = $("<tr>", { id: "rowNumber" + h});
        for (var i=0; i<heights.length-3; i++) { 
            theTr.append($("<td>", { "class": "row"+h + " column"+i,
                                     html: heights[h][i]
                                   }));
        }
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table (#newTable), which is written in the html
    }
}

这基本上创建了td，每个td都类似于这种格式

<td class="rowh columni">

参数'heights'只是一个数组，例如可以是

var heights = [['headerOne', 'headerTwo'], ['someTd', 'anotherTd'],];

它会使用这些词创建一个表，headerOne 和 headerTwo 将在第一行，someTd 和 anotherTd 将在第二行。

我想隐藏所有 td，除了 .row0 上的 td。当我尝试在除 .row0 之外的所有行中隐藏 td 时，它不起作用。我尝试的是放

$('.row0').hide();

在 $(document).ready( 函数之前，函数之后和函数内部，它们都没有工作。我基本上只是像这样调用 createTr 函数

$(document).ready( function() {
    createTr(heights);
});

知道为什么这些行没有隐藏吗？

如何使它在创建表后隐藏？我尝试将它作为我的 Javascript 代码的最后一部分，但仍然无法正常工作。我认为它会导致表变慢，即使 .hide() 函数是 Javascript 代码的最后一部分，它仍然会在 .hide() 代码之前执行。我如何制作它以便 .hide() 方法等待直到创建表？

【问题讨论】：

你在创建表之前写hide()吗？
@Krishna 如何让它在创建表格后隐藏？我尝试将它作为我的 javascript 代码的最后一部分，但仍然无法正常工作。我认为它会导致表格变慢，即使 .hide() 函数是 javascript 代码的最后一部分，它仍然会在 .hide() 代码之前执行。我如何才能使 .hide( ) 方法等到表创建完成？
试着写在$('#newTable').append(theTr);这行之后？
好主意，完美运行！谢谢。
可以尝试visibility:hidden 而不是 hide().. 这仍然会占用 DOM 中的空间，因为 hide() 不会出现在 DOM 中。看看我的回答。

标签： javascript jquery html html-table show-hide

【解决方案1】：

我想给你看一些代码。就这样吧。

一个。这将确保表格在隐藏顶行之前存在。

$('#newTable').append(theTr);
$('.row0').hide();

b. visibility:hidden 将占用 DOM 中的空间，而 hide() 不会占用 DOM 中的空间（尽管两者都存在于 DOM 中）

$('#newTable').append(theTr);
$('.row0').css('visibility', 'hidden'); //might not destroy your css.

【讨论】：