我需要在 HtmlTable 中动态显示行。我认为将 HtmlTableRow 的高度设置为 0 可以解决问题,但事实并非如此。以下是我在代码隐藏中创建行及其“片段”的方式:
// 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,
ID = "boxIndex2foapalrow3"
};
cellColIndex2.Controls.Add(boxIndex2);
boxFund2 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
ID = "boxFund2foapalrow3"
};
cellColFund2.Controls.Add(boxFund2);
boxOrganization2 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
ID = "boxOrg2foapalrow3"
};
cellColOrg2.Controls.Add(boxOrganization2);
boxAccount2 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
ID = "boxAccount2foapalrow3"
};
cellColAccount2.Controls.Add(boxAccount2);
boxActivity2 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
ID = "boxActivity2foapalrow3"
};
cellColActivity2.Controls.Add(boxActivity2);
boxAmount2 = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
Width = TEXTBOX_WIDTH,
ID = "boxAmount2foapalrow3"
};
cellColAmount2.Controls.Add(boxAmount2);
//cellColAmount2.ID = ""; <= Maybe the cells need IDs too, like: ?
foapalHTMLTable.Rows.Add(foapalrow3);
foapalrow3.Height = "0"; // <= does this need something appended, such as "em" or such? Normal height may be 15
...这是 jQuery 尝试有条件地增加高度以使行可见:
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
if ($('[id$=foapalrow3]').height.not("15")) {
console.log('reached the foapalrow3 not visible branch');
$('[id$=foapalrow3]').height(15);
}
});
不幸的是,从 git-go 可以看到该行;将高度设置为 0 并不会阻止它立即“尽其所能”显示。我是否还需要将 HtmlTableCells 和/或 TextBoxes 的高度设置为 0?或者还需要什么?
注意:我意识到 jQuery 可能无法工作(“height.not”现在只是一个猜测),但我需要先解决第一个问题(行高没有设置为 0,因此有效地使它是看不见的)。
更新
我在创建它们之后隐藏了这些行(在 C# 代码隐藏/服务器端代码中):
foapalHTMLTable.Rows.Add(foapalrow3);
foapalrow3.Visible = false;
...并在我的客户端 jQuery 中有这个:
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
if ($('[id$=foapalrow3]').not(":visible")) {
alert('reached the foapalrow3 not visible branch');
$('[id$=foapalrow3]').toggle();
}
else if ($('[id$=foapalrow4]').not(":visible")) {
alert('reached the foapalrow4 not visible branch');
$('[id$=foapalrow4]').slideDown();
}
});
...但是它不起作用-不可见的行永远不会可见(我确实看到了第一个警报-实际上是两次(我必须连续两次将其关闭))。
更新 2
我将行的设置注释为不可见(可见 = false)。我将此添加到就绪函数中:
$(document).ready(function () {
alert('The ready function has been reached'); /* This is a "sanity check" so it can be verified that this jQuery script is running/ran */
$('[id$=foapalrow3]').toggle();
$('[id$=foapalrow4]').toggle();
});
我确实看到了警报,但切换不会将它们从可见切换到-in。我也试过 .slideUp(),但也没有用。Ravi 建议“设置显示:无”;我愿意尝试,但如何,在哪里?