Question

好吧，我是javascript和jQuery的菜鸟。我正在使用jQuery UI页面上的.dialog示例。我已经对标记进行了一些更改，因此我在第一次提交时得到了“* idName * null”，但之后，它完成了我需要做的事情。似乎计数从null开始然后增加1,2,3，依此类推...下面是我正在使用的代码：

$(function () {
    var rowID = document.getElementById("RowPlaceholder"),
        fName = $("#fName"),
        lName = $("#lName"),
        jTitle = $("#jTitle"),
        cPhone = $("#cPhone"),
        oPhone = $("#oPhone"),
        eMail = $("#eMail"),
    allFields =  $([]).add(fName).add(lName).add(jTitle).add(cPhone).add(oPhone).add(eMail),
    tips = $(".validateTips");
    function updateTips(t) {
        tips
        .text(t)
        .addClass("ui-state-highlight");
        setTimeout(function () {
            tips.removeClass("ui-state-highlight", 1500);
        }, 500);
    }
    function checkLength(o, n, min, max) {
        if (o.val().length > max || o.val().length < min) {
            o.addClass("ui-state-error");
            updateTips("Length of " + n + " must be between " +
            min + " and " + max + ".");
            return false;
        } else {
            return true;
        }
    }
    $("#dialog-form").dialog({
        autoOpen: false,
        height: 470,
        width: 350,
        modal: true,
        buttons: {
            "Add Contact": function () {
                var bValid = true;
                allFields.removeClass("ui-state-error");
                bValid = bValid && checkLength(fName, "fName", 1, 16);
                bValid = bValid && checkLength(lName, "lName", 1, 16);
                bValid = bValid && checkLength(cPhone, "cPhone", 10, 16);
                bValid = bValid && checkLength(oPhone, "oPhone", 10, 16);
                bValid = bValid && checkLength(eMail, "eMail", 10, 80);
                if (bValid) {
                    $("#users tbody").append(
                    "<tr>" +
                    "<td id=\"fName" + rowID + "\">" + fName.val() + "</td>" +
                    "<td id=\"lName" + rowID + "\">" + lName.val() + "</td>" +
                    "<td id=\"jTitle" + rowID + "\">" + jTitle.val() + "</td>" +
                    "<td id=\"cPhone" + rowID + "\">" + cPhone.val() + "</td>" +
                    "<td id=\"oPhone" + rowID + "\">" + oPhone.val() + "</td>" +
                    "<td id=\"eMail" + rowID + "\">" + eMail.val() + "</td>" +
                    "</tr>")
                rowID++;
                    $(this).dialog("close");
                }
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            allFields.val("").removeClass("ui-state-error");
        }
    });
    $("#create-user")
    .button()
    .click(function () {
        $("#dialog-form").dialog("open");
    });
});

Answer 1

看看Here。在未找到id的情况下，getelementById似乎返回null。我的猜测是RowPlaceholder不存在并且返回null。在JavaScript null + 1中将返回1，这就是它在第一个实例之后再次开始工作的原因。

Answer 2

我只是设置了一个ID为RowPlaceholder的表单，并将其设置为隐藏在css中。这样做了。谢谢你的正确方向

使用JavaScript分配ID

2 个答案: