javascript - 如何使用jQuery来显示HtmlTableRow(开始隐藏/隐藏生命)？

Question

我正在通过服务器端（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在其中出现了两次（重复出现）-为什么？

其次，也许更重要的是，尽管我给HtmlTableRow赋予了ID，但在源代码的任何地方都没有“ foapalrow3”。难怪如果它不知道其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">

...因此处理了它的click事件，但是为什么不记录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”，结果却没有萝卜。

我能理解为什么“正确”的元素需要ID才能起作用，但是为什么ID甚至不显示在生成的HTML中？

除了永久性的通信失败之外，我们在此处得到的是将文本框添加到HtmlTableCells，将它们添加到HtmlTableRows，并将它们添加到HtmlTable。我在隐藏的C＃代码中设置的是HtmlTableRow：

foapalrow3.Visible = false;

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

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

cellColAmount2.ID = "cellAmount2foapalrow3";

？

更新4

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

所以我仍然不知道该怎么做，但是我知道为什么我现在的方法（实际上是以前的方法）会引起轰动。

也许不是使它们不可见，我必须使它们的高度等于“平地社会”成员的综合智商（0）。

更新5

我通过在后面的代码中将HtmlTableRow的Height val更改为zilch来尝试使用height使其工作：

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();
    }
});

...但不行。 HtmlTableRow从git-go仍然可见。

更新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），因此，我们处在正确的轨道上，但时髦的小镇还是有些笨拙。

Answer 1

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


例如

的CSS

.hiddenTableRow {
   display:none;
}

。净

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

Java脚本

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