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

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

这两个“hibernate”行是在C＃中创建的，但最初通过将其高度设置为0来“隐藏”（无论如何，这是意图）：

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

注意：这只是HtmlTableRow中六个“文本框”之一; 所有这些都将其高度设置为0。

这部分有效：

如您所见，第三行和第四行很短，但不是不可见/隐藏。 单击“+”按钮可以使它们达到最大高度：

…再次选择“+”按钮“膨胀”最后一个缩短的行：

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

那么在选择“添加行”（“+”）按钮之前，如何才能显示这些行？

我已经尝试了所有我能想到的东西，让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(); } }); 

……但这些都不起作用。 我确实看到上面的代码“到达foapalrow3不可见分支”警报。

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

UPDATE

根据jmoreno的请求/建议，这里是HTML，通过“查看源代码”看到：

 + 
 
 
Index
 
Fund
 
Organization
 
Account
 
Activity
 
Amount
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  

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

 private void GenerateSection5() { HtmlTable tblSection5 = null; var headerLabel = new Label { CssClass = "dplatypus-webform-field-label", Text = "
FOAPAL / Payment Amount Information
" }; 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

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

jQuery的

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

但是，单击按钮时我没有看到警告，虽然我将该类（“扩展器”）添加到“+”按钮，如下所示：

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; 

…但是，虽然我现在开始时只有一行可见，但在粘贴“+”按钮时，其他行不会被展开/添加/可视化; 我需要，而不是将visible设置为false，将属性“display”设置为“none”，或者…… ???

注意：我已将表设置为使用“inputTable”类，如下所示：

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

这两个类都出现在呈现的HTML（“查看源代码”）中，如下所示：

  +
  ……所以我不知道问题是什么。 应该可见的最后一行（第二行）的文本框添加如下： 
 boxAmount1 = new TextBox() { CssClass = "dplatypus-webform-field-input", Width = TEXTBOX_WIDTH }; cellColAmount1.Controls.Add(boxAmount1); 
  ……那些意味着“看不见”的东西就是这样（将高度设置为0，只能部分起作用）： 
 boxIndex2 = new TextBox() { CssClass = "dplatypus-webform-field-input", Width = TEXTBOX_WIDTH, Height = 0, ID = "boxIndex2foapalrow3" }; cellColIndex2.Controls.Add(boxIndex2); 
 表格的呈现HTML是这样的： 
 
 更新3 
 试图以这种方式纠正问题： 
 //foapalrow3.Visible = false; foapalrow3.Attributes["display"] = "none"; . . . //foapalrow4.Visible = false; foapalrow4.Attributes["display"] = "none"; 
  ……也行不通（这让我回到桌子的原始外观 – 前两行正常，最后两行可见，但“高度挑战”）。 
 更新4 
 我甚至试过这个： 
  （a）在表格中添加一个ID： 
 foapalHTMLTable.ID = "foapalhtmltable"; 
  （b）找到表格并在“+”按钮被捣碎时对其进行操作： 
 $(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(); }); 
  …可惜！ 即使我大概是这样隐藏行： 
 foapalrow3.Attributes["display"] = "none"; foapalrow4.Attributes["display"] = "none"; 
  ……（如前所述），它仍然不起作用。 我是否需要“边界崩溃”（参见okw的回答hyar ）？ 
 更新5 
 我注意到“foapalrow3”或“foapalrow4”的“查看源代码”中没有“display：none” – 为什么Heckle和Jeckle没有，当我在代码中设置它时： 
 foapalrow3.Attributes["display"] = "none"; foapalrow4.Attributes["display"] = "none"; 
  ？ 







 
	

		      	
 你可以做所有这些客户端。 在整个服务器端构建你的表，不要做任何花哨的事情。 
 使用CSS隐藏除前2行之外的所有行： 
 .inputTable tr:nth-child(n + 3) {display:none;} 
 现在使用jQuery显示第一个隐藏的行（我使用click作为习惯的力量，随意使用）： 
 $(".expander").click(function(){ $('.inputTable').find('tr:hidden:first').slideDown(); }); 
 注意我已经为按钮提供了一类expander和表一类inputTable 
 使用你的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;} 
  + 
 
 
Index
 
Fund
 



















	
 
 
Index
 
Fund
 
Organization
 
Account
 
Activity
 
Amount