Question

我需要动态显示HtmlTable中的行。我认为将HtmlTableRow的高度设置为0就可以了，但它并没有。这是我如何创建行及其部分＆＃34;部分＆＃34;在代码隐藏中：

// 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并不会阻止它显示其所有的荣耀＆＃34;马上。我是否还需要将HtmlTableCells和/或TextBoxes的高度设置为0？或者还需要什么？

注意：我意识到jQuery可能无法正常工作（＆＃34; height.not＆＃34;现在只是一个猜测），但我需要先解决第一个问题（行高未设置为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

我将行设置注释为不可见（visible = 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建议＆＃34;设置display：none＆＃34 ;;我愿意尝试，但只是如何，在哪里？

Answer 1

您可以使用JQuery toggle()动态隐藏/显示。或者您可以使用display:none css属性（如果您愿意，可以使用）。两者都会在后台生成html，但不会显示在可见页面上。

Answer 2

这种（有点）有效，但很有意思：

如果我没有设置HtmlTableRow的高度，而是将HtmlTableRow （TextBoxes / input = text）中元素的高度设置为0，则单击按钮＆＃34;添加＆＃34;该行（它增加了元素的高度，从而增加了父元素的高度，HtmlTableRow及其父元素HtmlTable。

但是，由于只是＆＃34;短＆＃34;而不是隐藏，在击中＆＃34; +＆＃34;之前，休眠行看起来比垃圾箱更有趣。按钮：

我或许可以'＃34;出售＆＃34;这是一个特征（＆＃34;隐藏行的最小高度表示它可用，但尚未使用＆＃34;）但我对此表示怀疑。

所以我仍然愿意接受有关如何改善这种kludgification的建议。
我是这样完成的：

C＃代码隐藏（服务器端）：

boxIndex2 = new TextBox() { CssClass = "dplatypus-webform-field-input", Width = TEXTBOX_WIDTH, Height = 0, ID = "boxIndex2foapalrow3" }; . . . // similar code for the other elements (where their height is also set to 0) elided for brevity

注意： HtmlTableRow 不被设置为不可见 - 如果我这样做，它根本不起作用（该行是不可见的，但它即使在选择＆＃34; +＆＃34;按钮后也会保持这种状态。

jQuery客户端：

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) { var textboxHeight = 15; if ($('[id$=foapalrow3]').not(":visible")) { //if (($('[id$=boxIndex2foapalrow3]').height() == 0) { alert('reached the foapalrow3 height zilch branch'); $('[id$=boxIndex2foapalrow3').height(textboxHeight); $('[id$=boxFund2foapalrow3').height(textboxHeight); $('[id$=boxOrg2foapalrow3').height(textboxHeight); $('[id$=boxAccount2foapalrow3').height(textboxHeight); $('[id$=boxActivity2foapalrow3').height(textboxHeight); $('[id$=boxAmount2foapalrow3').height(textboxHeight); } . . . });

注意：另一个难题是＆＃34; if（$（＆＃39; [id $ = foapalrow3]＆＃39;）not not（＆＃34;：visible＆＃ 34））＆＃34;测试返回true，因为行不应该真的不可见...... ???已注释掉的测试，应该返回true：

if (($('[id$=boxIndex2foapalrow3]').height() == 0) {

...不会（它返回false）。

???

更新

我能够改进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); } });

...但它仍然没有正常工作 - 当我点击按钮时，同时添加了两个行。我认为这是因为jQuery似乎运行了两次，但为什么会这样做呢？

HtmlTable的按钮前点击状态现在是：

更新3

我终于明白了 - 我在页面上有两个相同Web部件的实例，这意味着来自两个实例的jQuery最终都在＆＃34; View Source＆＃34;因此它会运行两次。通过删除Web部件的一个实例，问题得以解决，上面的代码（在Update 2中）正常工作。

唯一的问题＆＃34;现在是在捣碎＆＃34; +＆＃34;之前，行没有被完全隐藏。按钮 - 它们的高度不是很大，但大于0。

如何设置HtmlTableRow的高度以便生成但不显示？

更新

更新2

2 个答案:

更新

更新3