如何通过 jQuery 显示以前隐藏的 HtmlTableRow？
How can I show a formerly hidden HtmlTableRow via jQuery?
我有一个包含四行的 HtmlTable。前两个（"column header" 行和常规数据行）始终显示。如果用户选择“+”按钮，则应添加另一个，然后再添加一个（最多四行）。
两个 "dormant" 行是在 C# 中创建的，但最初 "hidden" 通过将它们的高度设置为 0（无论如何，这就是意图）：
boxIndex2 = new TextBox()
{
CssClass = "finaff-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxIndex2foapalrow3"
};
cellColIndex2.Controls.Add(boxIndex2);
注：这只是HtmlTableRow中的六个"textboxes"之一；它们的高度都设置为 0。
部分有效：
如你所见，第三行和第四行是短的，但不是invisible/hidden。单击“+”按钮确实可以让它们达到全高：
...并再次选择“+”按钮 "inflates" 最后一个缩短的行：
我用的 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);
}
});
那么在选择 "add a row"（“+”）按钮之前如何让这些行完全不显示？
我已尽我所能使 Web 部件上的两行 "start out life" 不可见，然后以编程方式使它们可见。
我试过：
将它们的可见 属性 设置为 false（C# 代码隐藏），然后使用各种 client-side/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();
}
});
...但是 none 这些工作。我确实看到 "reached the foapalrow3 not visible branch" 警报上方的代码。
那么，我是否需要走一条完全不同的路，比如制作这些单独的单行 table，并使 table 可见？也就是说，单击“+”按钮会使 table 的第二个数据行（总体第三行）可见，再次单击该按钮会使第三个数据行（总体第四行）可见？或者如何？
更新
在 jmoreno 的 request/suggestion，这里是 HTML，如通过 "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>
...这是在服务器端 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();
});
但是，尽管我将 class ("expander") 添加到“+”按钮，但我在单击按钮时没有看到警报，如下所示：
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;
...但是，虽然我 do 现在只有一行可见，但在按下“+”按钮时，其他行不是 expanded/added/visiblized；我是否需要将属性 "display" 设置为 "none"，而不是将可见设置为 false，或者...？？？
注意：我已将 table 设置为使用 "inputTable" class，如下所示：
foapalHTMLTable = new HtmlTable();
foapalHTMLTable.Attributes["class"] = "inputTable";
两个 classes 都出现在呈现的 HTML ("View Source") 中，如下所示：
<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);
...而那些本来应该是 "invisible" 的是这样的（将高度设置为 0，这只能部分起作用）：
boxIndex2 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxIndex2foapalrow3"
};
cellColIndex2.Controls.Add(boxIndex2);
为 table 渲染的 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";
...也不起作用（这让我回到了 table 的原始外观 - 前两行正常，最后两行可见但 "height-challenged"）。
更新 4
我什至试过这个：
(a) 添加ID到table:
foapalHTMLTable.ID = "foapalhtmltable";
(b) 找到 table 并在按下“+”按钮时对其进行操作：
$(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";
...（如前所述），它仍然不起作用。我需要 "border-collapse"（参见 o.k.w 的回答 hyar）吗？
更新 5
我确实注意到 "View Source" 中没有 "display:none" 用于 "foapalrow3" 或 "foapalrow4" - 为什么 Heckle and Jeckle 没有，当我设置它时在这样的代码中：
foapalrow3.Attributes["display"] = "none";
foapalrow4.Attributes["display"] = "none";
?
我建议使用 CSS 将显示设置为 none，而不是更改高度（如您所见，这存在显示问题）。然后在点击+时阻塞。
这是一个 jsFiddle，点击会删除隐藏该行的 css class。
但基本上，它是 <tr class="hide-rows">，css 是 .hide-row {display: none;}，当单击按钮时，jsQuery 使用 .hasClass 和 .removeClass 删除 class .
我还要指出您已经过度使用内联样式和属性，希望那只是因为您正在尝试解决问题。我在 alternative version 中使用了 nth-of-type，td、span 和 input 元素的样式基于 table.
上的 class
我假设所有行都是相同的，您可以尝试在隐藏的 table 中使用模板行，在添加新行时使用 jQuery 选择器来获取该行，像
var newRow = $("#my_template_row").clone();
参见 jQuery 克隆参考 - https://api.jquery.com/clone/
然后您可以将克隆的行附加到可见的 table。
您可以在客户端完成所有这些工作。在整个服务器端构建您的 table，不要对它做任何花哨的事情。
使用 CSS 隐藏除前两行以外的所有内容：
.inputTable tr:nth-child(n + 3) {display:none;}
现在用jQuery显示第一个隐藏行（我已经习惯用click，随意使用on）：
$(".expander").click(function(){
$('.inputTable').find('tr:hidden:first').slideDown();
});
请注意，我给了按钮 expander 的 class 和 table 的 inputTable
的 class
使用您的 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>
更新
将 table 保留在服务器端，不要试图在那里隐藏任何东西 所以删除所有 foapalrow3.Attributes["display"] = "none";、foapalrow3.visible = false; 等。我的回答中的 CSS 会为您完成隐藏行的工作，因此无需在服务器端执行任何操作即可隐藏行。
只需仔细检查 inputTable 作为 class 添加到 table 并且 expander 作为 class 添加到按钮。
添加 class 的替代版本是
foapalHTMLTable.Attributes.Add("class","inputTable");
foapalrow4.Attributes["display"] = "none"; 什么都不做的原因是因为没有 html display 属性，您可能希望将项目 style 属性更改为 display 是 CSS 样式的一部分。
好吧，根据 Jon P 的花式裤子，这就是最终对我有用的东西 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();
});
也感谢本题姊妹题中的Saber和Wheatin 。
我有一个包含四行的 HtmlTable。前两个（"column header" 行和常规数据行）始终显示。如果用户选择“+”按钮，则应添加另一个，然后再添加一个（最多四行）。
两个 "dormant" 行是在 C# 中创建的，但最初 "hidden" 通过将它们的高度设置为 0（无论如何，这就是意图）：
boxIndex2 = new TextBox()
{
CssClass = "finaff-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxIndex2foapalrow3"
};
cellColIndex2.Controls.Add(boxIndex2);
注：这只是HtmlTableRow中的六个"textboxes"之一；它们的高度都设置为 0。
部分有效：
如你所见，第三行和第四行是短的，但不是invisible/hidden。单击“+”按钮确实可以让它们达到全高：
...并再次选择“+”按钮 "inflates" 最后一个缩短的行：
我用的 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);
}
});
那么在选择 "add a row"（“+”）按钮之前如何让这些行完全不显示？
我已尽我所能使 Web 部件上的两行 "start out life" 不可见，然后以编程方式使它们可见。
我试过：
将它们的可见 属性 设置为 false（C# 代码隐藏），然后使用各种 client-side/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();
}
});
...但是 none 这些工作。我确实看到 "reached the foapalrow3 not visible branch" 警报上方的代码。
那么，我是否需要走一条完全不同的路，比如制作这些单独的单行 table，并使 table 可见？也就是说，单击“+”按钮会使 table 的第二个数据行（总体第三行）可见，再次单击该按钮会使第三个数据行（总体第四行）可见？或者如何？
更新
在 jmoreno 的 request/suggestion，这里是 HTML，如通过 "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>
...这是在服务器端 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();
});
但是，尽管我将 class ("expander") 添加到“+”按钮，但我在单击按钮时没有看到警报，如下所示：
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;
...但是，虽然我 do 现在只有一行可见，但在按下“+”按钮时，其他行不是 expanded/added/visiblized；我是否需要将属性 "display" 设置为 "none"，而不是将可见设置为 false，或者...？？？
注意：我已将 table 设置为使用 "inputTable" class，如下所示：
foapalHTMLTable = new HtmlTable();
foapalHTMLTable.Attributes["class"] = "inputTable";
两个 classes 都出现在呈现的 HTML ("View Source") 中，如下所示：
<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);
...而那些本来应该是 "invisible" 的是这样的（将高度设置为 0，这只能部分起作用）：
boxIndex2 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxIndex2foapalrow3"
};
cellColIndex2.Controls.Add(boxIndex2);
为 table 渲染的 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";
...也不起作用（这让我回到了 table 的原始外观 - 前两行正常，最后两行可见但 "height-challenged"）。
更新 4
我什至试过这个：
(a) 添加ID到table:
foapalHTMLTable.ID = "foapalhtmltable";
(b) 找到 table 并在按下“+”按钮时对其进行操作：
$(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";
...（如前所述），它仍然不起作用。我需要 "border-collapse"（参见 o.k.w 的回答 hyar）吗？
更新 5
我确实注意到 "View Source" 中没有 "display:none" 用于 "foapalrow3" 或 "foapalrow4" - 为什么 Heckle and Jeckle 没有，当我设置它时在这样的代码中：
foapalrow3.Attributes["display"] = "none";
foapalrow4.Attributes["display"] = "none";
?
我建议使用 CSS 将显示设置为 none，而不是更改高度（如您所见，这存在显示问题）。然后在点击+时阻塞。
这是一个 jsFiddle，点击会删除隐藏该行的 css class。
但基本上，它是 <tr class="hide-rows">，css 是 .hide-row {display: none;}，当单击按钮时，jsQuery 使用 .hasClass 和 .removeClass 删除 class .
我还要指出您已经过度使用内联样式和属性，希望那只是因为您正在尝试解决问题。我在 alternative version 中使用了 nth-of-type，td、span 和 input 元素的样式基于 table.
上的 class我假设所有行都是相同的，您可以尝试在隐藏的 table 中使用模板行，在添加新行时使用 jQuery 选择器来获取该行，像
var newRow = $("#my_template_row").clone();
参见 jQuery 克隆参考 - https://api.jquery.com/clone/
然后您可以将克隆的行附加到可见的 table。
您可以在客户端完成所有这些工作。在整个服务器端构建您的 table，不要对它做任何花哨的事情。
使用 CSS 隐藏除前两行以外的所有内容：
.inputTable tr:nth-child(n + 3) {display:none;}
现在用jQuery显示第一个隐藏行（我已经习惯用click，随意使用on）：
$(".expander").click(function(){
$('.inputTable').find('tr:hidden:first').slideDown();
});
请注意，我给了按钮 expander 的 class 和 table 的 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;}
<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>
更新
将 table 保留在服务器端，不要试图在那里隐藏任何东西 所以删除所有 foapalrow3.Attributes["display"] = "none";、foapalrow3.visible = false; 等。我的回答中的 CSS 会为您完成隐藏行的工作，因此无需在服务器端执行任何操作即可隐藏行。
只需仔细检查 inputTable 作为 class 添加到 table 并且 expander 作为 class 添加到按钮。
添加 class 的替代版本是
foapalHTMLTable.Attributes.Add("class","inputTable");
foapalrow4.Attributes["display"] = "none"; 什么都不做的原因是因为没有 html display 属性，您可能希望将项目 style 属性更改为 display 是 CSS 样式的一部分。
好吧，根据 Jon P 的花式裤子，这就是最终对我有用的东西 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();
});
也感谢本题姊妹题中的Saber和Wheatin