Search code examples
javascriptc#jqueryhtml-tablehtmltable-control

How can I show a formerly hidden HtmlTableRow via jQuery?

I have an HtmlTable with four rows. The first two (a "column header" row and a regular data row) display always. If the user selects a "+" button, another one should be added, and then another (four rows max).

The two "dormant" rows are created in C# but are initially "hidden" by setting their heigh to 0 (that's the intent, anyway):

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

Note: This is just one of the six "textboxes" in the HtmlTableRow; all of them have their height set to 0.

This partially works:

enter image description here

As you can see, the third and fourth rows are short, but not invisible/hidden. Clicking the "+" button does get them to go to their full height:

enter image description here

...and selecting the "+" button again "inflates" the last foreshortened row:

enter image description here

The jQuery I use for this is:

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

So how can I get these rows to not show at all prior to selecting the "add a row" ("+") button?

I have tried everything I can think of to have the two rows "start out life" on the Web Part invisible and then programmatically visiblize them.

I've tried:

Setting their visible property to false (C# code-behind) and then using various client-side/jQuery code to get them to display. I've tried the following jQuery (JavaScript?) methods:

.toggle()
.show()
.slidedown()

...like so:

/* This is supposed to make the rows visible, but is not yet working... */
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    if ($('[id$=foapalrow3]').not(":visible")) {
        alert('reached the foapalrow3 not visible branch');
        //$('[id$=foapalrow3]').slideDown();
        //$('[id$=foapalrow3]').toggle();
        $('[id$=foapalrow3]').show();
    }
    else if ($('[id$=foapalrow4]').not(":visible")) {
        alert('reached the foapalrow4 not visible branch');
        $('[id$=foapalrow4]').slideDown();
    }
});

...but none of these work. I do see with the code above the "reached the foapalrow3 not visible branch" alert.

So, do I need to go down a completely different path, such as making these separate one-row tables, and making the tables visible? That is, clicking the "+" button makes the table with the second data row (third row overall) visible, clicking the button again makes the third data row (fourth row overall) visible? Or how?

UPDATE

At the request/suggestion of jmoreno, here is the HTML, as seen via "View Source":

<button id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_btnAddFoapalRow" type="button">+</button>
    <table border="2">
        <tr>
            <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label">Index</span></td>
            <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Fund</span></td>
            <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Organization</span></td>
            <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Account</span></td>
            <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Activity</span></td>
            <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Amount</span></td>
        </tr>
        <tr>
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl130" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl132" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl134" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl136" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl138" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl140" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
        </tr>
        <tr id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_foapalrow3">
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxIndex2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxIndex2foapalrow3" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxFund2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxFund2foapalrow3" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
             <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxOrg2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxOrg2foapalrow3" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
             <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAccount2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAccount2foapalrow3" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
             <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxActivity2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxActivity2foapalrow3" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAmount2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAmount2foapalrow3" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
        </tr>
        <tr id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_foapalrow4">
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxIndex3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxIndex3foapalrow4" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxFund3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxFund3foapalrow4" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxOrg3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxOrg3foapalrow4" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAccount3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAccount3foapalrow4" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxActivity3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxActivity3foapalrow4" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAmount3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAmount3foapalrow4" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
        </tr>
    </table>

...and here is how it is all (the HtmlTable and its rows and cells and contents) created in the server-side C#:

private void GenerateSection5()
{
    HtmlTable tblSection5 = null;

    var headerLabel = new Label
    {
        CssClass = "dplatypus-webform-field-label",
        Text = "<h2>FOAPAL / Payment Amount Information</h2>"
    };
    this.Controls.Add(headerLabel);

    AddVerticalSpace();

    tblSection5 = GetSection5Table();
    if (null != tblSection5)
    {
        this.Controls.Add(tblSection5);
    }

    AddVerticalSpace();
    var totalLabel = new Label
    {
        CssClass = "dplatypus-webform-field-label",
        Text = "Total: "
    };
    this.Controls.Add(totalLabel);
    boxSection5Total = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input"
    };
    this.Controls.Add(boxSection5Total);

    AddVerticalSpace();
}

private HtmlTable GetSection5Table()
{
    const int TEXTBOX_WIDTH = 88;
    const String CELL_WIDTH = "88px";
    foapalHTMLTable = new HtmlTable();
    foapalHTMLTable.Border = 2;

    // Create Row 1
    var row1 = new HtmlTableRow();

    var cellColTitle1 = new HtmlTableCell();
    cellColTitle1.Width = CELL_WIDTH;
    cellColTitle1.Style.Add("text-align", "center");
    row1.Cells.Add(cellColTitle1);
    var cellColTitle2 = new HtmlTableCell();
    cellColTitle2.Width = CELL_WIDTH;
    cellColTitle2.Style.Add("text-align", "center");
    row1.Cells.Add(cellColTitle2);
    var cellColTitle3 = new HtmlTableCell();
    cellColTitle3.Width = CELL_WIDTH;
    cellColTitle3.Style.Add("text-align", "center");
    row1.Cells.Add(cellColTitle3);
    var cellColTitle4 = new HtmlTableCell();
    cellColTitle4.Width = CELL_WIDTH;
    cellColTitle4.Style.Add("text-align", "center");
    row1.Cells.Add(cellColTitle4);
    var cellColTitle5 = new HtmlTableCell();
    cellColTitle5.Width = CELL_WIDTH;
    cellColTitle5.Style.Add("text-align", "center");
    row1.Cells.Add(cellColTitle5);
    var cellColTitle6 = new HtmlTableCell();
    cellColTitle6.Width = CELL_WIDTH;
    cellColTitle6.Style.Add("text-align", "center");
    row1.Cells.Add(cellColTitle6);

    var indexStr = new Label
    {
        CssClass = "dplatypus-webform-field-label",
        Text = "Index"
    };
    cellColTitle1.Controls.Add(indexStr);
    var fundStr = new Label
    {
        CssClass = "dplatypus-webform-field-label",
        Text = "Fund"
    };
    fundStr.Style.Add("text-align", "center");
    cellColTitle2.Controls.Add(fundStr);
    var orgStr = new Label
    {
        CssClass = "dplatypus-webform-field-label",
        Text = "Organization"
    };
    orgStr.Style.Add("text-align", "center");
    cellColTitle3.Controls.Add(orgStr);
    var accountStr = new Label
    {
        CssClass = "dplatypus-webform-field-label",
        Text = "Account"
    };
    accountStr.Style.Add("text-align", "center");
    cellColTitle4.Controls.Add(accountStr);
    var activityStr = new Label
    {
        CssClass = "dplatypus-webform-field-label",
        Text = "Activity"
    };
    activityStr.Style.Add("text-align", "center");
    cellColTitle5.Controls.Add(activityStr);
    var amountStr = new Label
    {
        CssClass = "dplatypus-webform-field-label",
        Text = "Amount"
    };
    amountStr.Style.Add("text-align", "center");
    cellColTitle6.Controls.Add(amountStr);
    foapalHTMLTable.Rows.Add(row1);

    btnAddFoapalRow = new HtmlButton();
    btnAddFoapalRow.Attributes["type"] = "button";
    btnAddFoapalRow.InnerHtml = "+"; 
    btnAddFoapalRow.ID = "btnAddFoapalRow";
    this.Controls.Add(btnAddFoapalRow);

    // Create row 2
    foapalrow2 = new HtmlTableRow();

    var cellColIndex1 = new HtmlTableCell();
    cellColIndex1.Width = CELL_WIDTH;
    foapalrow2.Cells.Add(cellColIndex1);
    var cellColFund1 = new HtmlTableCell();
    cellColFund1.Width = CELL_WIDTH;
    foapalrow2.Cells.Add(cellColFund1);
    var cellColOrg1 = new HtmlTableCell();
    cellColOrg1.Width = CELL_WIDTH;
    foapalrow2.Cells.Add(cellColOrg1);
    var cellColAccount1 = new HtmlTableCell();
    cellColAccount1.Width = CELL_WIDTH;
    foapalrow2.Cells.Add(cellColAccount1);
    var cellColActivity1 = new HtmlTableCell();
    cellColActivity1.Width = CELL_WIDTH;
    foapalrow2.Cells.Add(cellColActivity1);
    var cellColAmount1 = new HtmlTableCell();
    cellColAmount1.Width = CELL_WIDTH;
    foapalrow2.Cells.Add(cellColAmount1);

    boxIndex1 = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input",
        Width = TEXTBOX_WIDTH
    };
    cellColIndex1.Controls.Add(boxIndex1);
    boxFund1 = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input",
        Width = TEXTBOX_WIDTH
    };
    cellColFund1.Controls.Add(boxFund1);
    boxOrganization1 = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input",
        Width = TEXTBOX_WIDTH
    };
    cellColOrg1.Controls.Add(boxOrganization1);
    boxAccount1 = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input",
        Width = TEXTBOX_WIDTH
    };
    cellColAccount1.Controls.Add(boxAccount1);
    boxActivity1 = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input",
        Width = TEXTBOX_WIDTH
    };
    cellColActivity1.Controls.Add(boxActivity1);
    boxAmount1 = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input",
        Width = TEXTBOX_WIDTH
    };
    cellColAmount1.Controls.Add(boxAmount1);

    foapalHTMLTable.Rows.Add(foapalrow2);

    // 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,
        Height = 0,
        ID = "boxIndex2foapalrow3"
    };
    cellColIndex2.Controls.Add(boxIndex2);

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

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

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

    boxActivity2 = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input",
        Width = TEXTBOX_WIDTH,
        Height = 0,
        //Visible = false, <= this does work
        ID = "boxActivity2foapalrow3"
    };
    cellColActivity2.Controls.Add(boxActivity2);

    boxAmount2 = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input",
        Width = TEXTBOX_WIDTH,
        Height = 0,
        ID = "boxAmount2foapalrow3"
    };
    cellColAmount2.Controls.Add(boxAmount2);
    foapalHTMLTable.Rows.Add(foapalrow3);

    // Row 4
    foapalrow4 = new HtmlTableRow();
    foapalrow4.ID = "foapalrow4";

    var cellColIndex3 = new HtmlTableCell();
    cellColIndex3.Width = CELL_WIDTH;
    foapalrow4.Cells.Add(cellColIndex3);
    var cellColFund3 = new HtmlTableCell();
    cellColFund3.Width = CELL_WIDTH;
    foapalrow4.Cells.Add(cellColFund3);
    var cellColOrg3 = new HtmlTableCell();
    cellColOrg3.Width = CELL_WIDTH;
    foapalrow4.Cells.Add(cellColOrg3);
    var cellColAccount3 = new HtmlTableCell();
    cellColAccount3.Width = CELL_WIDTH;
    foapalrow4.Cells.Add(cellColAccount3);
    var cellColActivity3 = new HtmlTableCell();
    cellColActivity3.Width = CELL_WIDTH;
    foapalrow4.Cells.Add(cellColActivity3);
    var cellColAmount3 = new HtmlTableCell();
    cellColAmount3.Width = CELL_WIDTH;
    foapalrow4.Cells.Add(cellColAmount3);

    boxIndex3 = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input",
        Height = 0,
        Width = TEXTBOX_WIDTH,
        ID = "boxIndex3foapalrow4"
    };
    cellColIndex3.Controls.Add(boxIndex3);

    boxFund3 = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input",
        Width = TEXTBOX_WIDTH,
        Height = 0,
        ID = "boxFund3foapalrow4"
    };
    cellColFund3.Controls.Add(boxFund3);

    boxOrganization3 = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input",
        Width = TEXTBOX_WIDTH,
        Height = 0,
        ID = "boxOrg3foapalrow4"
    };
    cellColOrg3.Controls.Add(boxOrganization3);

    boxAccount3 = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input",
        Width = TEXTBOX_WIDTH,
        Height = 0,
        ID = "boxAccount3foapalrow4"
    };
    cellColAccount3.Controls.Add(boxAccount3);

    boxActivity3 = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input",
        Width = TEXTBOX_WIDTH,
        Height = 0,
        ID = "boxActivity3foapalrow4"
    };
    cellColActivity3.Controls.Add(boxActivity3);

    boxAmount3 = new TextBox()
    {
        CssClass = "dplatypus-webform-field-input",
        Width = TEXTBOX_WIDTH,
        Height = 0,
        ID = "boxAmount3foapalrow4"
    };
    cellColAmount3.Controls.Add(boxAmount3);

    foapalHTMLTable.Rows.Add(foapalrow4);

    // Add more rows if necessary (up to 6, if that's the limit? Or create a method that will add another one, no matter how many are required)

    return foapalHTMLTable;
}

UPDATE 2

@Jon P: your code definitely and demonstrably works, as I see in your runnable example. However, my implementation of it is still not working. I added this code to the project's *.ascx file.

CSS

<style>
/* Hide the FOAPAL rows */
.inputTable tr:nth-child(n + 3) {display:none;} 
/* Standardize input width */
.inputTable input[type="text"] {width: 88px;}
</style>

jQuery

$(".expander").click(function () {
    alert("expander click entered - remove this alert after seeing it");
    $('.inputTable').find('tr:hidden:first').show();
});

However, I do not see the alert when clicking the button, although I added that class ("expander") to the "+" button like so:

C#

btnAddFoapalRow = new HtmlButton();
btnAddFoapalRow.Attributes["type"] = "button";
btnAddFoapalRow.InnerHtml = "+"; 
btnAddFoapalRow.ID = "btnAddFoapalRow";
btnAddFoapalRow.Attributes["class"] = "expander"; // <= This is how to do it, right?

So, I added this:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    alert("btnAddFoapalRow click entered - remove this alert after seeing it");
    $('.inputTable').find('tr:hidden:first').show();
});

...and set the last two (rows 3 and 4) to invisible like so:

foapalrow3.Visible = false;
. . .
foapalrow4.Visible = false;

...but, although I do start off with only one row visible now, the additional rows are not expanded/added/visiblized when mashing the "+" button; do I need to, instead of setting visible to false, set the Attribute "display" to "none", or...???

NOTE: I have set the table to use the "inputTable" class like so:

foapalHTMLTable = new HtmlTable();
foapalHTMLTable.Attributes["class"] = "inputTable";

Both classes are appearing in the rendered HTML ("View Source") like so:

<button id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_btnAddFoapalRow" type="button" class="expander">  
+</button><table border="2" class="inputTable">

...so I don't know what the problem is. Textboxes for the last row (second) that is supposed to be visible are added like this:

boxAmount1 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH
};
cellColAmount1.Controls.Add(boxAmount1);

...whereas those that are meant to be "invisible" are like so (setting Height to 0, which only partially works):

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

The rendered HTML for the table is of this ilk:

<table border="2" class="inputTable">
                        <tr>
                            <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label">Index</span></td>
                            <td width="88px" style="text-align:center;"><span class="dplatypus-
webform-field-label" style="text-align:center;">Fund</span></td>

UPDATE 3

Attempting to rectify matters this way:

//foapalrow3.Visible = false;
foapalrow3.Attributes["display"] = "none";
. . .
//foapalrow4.Visible = false;
foapalrow4.Attributes["display"] = "none";

...also doesn't work (that takes me back to the orginal appearance of the table - first two rows normal, last two visible but "height-challenged").

UPDATE 4

I even tried this:

(a) Add an ID to the table:

foapalHTMLTable.ID = "foapalhtmltable";

(b) Locate the table and act on it when the "+" button is mashed:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    alert("btnAddFoapalRow click entered - remove this alert after seeing it");
    //$('.inputTable').find('tr:hidden:first').show();
    $('[id$=foapalhtmltable]').find('tr:hidden:first').show();
});

...but, ALAS! Even though I'm presumably hiding the rows like so:

foapalrow3.Attributes["display"] = "none";
foapalrow4.Attributes["display"] = "none";

...(as previously noted), it still doesn't work. Do I need "border-collapse" (see o.k.w's answer hyar)?

UPDATE 5

I do note that there is no "display:none" in the "View Source" for "foapalrow3" or "foapalrow4" - why the Heckle and Jeckle not, when I'm setting it in code like so:

foapalrow3.Attributes["display"] = "none";
foapalrow4.Attributes["display"] = "none";

?

Solution

  • You can do all this client side. Build your table in it's entirety server-side and don't do anything fancy to it .

    Use CSS to hide all but the first 2 rows:

    .inputTable tr:nth-child(n + 3) {display:none;}

    Now use jQuery to show the first hidden row (I've used click as a force of habit, feel free to use on):

    $(".expander").click(function(){
    $('.inputTable').find('tr:hidden:first').slideDown();
});

    Note I have given the button a class of expander and table a class of inputTable

    Example using your html:

    $(".expander").click(function(){
    $('.inputTable').find('tr:hidden:first').show();
});
    /* Hide the rows */
.inputTable tr:nth-child(n + 3) {display:none;} 
/* Standardize input width */
.inputTable input[type="text"] {width: 88px;}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_btnAddFoapalRow" type="button" class="expander">+</button>
<table border="2" class="inputTable">
                        <tr>
                            <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label">Index</span></td>
                            <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Fund</span></td>
                            <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Organization</span></td>
                            <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Account</span></td>
                            <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Activity</span></td>
                            <td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Amount</span></td>
                        </tr>
                        <tr>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl130" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl132" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl134" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl136" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl138" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl140" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
                        </tr>
                        <tr id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_foapalrow3">
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxIndex2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxIndex2foapalrow3" class="dplatypus-webform-field-input"  /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxFund2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxFund2foapalrow3" class="dplatypus-webform-field-input"  /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxOrg2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxOrg2foapalrow3" class="dplatypus-webform-field-input"  /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAccount2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAccount2foapalrow3" class="dplatypus-webform-field-input" /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxActivity2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxActivity2foapalrow3" class="dplatypus-webform-field-input"  /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAmount2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAmount2foapalrow3" class="dplatypus-webform-field-input"  /></td>
                        </tr>
                        <tr id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_foapalrow4">
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxIndex3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxIndex3foapalrow4" class="dplatypus-webform-field-input" /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxFund3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxFund3foapalrow4" class="dplatypus-webform-field-input"  /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxOrg3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxOrg3foapalrow4" class="dplatypus-webform-field-input"  /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAccount3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAccount3foapalrow4" class="dplatypus-webform-field-input"  /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxActivity3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxActivity3foapalrow4" class="dplatypus-webform-field-input"  /></td>
                            <td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAmount3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAmount3foapalrow4" class="dplatypus-webform-field-input" /></td>
                        </tr>
                    </table>

    Bonus: Some CSS nth-child info

    Update

    Leave the table be server side, don't attempt to hide anything there so remove all foapalrow3.Attributes["display"] = "none";, foapalrow3.visible = false; etc. The CSS in my answer does the job of hiding the rows for you, so nothing needs to be done server side to hide the rows.

    Just double check inputTable is added as a class to the table and expander is added as a class to the button.

    And alternate version of adding the class is

    foapalHTMLTable.Attributes.Add("class","inputTable");

    The reason why foapalrow4.Attributes["display"] = "none"; does nothing is because there is no html display attribute, you would want to be changing the items style attribute as display is part of CSS styles.