如何使用 jQuery 来显示一个 HtmlTableRow（它开始不可见/隐藏的生活）？答案

【问题标题】：How can I use jQuery to get an HtmlTableRow (which starts life invisible/hidden) to display?如何使用 jQuery 来显示一个 HtmlTableRow（它开始不可见/隐藏的生活）？
【发布时间】：2015-06-22 18:01:42
【问题描述】：

我正在通过服务器端 (C#) 代码创建一些 html 元素。由于这是一个 jQuery 论坛，我不会显示该代码，但它会添加一个列标题行和第一行可见的“文本框”；然后，我添加了另外两行开始时不可见的文本框。我另外（没有双关语）有一个按钮（带有标题“+”），它应该使第一个不可见行在第一次点击时可见，第二个不可见行在第二次点击时可见。我正在尝试用这个 jQuery 来实现：

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    if ($('[id$=foapalrow3]').not(":visible")) {
        console.log('reached the foapalrow3 not visible branch');
        //        $('[id$=foapalrow3]').slideDown(); <= neither this nor the below works
        $('[id$=foapalrow3]').attr("visibility", "visible");
    }
    else if ($('[id$=foapalrow4]').not(":visible")) {
        console.log('reached the foapalrow4 not visible branch');
        $('[id$=foapalrow4]').slideDown();
    }
});

我确实在控制台中看到了“到达 foapalrow3 不可见分支”日志消息，但是 slideDown() 和“visibility=visible”代码都没有做任何事情（请原谅我 1800 年代偏远地区的方言）。

我需要做什么才能使 foaplarow3（和 4，视情况而定）可见？

这是代码隐藏/服务器端 (C#)：

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
};
cellColIndex2.Controls.Add(boxIndex2);
boxFund2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH
};
cellColFund2.Controls.Add(boxFund2);
boxOrganization2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH
};
cellColOrg2.Controls.Add(boxOrganization2);
boxAccount2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH
};
cellColAccount2.Controls.Add(boxAccount2);
boxActivity2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH
};
cellColActivity2.Controls.Add(boxActivity2);
boxAmount2 = new TextBox()
{
    CssClass = "dplatypus-webform-field-input",
    Width = TEXTBOX_WIDTH
};
cellColAmount2.Controls.Add(boxAmount2);
foapalHTMLTable.Rows.Add(foapalrow3);
foapalrow3.Visible = false;

foapalrow4 的代码与上面 foapalrow3 的代码相同，除了明显的区别。所以，基本上，我需要在点击“+”按钮时进行设置：

foapalrow3.Visible = false;

...但是通过 jQuery。这就是它的样子：

更新

我查看了为页面生成的 HTML，对以下几件事感到惊讶：第一，jQuery 出现了两次（重复）——为什么？

其次，也许更重要的是，源中的任何地方都没有“foapalrow3”，尽管那是我为 HtmlTableRow 提供的 ID。难怪如果它不知道存在 ID 以“foapalrow3”结尾的元素，它不会被响应。按钮的 ID 在那里：

<h2>Section 5: FOAPAL / Payment Amount Information</h2></span><br></br><button id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_btnAddFoapalRow" type="button" OnClientClick="return false;">+</button><table border="2">

...因此处理了它的点击事件，但是为什么没有记录 HtmlTableRow 的 ID，我该怎么做呢？

更新 2

这是“第 5 节”的 HTML，行应该出现在此处：

<span class="finaff-webform-field-label" style="display:inline-block;">Explain Payment: </span><textarea name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$explainPaymentTextBox" rows="2" cols="20" id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_explainPaymentTextBox" class="finaff-webform-field-input" style="width:660px;display:inline-block;"></textarea><br></br><span class="finaff-webform-field-label"><h2>Section 5: FOAPAL / Payment Amount Information</h2></span><br></br><button id="ctl00_ctl24_g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33_ctl00_btnAddFoapalRow" type="button" OnClientClick="return false;">+</button><table border="2">
    <tr>
        <td width="88px" style="text-align:center;"><span class="finaff-webform-field-label">Index</span></td>
        <td width="88px" style="text-align:center;"><span class="finaff-webform-field-label" style="text-align:center;">Fund</span></td>
        <td width="88px" style="text-align:center;"><span class="finaff-webform-field-label" style="text-align:center;">Organization</span></td>
        <td width="88px" style="text-align:center;"><span class="finaff-webform-field-label" style="text-align:center;">Account</span></td>
        <td width="88px" style="text-align:center;"><span class="finaff-webform-field-label" style="text-align:center;">Activity</span></td>
        <td width="88px" style="text-align:center;"><span class="finaff-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="finaff-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="finaff-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="finaff-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="finaff-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="finaff-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="finaff-webform-field-input" style="width:88px;" /></td>
    </tr>
</table>

在我看来，由于某种原因，HtmlTableRow 的创建并未完全“翻译”为生成的 html。

更新 3

我也尝试向文本框添加 ID，如下所示：

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

...但是在生成的 HTML（“查看源代码”）中搜索“boxIndex2foapalrow3”却发现连萝卜都没有。

我可以理解为什么需要对“正确”元素进行标识才能使其工作，但为什么这些标识甚至没有出现在生成的 HTML 中？

我们在这里得到的（除了永远无法通信）是添加到 HtmlTableCells 的 TextBoxes，它被添加到 HtmlTableRows，它被添加到 HtmlTable。这是我在 C# 代码隐藏中设置不可见的 HtmlTableRow：

foapalrow3.Visible = false;

...但似乎将其重新设置为可见是一个谜团包裹在一个谜团中，等等。

也许单元格也需要 ID，例如：

cellColAmount2.ID = "cellAmount2foapalrow3";

更新 4

我认为这应该很明显 - 当元素不可见时，它们不会在页面上呈现，因此在“查看源代码”中找不到它们，因此在搜索 ID 时找不到它们以“foapalrow3”结尾。

所以我仍然不知道如何做我想做的事，但我知道为什么我现在（实际上是以前）的方法会失败。

也许与其让他们隐形，不如给他们一个相当于平地协会成员的综合智商 (0) 的高度。

更新 5

我尝试通过在代码隐藏中将 HtmlTableRow 的 Height val 更改为 zilch 来使用高度：

foapalrow3.Height = "0";

...但这也不起作用，因为将高度设置为零没有任何作用 - 该行显示为完整/正常高度...

更新 6

根据 David Waters 的回答，我尝试了这个：

代码隐藏：

foapalrow3.Attributes.Add("display", "none");
foapalHTMLTable.Rows.Add(foapalrow3);
//foapalrow3.Visible = false;

jQuery:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    if ($('[id$=foapalrow3]').not(":visible")) {
        console.log('reached the foapalrow3 not visible branch');
        $('[id$=foapalrow3]').attr("display", "table-row");
    }
    else if ($('[id$=foapalrow4]').not(":visible")) {
        console.log('reached the foapalrow4 not visible branch');
        $('[id$=foapalrow4]').slideDown();
    }
});

...但是不行。从 git-go 中仍然可以看到 HtmlTableRow。

更新 7

我将此添加到代码隐藏中：

foapalrow3.Attributes["class"] = "hiddenTableRow";
foapalHTMLTable.Rows.Add(foapalrow3);

...这个脚本文件：

<style>
.hiddenTableRow {
   display:none;
}
</style>
<script type="text/javascript">

/* This is supposed to make the rows visible, but is not yet working... */
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    $("[id$=foapalrow3]").removeClass("hiddenTableRow");
    if ($('[id$=foapalrow3]').not(":visible")) {
        $('[id$=foapalrow3]').attr("display", "table-row");
    }
    else if ($('[id$=foapalrow4]').not(":visible")) {
        console.log('reached the foapalrow4 not visible branch');
        $('[id$=foapalrow4]').slideDown();
    }
});

</script>

...但是 foapalrow3 仍然在 git-go 中可见；然而，单击按钮确实会添加下一个（第三个空白行，即 foapalrow4），所以，我们走在正确的轨道上，但在时髦的小镇上仍有一些东西。

【问题讨论】：

能否请您发布 C# 代码生成的 HTML 代码。它是如何产生的并不重要，重要的是结果是什么。
好的，请看更新。
仍然没有添加整个 HTML。但这似乎是一个 C# 问题。
我们需要查看生成的html。
好的，我将相关生成的html添加到Update 2中。

标签： javascript c# jquery html css

【解决方案1】：

从服务器端代码中删除 foapalrow3.Visible = false;，因为这将阻止为该行生成 html
应用 CSS 属性 display:none; 为 foapalrow3 添加类或样式
在您单击按钮时，可以从 foapalrow3 中删除该类，或者如果您选择使用样式属性，请将 display 更改为 display:table-row;

例如

CSS

.hiddenTableRow {
   display:none;
}

.Net

// foapalrow3.Visible = false;
// Edit - CssClass is not present on HtmlTableRow
// foapalrow3.CssClass = "hiddenTableRow";
foapalrow3.Attributes["class"] = "hiddenTableRow";

Javascript

$("[Css Selector To find the Row]").removeClass("hiddenTableRow");

【讨论】：

foapalrow3.CssClass = "hiddenTableRow" 不会编译；我没有可用的“CssClass”...
抱歉没有测试我的代码，用.Attributes["class"] = "...";重试
查看html页面的源码，查看哪一行添加了样式，查看哪些样式应用到了你想要不可见的行。从那里开始工作。