好吧,我是一個JavaScript和jQuery的noob。我正在使用jQuery UI頁面上的.dialog示例。我在標記中做了一些修改,結果我得到了一個「* idName * null」用於我的第一次提交,但之後,它做了我需要它做的事情。這似乎是計數開始於空,則增加了1,2,3,等等......下面是我的工作代碼:用JavaScript指定一個ID
$(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");
});
});
是的,我只是設置一個窗體與ID爲RowPlaceholder並將其設置爲隱藏在CSS中。這個伎倆。感謝您的正確方向。 – 2013-05-15 22:21:09