Question

在将动态创建的字符串作为document.getElementById的clientID传递时，您是否必须执行任何特殊操作？

我有一个asp：gridview控件，它有一个文本框列和一个复选框列。我在复选框中添加了一个onclick事件，将该行的文本框值设置为所有已检查行+1的最大值。我传入网格的ID和所选行的控件。我可以为这些控件获取getElementByID，但是当我动态构建其他控件的ID时，即使我知道ID是正确的，我仍然会变为null。我的代码如下。

function SetPriority(cbID, tbID, gridID) {
    var cb = document.getElementById(cbID);
    if (cb.checked) {
        var tb = document.getElementById(tbID);
        var grid = document.getElementById(gridID);

        var maxv = 0;

        for (var i = 0; i < grid.rows.length; i++) {
            var indexID = 102 + i;
            var cbClientID = 'LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ct' + indexID + '_chkGroup';
            var tbClientID = 'LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ct' + indexID + '_txtPriority';

            console.log("row" + i);

            //just for example of how it should be working
            console.log(cbID);
            var cbx = document.getElementById(cbID);
            console.log(cbx);

            //get row checkbox
            console.log(cbClientID);
            var thisCB = document.getElementById(cbClientID);
            console.log(thisCB);

            //get row textbox
            var thisTB = document.getElementById(tbClientID);
            console.log(thisTB);

            if (thisCB) {
                if (thisCB.type == "checkbox") {
                    if (thisCB.checked) {
                        if (thisTB.value > maxv)
                            maxv = thisTB.value;
                    }
                }
            }

        }
        tb.value = parseInt(maxv) + 1;
    }
}

以下是它在控制台中的显示方式，您可以在其中看到第一行的ID相同 console log screenshot

对于那些想知道我如何调用该函数的人，我将它添加到行数据绑定的.net gridview控件中的复选框。它呈现如下：

<input id="LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_chkGroup" type="checkbox" name="LeaveInfo$pnlMain$wgbLeaveSummary$gridSubmitted$ctl02$chkGroup" onclick="javascript:SetPriority('LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_chkGroup','LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_txtPriority','LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted');">

添加函数的vb .net代码是这样的...（on-_RowDataBound）

        Dim chk As CheckBox = CType(e.Row.FindControl("chkGroup"), CheckBox)
        Dim tb As TextBox = CType(e.Row.FindControl("txtPriority"), TextBox)

        chk.Attributes.Add("onclick", String.Format("javascript:SetPriority('{0}','{1}','{2}');", chk.ClientID, tb.ClientID, gridSubmitted.ClientID))

Answer 1

不，在动态构建字符串时，您不必执行任何特殊操作。无论是动态构建还是直接在代码中指定，javascript中的字符串都是相同的字符串。如果document.getElementById（）不起作用，则可能是以下原因之一：

您的字符串不是您认为的字符串，因此它与目标ID不匹配。
您的DOM ID不是您认为的。
您有多个具有相同ID的元素（此处不太可能，因为您不会获得null）
您在DOM准备好之前或在将所需元素添加到DOM之前调用getElementById()。

在这种情况下，1）或2）似乎更有可能是这里的问题，但是你没有告诉我们任何上下文来知道4）是否可能是问题。

Answer 2

不是100％肯定，但我认为这可能是一个背景问题。试试这个：

           function ( id ) {

            var ID  = document.getElementById;
            this.id = id;
            this.newvar = ID.call( document, this.id );

                  ... 

                }

此外，这个问题可能会对您有所帮助 - 它对上下文有很好的解释，并为var赋予了getElementById Why can't I directly assign document.getElementById to a different function?

Answer 3

我无法弄清楚为什么我看似相同的ID不是。我将把这个问题留给任何人，让他们更深入地了解如何解决这个问题。我最终只是按单元而不是ID来获取元素。

function SetPriority(cbID, tbID, gridID) {
    var cb = document.getElementById(cbID);
    if (cb.checked) {
        var tb = document.getElementById(tbID);
        var grid = document.getElementById(gridID);

        var maxv = 0;

        if (grid.rows.length > 0) {
            for (row = 1; row < grid.rows.length; row++) {
                var thisCB = grid.rows[row].cells[5].childNodes[1];
                if (thisCB == cb) {
                    continue;
                }
                var thisTB = grid.rows[row].cells[6].childNodes[1];

                if (thisCB.type == "checkbox") {
                    if (thisCB.checked) {
                        if (thisTB.value > maxv)
                            maxv = thisTB.value;
                    }
                }
            }
        }

        tb.value = parseInt(maxv) + 1;
    }
}

用于动态客户端ID的document.getElementById有问题

3 个答案: