如何通过jQuery显示以前隐藏的HtmlTableRow？

时间：2015-06-27 17:00:42

标签： javascript c# jquery html-table htmltable-control

我有一个有四行的HtmlTable。前两个（＆＃34;列标题＆＃34;行和常规数据行）始终显示。如果用户选择＆＃34; +＆＃34;按钮，应添加另一个，然后另一个（最多四行）。

两个＆＃34;休眠＆＃34;行在C＃中创建，但最初是＆＃34;隐藏＆＃34;通过将他们的高度设置为0（无论如何，这是意图）：

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

注意：这只是六个＆＃34;文本框中的一个＆＃34;在HtmlTableRow中;所有这些都将其高度设置为0。

这部分有效：

enter image description here

如您所见，第三和第四行很短，但不是不可见/隐藏。单击＆＃34; +＆＃34;按钮确实让他们达到了他们的全高：

enter image description here

...并选择＆＃34; +＆＃34;按钮再次＆＃34;膨胀＆＃34;最后一个缩短的行：

enter image description here

我使用的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);
    }
});

那么在选择＆＃34;添加一行＆＃34>之前，怎样才能让这些行完全不显示？ （＆＃34; +＆＃34;）按钮？

我已经尝试了所有我能想到的东西，然后开始生活＆＃34;在Web部件上看不见，然后以编程方式对它们进行访问。

我试过了：

将其visible属性设置为false（C＃代码隐藏），然后使用各种客户端/ jQuery代码来显示它们。我尝试过以下jQuery（JavaScript？）方法：

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

......就像这样：

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

......但这些都不起作用。我确实看到上面的代码＆＃34;到达了foapalrow3不可见的分支＆＃34;警报。

那么，我是否需要走一条完全不同的路径，例如制作这些单独的单行表，并使表格可见？也就是说，点击＆＃34; +＆＃34;按钮使表格与第二个数据行（第三行整体）可见，再次单击该按钮使第三个数据行（第四行整体）可见？或者怎么样？

更新

根据jmoreno的请求/建议，这里是HTML，通过＆＃34;查看来源＆＃34;：

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

...以下是在服务器端C＃中创建的所有内容（HtmlTable及其行和单元格和内容）：

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;
}

更新2

@Jon P：正如我在你的可运行示例中所看到的那样，你的代码绝对可以正常运行。但是，我的实现仍然无效。我将此代码添加到项目的* .ascx文件中。

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

但是，单击按钮时我没有看到警告，虽然我将该类（＆＃34;扩展器＆＃34;）添加到＆＃34; +＆＃34;像这样的按钮：

C＃

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

所以，我补充说：

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

...并将最后两个（第3行和第4行）设置为不可见，如下所示：

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

...但是，虽然我做现在开始时只有一行可见，但在混合＆＃34; +＆＃34;时，不会扩展/添加/可视化其他行。按钮;我需要，而不是将可见设置为false，设置属性＆＃34;显示＆＃34; to＆＃34; none＆＃34;，或...... ???

注意：我已将表格设置为使用＆＃34; inputTable＆＃34;像这样的课：

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

两个类都出现在呈现的HTML中（＆＃34;查看源代码＆＃34;），如下所示：

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

...所以我不知道问题是什么。应该可见的最后一行（第二行）的文本框添加如下：

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

......而那些意图是＆＃34;看不见的＆＃34;是这样的（将高度设置为0，只能部分工作）：

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

表的呈现HTML就是这样的：

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

更新3

试图以这种方式纠正问题：

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

...也不起作用（这会让我回到桌子的原始外观 - 前两行正常，最后两行可见但是＃34;身高挑战＆＃34;）。

更新4

我甚至试过这个：

（a）在表格中添加一个ID：

foapalHTMLTable.ID = "foapalhtmltable";

（b）找到表格并在＆＃34; +＆＃34;按钮被捣碎：

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

......但是，ALAS！虽然我可能会隐藏这样的行：

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

......（如前所述），它仍然无法运作。我需要＆＃34;边界崩溃＆＃34; （参见o.k.w的回答hyar）？

更新5

我注意到没有＆＃34;显示：无＆＃34;在＆＃34;查看来源＆＃34; for＆＃34; foapalrow3＆＃34;或＆＃34; foapalrow4＆＃34; - 当我在代码中设置它时，为什么Heckle和Jeckle没有：

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

4 个答案:

答案 0 :(得分：2)

我建议使用CSS将显示设置为无，而不是更改高度（您注意到显示问题）。然后在点击+时阻止。

这是一个jsFiddle，点击后会删除隐藏该行的css类。

但基本上，<tr class="hide-rows">使用css为.hide-row {display: none;}，jsQuery使用.hasClass和.removeClass在单击按钮时删除该类。

我还要指出你过度使用内联样式和属性，希望这只是因为你试图解决问题。我做了一个alternative version，其中我使用了nth-of-type，td，span和input元素根据表格中的类进行了样式设计。

答案 1 :(得分：2)

我假设所有行都是相同的，您可以尝试在隐藏表中使用模板行，在添加新行时使用jQuery选择器来获取行，类似于

var newRow = $("#my_template_row").clone();

请参阅jQuery克隆参考 - https://api.jquery.com/clone/

然后，您可以将克隆的行附加到可见表中。

答案 2 :(得分：2)

你可以做所有这些客户端。在服务器端整体构建您的桌面，不要做任何花哨的事情。

使用CSS隐藏除前2行之外的所有行：

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

现在使用jQuery显示第一个隐藏的行（我使用click作为习惯的力量，随意使用on）：

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

注意我已经为该按钮提供了一个expander类，并列出了一类inputTable

使用你的html的例子：

＆＃13;
＆＃13; 
$(".expander").click(function(){
    $('.inputTable').find('tr:hidden:first').show();
});
＆＃13; 
/* Hide the rows */
.inputTable tr:nth-child(n + 3) {display:none;} 
/* Standardize input width */
.inputTable input[type="text"] {width: 88px;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

奖金：Some CSS nth-child info

<强>更新

将表保留为服务器端，不要尝试隐藏任何内容，因此请删除所有foapalrow3.Attributes["display"] = "none";，foapalrow3.visible = false;等。我的答案中的CSS会执行以下操作：为你隐藏行的工作，所以没有什么需要在服务器端完成隐藏行。

只需仔细检查inputTable作为一个类添加到表中，expander作为类添加到按钮中。

添加课程的替代版本是

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

foapalrow4.Attributes["display"] = "none";无效的原因是因为没有html display属性，您可能希望更改项style属性，因为display是CSS的一部分样式。

答案 3 :(得分：1)

好的，基于Jon P＆＃39的花式jQuery / CSS，这就是最终为我工作的东西：

C＃

foapalHTMLTable = new HtmlTable();
foapalHTMLTable.Border = 2;
foapalHTMLTable.ID = "foapalhtmltable";
. . .
foapalrow3 = new HtmlTableRow();
foapalrow3.ID = "foapalrow3";
foapalrow3.Style["display"] = "none";
. . .
foapalrow4 = new HtmlTableRow();
foapalrow4.ID = "foapalrow4";
foapalrow4.Style["display"] = "none";

的jQuery 

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    $('[id$=foapalhtmltable]').find('tr:hidden:first').show();
});

在这个问题的姐妹问题here中也要感谢Sabre和wheatin。

相关问题
最新问题