Question

我在表单视图中有一个标签控件，显示几个文本框的总和。我无法在java脚本中获得标签tb_TA_2_6的id。

我试过

<script type ="text/jscript" language= "javascript" >
 function autosum(t1, t2) {
var sum;
var a = document.getElementById('tb_TA_2_6'); // does not work
var b = FindControl(FormView1, t2); // does not work
var c = <%= 'tb_TA_2_6'.ClientID%>; // unknown component tb_TA_2_6
var c = <%= tb_TA_2_6.ClientID%>; //The name 'tb_TA_2_6' does not exist in the current context

var num2 = $(t2);
    if (num2.textContent)
        sum = num2.textContent;
    else if (num2.innerText)
        sum = num2.innerText;
    else
        sum = num2.innerHTML;
 }

function FindControl(parentControl, strId)
    {
        var returnObject;
        for(i=0;i < parentControl.elements.length; i++)
        {
            if(parentControl.elements[i].id.indexOf(strId) >= 0)
                returnObject = parentControl.elements[i];
            else if(parentControl.elements[i].hasChildNodes())
                returnObject = FindControl(parentControl.elements[i],strId);

            if(returnObject != null) 
            {   //if object is found return
                return returnObject;
            }
        }
        return returnObject;
    }
 </script>

但似乎没有任何效果，是否有人知道ID为tb_TA_2_6的标签会发生什么。

表单视图看起来像

<asp:FormView ID="FormView1" runat="server" ClientIDMode="Static">
<ItemTemplate>
    <asp:Label ID="labelID" runat="server" Text='<%#Bind("ID") %>' Visible="false"></asp:Label>
    <table id="table1">
        <tr>
            <td>
                <span > Textbox1 </span>
            </td>
            <td>
                <asp:TextBox ID="tb_TA_2_4" onBlur="Javascript:autosum(this, '<%= tb_TA_2_6.ClientID%>');"  runat="server"  Text='<%#Bind("question6i","{0:$#,#0.00}") %>'></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <span>6. (iii) Total Value  </span>
            </td>
            <td>
                <asp:Label ID="tb_TA_2_6" runat="server" ReadOnly="true" Text='<%#Bind("question6iii", "{0:$#,#0.00}") %>'  OnPreRender="FormView1_PreRender" ></asp:Label>
            </td>
        </tr>
    </table>
</ItemTemplate>

html呈现如下，我删除了问题中的样式信息。

<tr>

                    <td style="vertical-align: middle; width: 697px; height: 15px; border-style: solid;

                        border-color: #6699cc; border-width: 1px; border-top: 1px solid #fff;">

                        <span style="font-family: MS Sans Serif; font-size: 14px; color: #000000">6. (iii) Total

                            Value of All Benefits For Payment of Utilities </span>

                    </td>

                    <td class="alignright" style="vertical-align: top; width: 157px; height: 15px; border-style: solid;

                        border-color: #6699cc; border-width: 1px; border-left: 1px solid #fff; border-top: 1px solid #fff;">

                        <span id="ctl00_cph_Main_FormView1_tb_TA_2_6" ReadOnly="true" style="font-size:12pt;">$60.00</span>

                    </td>

                </tr>

Answer 1

Label控件在HTML中呈现为span。

要访问它，您需要获取ClientID。

您可以将您的javascript更改为：

var a = document.getElementById('<%= tb_TA_2_6.ClientID %>');

您的var c示例将Label控件名称包含在引号中，这就是它失败的原因。

如果您希望控件完全按照指定的方式呈现其ID，您还可以为您的页面设置ClientIDMode至static。然后，您的原始getElementById将按预期工作，而无需获取呈现的ClientID。

请参阅MSDN了解ClientIDMode信息。

编辑：如果您的控件是容器模板的一部分，则需要通过获取容器控件然后从中执行FindControl来以不同方式访问控件。

var a = document.getElementById('<%= FormView1.FindControl("tb_TA_2_6").ClientID %>');

Answer 2

我们可以看到ID为“tb_TA_2_6”的ASP.NET标签呈现为ID为“ctl00_cph_Main_FormView1_tb_TA_2_6”的span元素。

然后

document.getElementById('ctl00_cph_Main_FormView1_tb_TA_2_6')将选择该元素。

您还应该知道，您的标签是在ItemTemplate的{{1}}内创建的，并且很可能会呈现多个项目。这就是您无法访问FormView。

的原因

现在，您希望Javascipt从哪个项目中选择tb_TA_2_6.ClientID元素？

<强>更新

看起来您正在尝试创建一个表并总结每行的某些值。我们走了;

ASP.NET UserControl

span

HTML ，预期输出的示例

<table id="myTable">
<asp:FormView ID="FormView1" runat="server">
<ItemTemplate>
    <tr>
        <td><span>Textbox1</span></td>
        <td><asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("question6i", "{0:$#,#0.00}") %>' class="myValue" /></td>
    </tr>
</ItemTemplate>
</asp:FormView>

    <tr>
        <td><span>6. (iii) Total Value</span></td>
        <td><asp:Label ID="TextBox1SumLabel" runat="server" Text='<%# Bind("question6iii", "{0:$#,#0.00}") class="sum" %>' /></td>
    </tr>
</table>

Javascript ，jQuery

<table id="myTable" class="styledTable">
    <tr>
        <td><span>Textbox1</span></td>
        <td><input type="text" id="SomeGeneratedClientID_00" class="myValue" Value='60.00' /></td>
    </tr>
    <tr>
        <td><span>Textbox1</span></td>
        <td><input type="text" id="SomeGeneratedClientID_01" class="myValue" Value='40.00' /></td>
    </tr>

    <tr>
        <td><span>6. (iii) Total Value</span></td>
        <td><span ID="ctl00_cph_Main_TextBox1SumLabel" class="sum">100.00</span></td>
    </tr>
</table>

为你创造了一个demo，真的希望这会对你有所帮助。

使用javascript获取asp.net Label控件

2 个答案: