如何使用jQuery来显示HtmlTableRow(开始隐藏/隐藏生命)? [英] How can I use jQuery to get an HtmlTableRow (which starts life invisible/hidden) to display?

查看：105
本文介绍了如何使用jQuery来显示HtmlTableRow(开始隐藏/隐藏生命)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在通过服务器端(C#)代码创建一些html元素.由于这是一个jQuery论坛，因此我不会显示该代码，但会添加一个列标题行和一个可见的文本框"的第一行.然后，我再添加两行以不可见的文本框.另外，我(没有双关语)有一个按钮(带有标题"+")，该按钮应使第一次单击时可见的第一行不可见，而在第二次单击时可见的第二行不可见.我正在尝试使用此jQuery实现这一点:

I am creating some html elements via server-side (C#) code. Since this is a jQuery forum, I won't show that code, but it adds a column caption row and a first row of "textboxes" that are visible; then, I add two more rows of textboxes that start off invisible. I additionally (no pun intended) have a button (with the caption "+") that should make the first invisible row visible on the first click, and the second invisible row visible on the second click. I'm trying to accomplish that with this 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年代的偏僻方言).

I do see the "reached the foapalrow3 not visible branch'" log msg in the console, but neither the slideDown() nor the "visibility=visible" code does a durned thing (pardon my 1800s backwoods dialect).

我该怎么做才能使foaplarow3(和4，视情况而定)?

What do I need to do to visiblize foaplarow3 (and 4, as appropriate)?

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

Here's the code-behind/server-side (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的代码相同，但有明显的区别.因此，基本上，我只需单击"+"按钮就可以进行设置:

The code for foapalrow4 is the same as the above for foapalrow3, except for the obvious differences. So, basically, all I need to happen on the clicking of the "+" button is to set:

foapalrow3.Visible = false;

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

...but via jQuery. And this is what it looks like:

我查看了页面生成的HTML，并对以下几件事感到惊讶:一，jQuery在其中出现了两次(重复出现了)-为什么?

I looked at the generated HTML for the page, and was surprised by a couple of things: one, the jQuery appears in there twice (it's duplicated) - why?

第二个，也许更重要的是，在源代码中的任何地方都没有"foapalrow3"，尽管这是我给HtmlTableRow赋予的ID.难怪如果它不知道其ID以"foapalrow3"结尾的元素的存在，它就不会得到响应.按钮的ID在此处:

Second, and perhaps more significantly, there is no "foapalrow3" anywhere in the source, although that is the ID I give the HtmlTableRow. No wonder it's not being responded to, if it isn't aware of the existence of an element whose ID ends with "foapalrow3". The button's ID is there:

<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，我该怎么做呢?

...and thus its click event is handled, but why isn't the ID for the HtmlTableRow not recorded, and what do I have to do so that it is?

以下是第5节"的HTML，应在其中显示行:

Here is the HTML for "Section 5" which is where the rows should appear:

<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.

It seems to me that the creation of the HtmlTableRow is not being fully "translated" to the generated html for some reason.

我也尝试将ID添加到文本框，如下所示:

I tried adding IDs to the Textboxes, too, like so:

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

...但是在生成的HTML(查看源代码")中搜索"boxIndex2foapalrow3"，结果甚至没有萝卜.

...but searching the generated HTML ("View Source") for "boxIndex2foapalrow3" turns up not even a turnip.

我可以理解为什么需要对正确的"元素进行ID才能起作用，但是为什么ID甚至不显示在生成的HTML中?

I can understand why the "right" elements need to ID'd for this to work, but why do the IDs not even show up in the generated HTML?

我们在这里遇到的问题(除了永远无法通信之外)是将文本框添加到HtmlTableCells，将它们添加到HtmlTableRows，又将它们添加到HtmlTable.我将HtmlTableRow设置为在C#背后的代码中不可见:

What we've got here (in addition to the everlasting failure to communicate) is TextBoxes added to HtmlTableCells, which are added to HtmlTableRows, which are added to an HtmlTable. It is the HtmlTableRow that I'm setting invisible in the C# code-behind:

foapalrow3.Visible = false;

...但是似乎将它重新设置为可见是包裹在谜团中的难题，包裹在谜团中，等等.

...but it seems like setting it back to visible is a conundrum wrapped in an enigma wrapped in a mystery, etc.

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

Maybe the cells need IDs too, like: 

cellColAmount2.ID = "cellAmount2foapalrow3";

?

我认为这应该是显而易见的-当元素不可见时，它们不会在页面上呈现，因此在查看源代码"中找不到它们，因此在搜索ID为以下值的ID时也找不到它们以"foapalrow3"结尾.

I reckon it should have been obvious - when the elements are not visible, they are not rendered on the page, and thus they are not found in the "View Source" and thus they are not found when searching for an ID that ends with "foapalrow3".

所以我仍然不知道如何去做我想做的事，但是我知道为什么我现在的(实际上是以前的)方法会火上浇油.

So I still don't know how to do what I want, but I know why my present (now former, actually) approach hung fire.

也许不是让它们隐身，而是要给它们一个高度，相当于平面地球协会(0)成员的综合智商.

Perhaps rather than making them invisible, I'll have to give them a height the equivalent of the combined IQ of the members of the Flat Earth Society (0).

我尝试通过在后面的代码中将HtmlTableRow的Height val更改为zilch来使高度起作用:

I tried using height to get it to work, by changing the HtmlTableRow's Height val to zilch in the code-behind:

foapalrow3.Height = "0";

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

...but that did not work, either, because setting the height to zero did nothing - the row displays at full/normal height...

根据David Waters的回答，我尝试了以下方法:

Riffing on David Waters' answer, I tried this:

隐藏代码:

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.

...but no go. The HtmlTableRow is still visible from the git-go.

我将其添加到了后面的代码中:

I added this to the code-behind:

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

...并将其保存到脚本文件中:

...and this to the script file:

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

...but foapalrow3 is still visible from the git-go; yet, clicking the button does add the next (third blank row, which is foapalrow4) so, we're on the right track, but something is still phunky in funky town.

推荐答案

  1. 从服务器端代码中删除foapalrow3.Visible = false;，因为这将阻止为该行生成html
  2. 应用CSS属性display:none;
    3. 向foapalrow3添加类或样式
  3. 在按钮上单击，或者从foapalrow3中删除类，或者如果您选择使用样式属性，请将display更改为display:table-row;
  1. Remove foapalrow3.Visible = false; from the server side code, as this will prevent html being generated for this row
  2. Add a class or style to foapalrow3 applying the CSS property display:none;
  3. On you button click either remove the class from foapalrow3 or if you choose to use a style attribute change display to 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

Javascript

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

这篇关于如何使用jQuery来显示HtmlTableRow(开始隐藏/隐藏生命)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆