我如何使用jQuery来显示HtmlTableRow（启动生命隐形/隐藏）？

时间：2015-06-22 18:01:42

标签： javascript c# jquery html css

我通过服务器端（C＃）代码创建一些html元素。由于这是一个jQuery论坛，我不会显示该代码，但它添加了一个列标题行和第一行＆＃34;文本框＆＃34;那是可见的;然后，我再添加两行文本框，这些文本框开始是不可见的。我另外（没有双关语）有一个按钮（带有标题＆＃34; +＆＃34;），它应该使第一个不可见的行在第一次点击时可见，第二个不可见的行在第二次点击时可见。我试图用这个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();
    }
});

我确实看到＆＃34;到达了foapalrow3不可见的分支＆＃39;＆＃34;在控制台中记录消息，但是slideDown（）和＆＃34; visibility = visible＆＃34;代码做了一件事情（请原谅我19世纪的偏僻方言）。

我需要做些什么才能对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的代码相同，除了明显的差异。所以，基本上，我需要点击＆＃34; +＆＃34;按钮是设置：

foapalrow3.Visible = false;

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

enter image description here

更新

我查看了页面生成的HTML，并对以下几点感到惊讶：一，jQuery出现在那里两次（它重复） - 为什么？

第二，也许更重要的是，没有＆＃34; foapalrow3＆＃34;在源代码中的任何地方，虽然这是我给HtmlTableRow的ID。难怪它没有得到回应，如果它没有意识到一个元素的存在，其ID以＆＃34; foapalrow3＆＃34;结尾。按钮的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

以下是＆＃34;第5节＆＃34;的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的创建并没有完全被翻译成＃34;由于某种原因生成的HTML。

更新3

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

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

...但是搜索生成的HTML（＆＃34;查看源代码＆＃34;）＆＃34; boxIndex2foapalrow3＆＃34;甚至连萝卜都没有。

我能理解为什么＆＃34;对＆＃34;元素需要ID才能生效，但为什么ID甚至不会出现在生成的HTML中？

我们在这里（除了永久的沟通失败之外）是添加到HtmlTableCells的TextBoxes，它被添加到HtmlTableRows，它们被添加到HtmlTable中。我在C＃代码隐藏中设置隐形的是HtmlTableRow：

foapalrow3.Visible = false;

......但似乎把它设置回可见是一个包裹在神秘的谜中的难题等等。

也许细胞也需要ID，例如：

cellColAmount2.ID = "cellAmount2foapalrow3";

更新4

我认为它应该是显而易见的 - 当元素不可见时，它们不会在页面上呈现，因此它们不会出现在＆＃34; View Source＆＃34;因此在搜索以＆＃34; foapalrow3＆＃34;结尾的ID时找不到它们。

所以我仍然不知道如何做我想做的事情，但我知道为什么我现在（现在以前的，实际上）的方法都是火上浇油。

也许不是让它们看不见，我必须给它们一个相当于Flat Earth Society（0）成员组合智商的高度。

更新5

我尝试使用height来使其工作，通过在代码隐藏中将HtmlTableRow的高度值更改为zilch：

foapalrow3.Height = "0";

...但是这也没有用，因为将高度设置为零什么也没做 - 行显示在完全/正常高度......

更新6

Riffing David Waters＆＃39;回答，我试过这个：

代码隐藏：

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），因此，我们正在正确的轨道上，但在时髦的小镇仍然有些东西。

1 个答案:

答案 0 :(得分：1)

  1. 从服务器端代码中删除foapalrow3.Visible = false;，因为这会阻止为此行生成html
  2. 使用CSS属性display:none;
    3. 向foapalrow3添加类或样式
  3. 点击你的按钮，点击从foapalrow3删除课程，或者如果你选择使用样式属性，将display更改为display:table-row;

    4. e.g。

    CSS 

    .hiddenTableRow {
   display:none;
}

    净

    // 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");
相关问题
最新问题