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

Question

I need to dynamically display rows in an HtmlTable. I thought setting the height of the HtmlTableRow to 0 would do the trick, but it doesn't. Here's how I create the row and its "pieces parts" in the code-behind:

// 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

...and here is the jQuery to try to conditionally increase the height to make the row visible:

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

Unfortunately, the row is visible from the git-go; setting the height to 0 doesn't prevent it from displaying "in all its glory" right away. Do I also need to set the heights of the HtmlTableCells and/or TextBoxes to 0? Or what else is needed?

Note: I realize that the jQuery probably will not work (the "height.not" is just a guess for now), but I need to solve the first problem first (that the row height is not being set to 0 and thus effectively making it invisible).

UPDATE

I hide the rows after creating them like so (in the C# code-behind/server-side code):

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

...and have this in my 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();
    }
});

...but it does not work - the invisiblized rows are never made visible (I do see the first alert - twice, in fact (I have to dismiss it twice in succession)).

UPDATE 2

I commented out the setting of the rows to invisible (visible = false). I added this to the ready function:

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

I do see the alert, but toggle does not toggle them from visible to -in. I also tried .slideUp(), and that also did nothing. Ravi suggests to "set display:none"; I'm willing to try that, but just how, and where?

Answer 1

You could use JQuery toggle() to hide/show dynamically. Or you could use display:none css property (as a class if you wish to). Both will generate html at the background but not show on the visible page.

Answer 2

This (sort of) works, but is kludgy:

If I set not the height of the HtmlTableRow, but the height of the elements in the HtmlTableRow (TextBoxes/input = text) to 0, clicking the button does "add" that row (it increases the height of the elements, thus increasing the height of the parent, the HtmlTableRow, and its parent, the HtmlTable.

But, due to just being "short" instead of hidden, that dormant row looks funkier than a dumpster prior to hitting the "+" button:

I might be able to "sell" this as a feature ("the miniscule height of the sort-of-hidden row indicates that it is available, but not yet usable") but I doubt it, really.

So I'm still open to suggestions on how to polish this kludgification.

I'm accomplishing this like so:

C# code-behind (server side):

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

NOTE: the HtmlTableRow is not being set to invisible - if I do that, it doesn't work at all (the row is invisible, but it stays that way even after selecting the "+" button).

jQuery client-side:

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

NOTE: Another conundrum is why the "if ($('[id$=foapalrow3]').not(":visible"))" test returns true, as the row should not really be invisible...??? The commented-out test, which should return true:

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

...does not (it returns false).

???

UPDATE

I was able to improve the jQuery to this:

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

...but it still isn't working quite right - when I click the button, both rows are added at the same time. I think it's because the jQuery seems to be running twice, but why is it doing that?

The pre-button-clicking state of the HtmlTable is now this:

UPDATE 3

I finally figured it out - I had two instances of the same Web Part on the page and that means that the jQuery from both instances ends up in the "View Source" and thus it runs twice. By removing one of the instances of the Web Part, the problem was solved, and code directly above (in Update 2) works fine.

The only "problem" now is that the rows aren't completely hidden prior to mashing the "+" button - their height is not great, but it is greater than 0.