如何设置 HtmlTableRow 的高度，使其生成但不显示？

Question

我需要在 HtmlTable 中动态显示行。我认为将 HtmlTableRow 的高度设置为 0 可以解决问题，但事实并非如此。这是我在 code-behind:

中创建行及其 "pieces parts" 的方法

// Row 3
foapalrow3 = new HtmlTableRow();
foapalrow3.ID = "foapalrow3";

var cellColIndex2 = new HtmlTableCell();
cellColIndex2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColIndex2);
var cellColFund2 = new HtmlTableCell();
cellColFund2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColFund2);
var cellColOrg2 = new HtmlTableCell();
cellColOrg2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColOrg2);
var cellColAccount2 = new HtmlTableCell();
cellColAccount2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColAccount2);
var cellColActivity2 = new HtmlTableCell();
cellColActivity2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColActivity2);
var cellColAmount2 = new HtmlTableCell();
cellColAmount2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColAmount2);

boxIndex2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxIndex2foapalrow3"
};
cellColIndex2.Controls.Add(boxIndex2);

boxFund2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxFund2foapalrow3"
};
cellColFund2.Controls.Add(boxFund2);

boxOrganization2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxOrg2foapalrow3"
};
cellColOrg2.Controls.Add(boxOrganization2);

boxAccount2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxAccount2foapalrow3"
};
cellColAccount2.Controls.Add(boxAccount2);

boxActivity2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxActivity2foapalrow3"
};
cellColActivity2.Controls.Add(boxActivity2);

boxAmount2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    ID = "boxAmount2foapalrow3"
};
cellColAmount2.Controls.Add(boxAmount2);
//cellColAmount2.ID = ""; <= Maybe the cells need IDs too, like: ?

foapalHTMLTable.Rows.Add(foapalrow3);
foapalrow3.Height = "0"; // <= does this need something appended, such as "em" or such? Normal height may be 15

...这里是 jQuery 尝试有条件地增加高度以使行可见：

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    if ($('[id$=foapalrow3]').height.not("15")) {
        console.log('reached the foapalrow3 not visible branch');
        $('[id$=foapalrow3]').height(15);
    }
});

不幸的是，该行在 git-go 中是可见的；将高度设置为 0 不会阻止它立即显示 "in all its glory"。我还需要将 HtmlTableCells and/or TextBoxes 的高度设置为 0 吗？或者还需要什么？

注意：我意识到jQuery可能行不通（"height.not"暂时只是猜测），但我需要解决首先是第一个问题（行高未设置为 0，从而有效地使其不可见）。

更新

我像这样创建行后隐藏它们（在 C# code-behind/server-side 代码中）：

        foapalHTMLTable.Rows.Add(foapalrow3);
        foapalrow3.Visible = false;

...并将此放入我的 client-side jQuery:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    if ($('[id$=foapalrow3]').not(":visible")) {
        alert('reached the foapalrow3 not visible branch');
        $('[id$=foapalrow3]').toggle();
    }
    else if ($('[id$=foapalrow4]').not(":visible")) {
        alert('reached the foapalrow4 not visible branch');
        $('[id$=foapalrow4]').slideDown();
    }
});

...但它不起作用 - 隐藏的行永远不会可见（我 do 看到第一个警报 - 实际上两次（我必须两次关闭它陆续)).

更新 2

我注释掉了行设置为不可见（visible = false）。我将其添加到就绪函数中：

$(document).ready(function () {
    alert('The ready function has been reached'); /* This is a "sanity check" so it can be verified that this jQuery script is running/ran */
    $('[id$=foapalrow3]').toggle();
    $('[id$=foapalrow4]').toggle();
});

我确实看到了警报，但切换不会将它们从可见切换为 -in。我也尝试了 .slideUp()，但也没有任何作用。拉维建议"set display:none"；我愿意尝试，但如何以及在哪里？

Answer 1

您可以动态地使用 JQuery toggle() 到 hide/show。或者您可以使用 display:none css 属性（如果您愿意，可以作为 class）。两者都会在后台生成 html 但不会显示在可见页面上。

Answer 2

这（有点）有效，但是很笨拙：

如果我设置的不是 HtmlTableRow 的高度，而是 HtmlTableRow 中元素的高度（TextBoxes/input = 文本）为 0，单击按钮 "add" 那一行（它增加了元素的高度，从而增加了父元素 HtmlTableRow 及其父元素 HtmlTable 的高度。

但是，由于只是 "short" 而不是隐藏，在点击“+”按钮之前，休眠行看起来比垃圾箱更有趣：

我也许可以 "sell" 将此作为一项功能 ("the miniscule height of the sort-of-hidden row indicates that it is available, but not yet usable")，但我对此表示怀疑，真的。

所以我仍然乐于接受有关如何完善这个组合的建议。

我是这样完成的：

C# 代码隐藏（服务器端）：

boxIndex2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH,
    Height = 0,
    ID = "boxIndex2foapalrow3"
};
. . . // similar code for the other elements (where their height is also set to 0) elided for brevity

注意： HtmlTableRow 未设置为不可见 - 如果我这样做，它根本不起作用（行是不可见的，但即使在选择“+”按钮后它仍然保持这种状态。

jQuery客户端：

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    var textboxHeight = 15;
    if ($('[id$=foapalrow3]').not(":visible")) {
    //if (($('[id$=boxIndex2foapalrow3]').height() == 0) {
        alert('reached the foapalrow3 height zilch branch');
        $('[id$=boxIndex2foapalrow3').height(textboxHeight);
        $('[id$=boxFund2foapalrow3').height(textboxHeight);
        $('[id$=boxOrg2foapalrow3').height(textboxHeight);
        $('[id$=boxAccount2foapalrow3').height(textboxHeight);
        $('[id$=boxActivity2foapalrow3').height(textboxHeight);
        $('[id$=boxAmount2foapalrow3').height(textboxHeight);
    }
    . . .
});

注意： 另一个难题是为什么 "if ($('[id$=foapalrow3]').not(":visible"))" 测试 return 为真，因为该行实际上不应该是不可见的...？？？注释掉的测试，应该 return true:

if (($('[id$=boxIndex2foapalrow3]').height() == 0) {

...不（它 return 是错误的）。

???

更新

我能够将 jQuery 改进为：

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    var textboxHeight = 15;
    if ($('[id$=boxIndex2foapalrow3]').height() == 0) {
        $('[id$=boxIndex2foapalrow3').height(textboxHeight);
        $('[id$=boxFund2foapalrow3').height(textboxHeight);
        $('[id$=boxOrg2foapalrow3').height(textboxHeight);
        $('[id$=boxAccount2foapalrow3').height(textboxHeight);
        $('[id$=boxActivity2foapalrow3').height(textboxHeight);
        $('[id$=boxAmount2foapalrow3').height(textboxHeight);
    }
    else if ($('[id$=boxIndex3foapalrow4]').height() == 0) {
        $('[id$=boxIndex3foapalrow4').height(textboxHeight);
        $('[id$=boxFund3foapalrow4').height(textboxHeight);
        $('[id$=boxOrg3foapalrow4').height(textboxHeight);
        $('[id$=boxAccount3foapalrow4').height(textboxHeight);
        $('[id$=boxActivity3foapalrow4').height(textboxHeight);
        $('[id$=boxAmount3foapalrow4').height(textboxHeight);
    }
});

...但它仍然不能正常工作 - 当我单击该按钮时，两行同时被添加。我认为这是因为 jQuery 似乎是运行两次，但为什么要这样做？

HtmlTable 的按钮点击前状态现在是这样的：

更新 3

我终于弄明白了 - 我在页面上有两个相同 Web 部件的实例，这意味着来自两个实例的 jQuery 最终都在 "View Source" 中，因此它运行了两次.通过删除 Web 部件的一个实例，问题得到解决，上面的代码（在 Update 2 中）工作正常。

现在唯一的 "problem" 是在按下“+”按钮之前行没有完全隐藏 - 它们的高度不是很大，但大于 0。

如何设置 HtmlTableRow 的高度，使其生成但不显示？

How can I set the height of an HtmlTableRow so that it will be generated but not display?

c#

jquery

html-table

htmltable-control

更新

更新 2

更新

更新 3