如何通过jQuery显示以前隐藏的HtmlTableRow？ [英] How can I show a formerly hidden HtmlTableRow via jQuery?
问题描述
我有一个有四行的HtmlTable。前两个（列标题行和常规数据行）始终显示。如果用户选择+按钮，则应添加另一个按钮，然后添加另一个按钮（最多四行）。
I have an HtmlTable with four rows. The first two (a "column header" row and a regular data row) display always. If the user selects a "+" button, another one should be added, and then another (four rows max).
在C＃中创建两个休眠行但最初通过将其高度设置为0来隐藏（无论如何，这是意图）：
The two "dormant" rows are created in C# but are initially "hidden" by setting their heigh to 0 (that's the intent, anyway):
boxIndex2 = new TextBox()
{
CssClass = "finaff-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxIndex2foapalrow3"
};
cellColIndex2.Controls.Add(boxIndex2);
注意：这只是HtmlTableRow中六个文本框之一;所有这些都将其高度设置为0.
Note: This is just one of the six "textboxes" in the HtmlTableRow; all of them have their height set to 0.
这部分有效：
如您所见，第三行和第四行是简短，但不是隐形/隐藏。单击+按钮可以使它们达到最大高度：
As you can see, the third and fourth rows are short, but not invisible/hidden. Clicking the "+" button does get them to go to their full height:
...再次选择+按钮膨胀最后一个缩短的行：
...and selecting the "+" button again "inflates" the last foreshortened row:
我使用的jQuery是：
The jQuery I use for this is:
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
var textboxHeight = 15;
if ($('[id$=boxIndex2foapalrow3]').height() === 0) {
$('[id$=boxIndex2foapalrow3').height(textboxHeight);
$('[id$=boxFund2foapalrow3').height(textboxHeight);
$('[id$=boxOrg2foapalrow3').height(textboxHeight);
$('[id$=boxAccount2foapalrow3').height(textboxHeight);
$('[id$=boxActivity2foapalrow3').height(textboxHeight);
$('[id$=boxAmount2foapalrow3').height(textboxHeight);
}
else if ($('[id$=boxIndex3foapalrow4]').height() === 0) {
$('[id$=boxIndex3foapalrow4').height(textboxHeight);
$('[id$=boxFund3foapalrow4').height(textboxHeight);
$('[id$=boxOrg3foapalrow4').height(textboxHeight);
$('[id$=boxAccount3foapalrow4').height(textboxHeight);
$('[id$=boxActivity3foapalrow4').height(textboxHeight);
$('[id$=boxAmount3foapalrow4').height(textboxHeight);
}
});
那么在选择添加一行之前，如何让这些行完全不显示（+）按钮？
So how can I get these rows to not show at all prior to selecting the "add a row" ("+") button?
我已经尝试了所有我能想到的东西，让Web部件上的两行开始生命不可见，然后以编程方式对它们进行可视化。
I have tried everything I can think of to have the two rows "start out life" on the Web Part invisible and then programmatically visiblize them.
我试过：
将其visible属性设置为false（C＃代码隐藏）然后使用各种客户端/ jQuery代码来显示它们。我尝试过以下jQuery（JavaScript？）方法：
Setting their visible property to false (C# code-behind) and then using various client-side/jQuery code to get them to display. I've tried the following jQuery (JavaScript?) methods:
.toggle()
.show()
.slidedown()
......如此：
/* 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不可见的分支警告。
...but none of these work. I do see with the code above the "reached the foapalrow3 not visible branch" alert.
那么，我是否需要走一条完全不同的路径，例如制作这些单独的一行表，并使表可见？也就是说，单击+按钮使得第二个数据行（整个第三行）可见，再次单击该按钮使第三个数据行（整个第四行）可见？或者如何？
So, do I need to go down a completely different path, such as making these separate one-row tables, and making the tables visible? That is, clicking the "+" button makes the table with the second data row (third row overall) visible, clicking the button again makes the third data row (fourth row overall) visible? Or how?
在jmoreno的请求/建议中，这里是HTML，如图所示查看来源：
At the request/suggestion of jmoreno, here is the HTML, as seen via "View Source":
<button id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_btnAddFoapalRow" type="button">+</button>
<table border="2">
<tr>
<td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label">Index</span></td>
<td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Fund</span></td>
<td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Organization</span></td>
<td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Account</span></td>
<td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Activity</span></td>
<td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Amount</span></td>
</tr>
<tr>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl130" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl132" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl134" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl136" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl138" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl140" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
</tr>
<tr id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_foapalrow3">
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxIndex2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxIndex2foapalrow3" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxFund2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxFund2foapalrow3" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxOrg2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxOrg2foapalrow3" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAccount2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAccount2foapalrow3" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxActivity2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxActivity2foapalrow3" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAmount2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAmount2foapalrow3" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
</tr>
<tr id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_foapalrow4">
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxIndex3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxIndex3foapalrow4" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxFund3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxFund3foapalrow4" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxOrg3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxOrg3foapalrow4" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAccount3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAccount3foapalrow4" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxActivity3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxActivity3foapalrow4" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAmount3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAmount3foapalrow4" class="dplatypus-webform-field-input" style="height:0px;width:88px;" /></td>
</tr>
</table>
...以下是它的全部内容（HtmlTable及其行，单元格和内容）在服务器端C＃创建：
...and here is how it is all (the HtmlTable and its rows and cells and contents) created in the server-side C#:
private void GenerateSection5()
{
HtmlTable tblSection5 = null;
var headerLabel = new Label
{
CssClass = "dplatypus-webform-field-label",
Text = "<h2>FOAPAL / Payment Amount Information</h2>"
};
this.Controls.Add(headerLabel);
AddVerticalSpace();
tblSection5 = GetSection5Table();
if (null != tblSection5)
{
this.Controls.Add(tblSection5);
}
AddVerticalSpace();
var totalLabel = new Label
{
CssClass = "dplatypus-webform-field-label",
Text = "Total: "
};
this.Controls.Add(totalLabel);
boxSection5Total = new TextBox()
{
CssClass = "dplatypus-webform-field-input"
};
this.Controls.Add(boxSection5Total);
AddVerticalSpace();
}
private HtmlTable GetSection5Table()
{
const int TEXTBOX_WIDTH = 88;
const String CELL_WIDTH = "88px";
foapalHTMLTable = new HtmlTable();
foapalHTMLTable.Border = 2;
// Create Row 1
var row1 = new HtmlTableRow();
var cellColTitle1 = new HtmlTableCell();
cellColTitle1.Width = CELL_WIDTH;
cellColTitle1.Style.Add("text-align", "center");
row1.Cells.Add(cellColTitle1);
var cellColTitle2 = new HtmlTableCell();
cellColTitle2.Width = CELL_WIDTH;
cellColTitle2.Style.Add("text-align", "center");
row1.Cells.Add(cellColTitle2);
var cellColTitle3 = new HtmlTableCell();
cellColTitle3.Width = CELL_WIDTH;
cellColTitle3.Style.Add("text-align", "center");
row1.Cells.Add(cellColTitle3);
var cellColTitle4 = new HtmlTableCell();
cellColTitle4.Width = CELL_WIDTH;
cellColTitle4.Style.Add("text-align", "center");
row1.Cells.Add(cellColTitle4);
var cellColTitle5 = new HtmlTableCell();
cellColTitle5.Width = CELL_WIDTH;
cellColTitle5.Style.Add("text-align", "center");
row1.Cells.Add(cellColTitle5);
var cellColTitle6 = new HtmlTableCell();
cellColTitle6.Width = CELL_WIDTH;
cellColTitle6.Style.Add("text-align", "center");
row1.Cells.Add(cellColTitle6);
var indexStr = new Label
{
CssClass = "dplatypus-webform-field-label",
Text = "Index"
};
cellColTitle1.Controls.Add(indexStr);
var fundStr = new Label
{
CssClass = "dplatypus-webform-field-label",
Text = "Fund"
};
fundStr.Style.Add("text-align", "center");
cellColTitle2.Controls.Add(fundStr);
var orgStr = new Label
{
CssClass = "dplatypus-webform-field-label",
Text = "Organization"
};
orgStr.Style.Add("text-align", "center");
cellColTitle3.Controls.Add(orgStr);
var accountStr = new Label
{
CssClass = "dplatypus-webform-field-label",
Text = "Account"
};
accountStr.Style.Add("text-align", "center");
cellColTitle4.Controls.Add(accountStr);
var activityStr = new Label
{
CssClass = "dplatypus-webform-field-label",
Text = "Activity"
};
activityStr.Style.Add("text-align", "center");
cellColTitle5.Controls.Add(activityStr);
var amountStr = new Label
{
CssClass = "dplatypus-webform-field-label",
Text = "Amount"
};
amountStr.Style.Add("text-align", "center");
cellColTitle6.Controls.Add(amountStr);
foapalHTMLTable.Rows.Add(row1);
btnAddFoapalRow = new HtmlButton();
btnAddFoapalRow.Attributes["type"] = "button";
btnAddFoapalRow.InnerHtml = "+";
btnAddFoapalRow.ID = "btnAddFoapalRow";
this.Controls.Add(btnAddFoapalRow);
// Create row 2
foapalrow2 = new HtmlTableRow();
var cellColIndex1 = new HtmlTableCell();
cellColIndex1.Width = CELL_WIDTH;
foapalrow2.Cells.Add(cellColIndex1);
var cellColFund1 = new HtmlTableCell();
cellColFund1.Width = CELL_WIDTH;
foapalrow2.Cells.Add(cellColFund1);
var cellColOrg1 = new HtmlTableCell();
cellColOrg1.Width = CELL_WIDTH;
foapalrow2.Cells.Add(cellColOrg1);
var cellColAccount1 = new HtmlTableCell();
cellColAccount1.Width = CELL_WIDTH;
foapalrow2.Cells.Add(cellColAccount1);
var cellColActivity1 = new HtmlTableCell();
cellColActivity1.Width = CELL_WIDTH;
foapalrow2.Cells.Add(cellColActivity1);
var cellColAmount1 = new HtmlTableCell();
cellColAmount1.Width = CELL_WIDTH;
foapalrow2.Cells.Add(cellColAmount1);
boxIndex1 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH
};
cellColIndex1.Controls.Add(boxIndex1);
boxFund1 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH
};
cellColFund1.Controls.Add(boxFund1);
boxOrganization1 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH
};
cellColOrg1.Controls.Add(boxOrganization1);
boxAccount1 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH
};
cellColAccount1.Controls.Add(boxAccount1);
boxActivity1 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH
};
cellColActivity1.Controls.Add(boxActivity1);
boxAmount1 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH
};
cellColAmount1.Controls.Add(boxAmount1);
foapalHTMLTable.Rows.Add(foapalrow2);
// Row 3
foapalrow3 = new HtmlTableRow();
foapalrow3.ID = "foapalrow3";
var cellColIndex2 = new HtmlTableCell();
cellColIndex2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColIndex2);
var cellColFund2 = new HtmlTableCell();
cellColFund2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColFund2);
var cellColOrg2 = new HtmlTableCell();
cellColOrg2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColOrg2);
var cellColAccount2 = new HtmlTableCell();
cellColAccount2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColAccount2);
var cellColActivity2 = new HtmlTableCell();
cellColActivity2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColActivity2);
var cellColAmount2 = new HtmlTableCell();
cellColAmount2.Width = CELL_WIDTH;
foapalrow3.Cells.Add(cellColAmount2);
boxIndex2 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxIndex2foapalrow3"
};
cellColIndex2.Controls.Add(boxIndex2);
boxFund2 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxFund2foapalrow3"
};
cellColFund2.Controls.Add(boxFund2);
boxOrganization2 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxOrg2foapalrow3"
};
cellColOrg2.Controls.Add(boxOrganization2);
boxAccount2 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxAccount2foapalrow3"
};
cellColAccount2.Controls.Add(boxAccount2);
boxActivity2 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
//Visible = false, <= this does work
ID = "boxActivity2foapalrow3"
};
cellColActivity2.Controls.Add(boxActivity2);
boxAmount2 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxAmount2foapalrow3"
};
cellColAmount2.Controls.Add(boxAmount2);
foapalHTMLTable.Rows.Add(foapalrow3);
// Row 4
foapalrow4 = new HtmlTableRow();
foapalrow4.ID = "foapalrow4";
var cellColIndex3 = new HtmlTableCell();
cellColIndex3.Width = CELL_WIDTH;
foapalrow4.Cells.Add(cellColIndex3);
var cellColFund3 = new HtmlTableCell();
cellColFund3.Width = CELL_WIDTH;
foapalrow4.Cells.Add(cellColFund3);
var cellColOrg3 = new HtmlTableCell();
cellColOrg3.Width = CELL_WIDTH;
foapalrow4.Cells.Add(cellColOrg3);
var cellColAccount3 = new HtmlTableCell();
cellColAccount3.Width = CELL_WIDTH;
foapalrow4.Cells.Add(cellColAccount3);
var cellColActivity3 = new HtmlTableCell();
cellColActivity3.Width = CELL_WIDTH;
foapalrow4.Cells.Add(cellColActivity3);
var cellColAmount3 = new HtmlTableCell();
cellColAmount3.Width = CELL_WIDTH;
foapalrow4.Cells.Add(cellColAmount3);
boxIndex3 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Height = 0,
Width = TEXTBOX_WIDTH,
ID = "boxIndex3foapalrow4"
};
cellColIndex3.Controls.Add(boxIndex3);
boxFund3 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxFund3foapalrow4"
};
cellColFund3.Controls.Add(boxFund3);
boxOrganization3 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxOrg3foapalrow4"
};
cellColOrg3.Controls.Add(boxOrganization3);
boxAccount3 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxAccount3foapalrow4"
};
cellColAccount3.Controls.Add(boxAccount3);
boxActivity3 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxActivity3foapalrow4"
};
cellColActivity3.Controls.Add(boxActivity3);
boxAmount3 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxAmount3foapalrow4"
};
cellColAmount3.Controls.Add(boxAmount3);
foapalHTMLTable.Rows.Add(foapalrow4);
// Add more rows if necessary (up to 6, if that's the limit? Or create a method that will add another one, no matter how many are required)
return foapalHTMLTable;
}
更新2
@Jon P：正如我在您的可运行示例中所看到的那样，您的代码绝对可以正常运行。但是，我的实现仍然无效。我将此代码添加到项目的* .ascx文件中。
UPDATE 2
@Jon P: your code definitely and demonstrably works, as I see in your runnable example. However, my implementation of it is still not working. I added this code to the project's *.ascx file.
CSS
<style>
/* Hide the FOAPAL rows */
.inputTable tr:nth-child(n + 3) {display:none;}
/* Standardize input width */
.inputTable input[type="text"] {width: 88px;}
</style>
jQuery
$(".expander").click(function () {
alert("expander click entered - remove this alert after seeing it");
$('.inputTable').find('tr:hidden:first').show();
});
但是，单击按钮时我看不到警报，虽然我添加了该类（扩展器 ）到+按钮，如下所示：
However, I do not see the alert when clicking the button, although I added that class ("expander") to the "+" button like so:
C＃
btnAddFoapalRow = new HtmlButton();
btnAddFoapalRow.Attributes["type"] = "button";
btnAddFoapalRow.InnerHtml = "+";
btnAddFoapalRow.ID = "btnAddFoapalRow";
btnAddFoapalRow.Attributes["class"] = "expander"; // <= This is how to do it, right?
所以，我添加了这个：
$(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行）设置为不可见，如下所示：
...and set the last two (rows 3 and 4) to invisible like so:
foapalrow3.Visible = false;
. . .
foapalrow4.Visible = false;
...但是，虽然我做只用一行开始现在可见，在粘贴+按钮时，不会扩展/添加/可视化其他行;我需要，而不是将visible设置为false，将属性display设置为none，或者...... ???
...but, although I do start off with only one row visible now, the additional rows are not expanded/added/visiblized when mashing the "+" button; do I need to, instead of setting visible to false, set the Attribute "display" to "none", or...???
注意：我已设置该表使用inputTable类，如下所示：
NOTE: I have set the table to use the "inputTable" class like so:
foapalHTMLTable = new HtmlTable();
foapalHTMLTable.Attributes["class"] = "inputTable";
两个类都出现在渲染的HTML（查看源代码）中，如下所示：
Both classes are appearing in the rendered HTML ("View Source") like so:
<button id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_btnAddFoapalRow" type="button" class="expander">
+</button><table border="2" class="inputTable">
...所以我不知道问题是什么。应该可见的最后一行（第二行）的文本框添加如下：
...so I don't know what the problem is. Textboxes for the last row (second) that is supposed to be visible are added like this:
boxAmount1 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH
};
cellColAmount1.Controls.Add(boxAmount1);
...而那些意味着看不见的是这样的（将高度设置为0 ，只部分工作）：
...whereas those that are meant to be "invisible" are like so (setting Height to 0, which only partially works):
boxIndex2 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
Height = 0,
ID = "boxIndex2foapalrow3"
};
cellColIndex2.Controls.Add(boxIndex2);
表格的呈现HTML是这样的：
The rendered HTML for the table is of this ilk:
<table border="2" class="inputTable">
<tr>
<td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label">Index</span></td>
<td width="88px" style="text-align:center;"><span class="dplatypus-
webform-field-label" style="text-align:center;">Fund</span></td>
更新3
尝试纠正事项这样：
UPDATE 3
Attempting to rectify matters this way:
//foapalrow3.Visible = false;
foapalrow3.Attributes["display"] = "none";
. . .
//foapalrow4.Visible = false;
foapalrow4.Attributes["display"] = "none";
...也不起作用（这让我回到桌子的原始外观 - 前两行正常，最后两行可见，但高度挑战）。
...also doesn't work (that takes me back to the orginal appearance of the table - first two rows normal, last two visible but "height-challenged").
我甚至试过这个：
（a）在表格中添加一个ID：
(a) Add an ID to the table:
foapalHTMLTable.ID = "foapalhtmltable";
（b）找到表格，并在+按钮被捣碎时对其进行操作：
(b) Locate the table and act on it when the "+" button is mashed:
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
alert("btnAddFoapalRow click entered - remove this alert after seeing it");
//$('.inputTable').find('tr:hidden:first').show();
$('[id$=foapalhtmltable]').find('tr:hidden:first').show();
});
...但是，ALAS！即使我大概是这样隐藏行：
...but, ALAS! Even though I'm presumably hiding the rows like so:
foapalrow3.Attributes["display"] = "none";
foapalrow4.Attributes["display"] = "none";
...（如前所述），它仍然不起作用。我是否需要边界崩溃（参见okw的回答 hyar ）？
...(as previously noted), it still doesn't work. Do I need "border-collapse" (see o.k.w's answer hyar)?
我注意到foapalrow3或foapalrow4的查看源代码中没有display：none - 当我在代码中设置它时，为什么Heckle和Jeckle没有：
I do note that there is no "display:none" in the "View Source" for "foapalrow3" or "foapalrow4" - why the Heckle and Jeckle not, when I'm setting it in code like so:
foapalrow3.Attributes["display"] = "none";
foapalrow4.Attributes["display"] = "none";
？
推荐答案
你可以做所有这些客户端。在整个服务器端构建你的表，不要做任何花哨的事情。
You can do all this client side. Build your table in it's entirety server-side and don't do anything fancy to it .
使用CSS隐藏除前2行之外的所有行：
Use CSS to hide all but the first 2 rows:
.inputTable tr:nth-child(n + 3) {display:none;}
现在使用jQuery显示第一个隐藏行（我已经使用点击作为习惯的力量，随时在上使用：
Now use jQuery to show the first hidden row (I've used click as a force of habit, feel free to use on):
$(".expander").click(function(){
$('.inputTable').find('tr:hidden:first').slideDown();
});
注意我给了按钮一个扩展器和表一类 inputTable
Note I have given the button a class of expander and table a class of inputTable
使用你的html的例子：
Example using your html:
$(".expander").click(function(){
$('.inputTable').find('tr:hidden:first').show();
});
/* Hide the rows */
.inputTable tr:nth-child(n + 3) {display:none;}
/* Standardize input width */
.inputTable input[type="text"] {width: 88px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_btnAddFoapalRow" type="button" class="expander">+</button>
<table border="2" class="inputTable">
<tr>
<td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label">Index</span></td>
<td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Fund</span></td>
<td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Organization</span></td>
<td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Account</span></td>
<td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Activity</span></td>
<td width="88px" style="text-align:center;"><span class="dplatypus-webform-field-label" style="text-align:center;">Amount</span></td>
</tr>
<tr>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl130" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl132" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl134" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl136" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl138" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl140" type="text" class="dplatypus-webform-field-input" style="width:88px;" /></td>
</tr>
<tr id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_foapalrow3">
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxIndex2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxIndex2foapalrow3" class="dplatypus-webform-field-input" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxFund2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxFund2foapalrow3" class="dplatypus-webform-field-input" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxOrg2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxOrg2foapalrow3" class="dplatypus-webform-field-input" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAccount2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAccount2foapalrow3" class="dplatypus-webform-field-input" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxActivity2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxActivity2foapalrow3" class="dplatypus-webform-field-input" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAmount2foapalrow3" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAmount2foapalrow3" class="dplatypus-webform-field-input" /></td>
</tr>
<tr id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_foapalrow4">
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxIndex3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxIndex3foapalrow4" class="dplatypus-webform-field-input" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxFund3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxFund3foapalrow4" class="dplatypus-webform-field-input" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxOrg3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxOrg3foapalrow4" class="dplatypus-webform-field-input" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAccount3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAccount3foapalrow4" class="dplatypus-webform-field-input" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxActivity3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxActivity3foapalrow4" class="dplatypus-webform-field-input" /></td>
<td width="88px"><input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$boxAmount3foapalrow4" type="text" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_boxAmount3foapalrow4" class="dplatypus-webform-field-input" /></td>
</tr>
</table>Bonus: Some CSS nth-child info
Update
Leave the table be server side, don’t attempt to hide anything there so remove all foapalrow3.Attributes[\"display\"] = \"none\";, foapalrow3.visible = false; etc. The CSS in my answer does the job of hiding the rows for you, so nothing needs to be done server side to hide the rows.
Leave the table be server side, don't attempt to hide anything there so remove all foapalrow3.Attributes["display"] = "none";, foapalrow3.visible = false; etc. The CSS in my answer does the job of hiding the rows for you, so nothing needs to be done server side to hide the rows.
Just double check inputTable is added as a class to the table and expander is added as a class to the button.
Just double check inputTable is added as a class to the table and expander is added as a class to the button.
And alternate version of adding the class is
And alternate version of adding the class is
foapalHTMLTable.Attributes.Add("class","inputTable");
The reason why foapalrow4.Attributes[\"display\"] = \"none\"; does nothing is because there is no html display attribute, you would want to be changing the items style attribute as display is part of CSS styles.
The reason why foapalrow4.Attributes["display"] = "none"; does nothing is because there is no html display attribute, you would want to be changing the items style attribute as display is part of CSS styles.
这篇关于如何通过jQuery显示以前隐藏的HtmlTableRow？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
