我一直在尝试使用 JQuery 来添加或删除表单输入文本字段的函数。我一直在使用我发现的一个例子作为起点。
这是我到目前为止所拥有的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml`enter code here`1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function valid_to(txt1id) {
var toval = document.getElementById(txt1id).value;
if(toval == "") {
alert("Text Field1 is Empty");
document.getElementById(txt1id).focus();
return false;
}
}
function calc_from(txt2id) {
if(document.getElementById(txt2id).value == "") {
alert("Text Field2 is Empty");
document.getElementById(txt2id).focus();
return false;
}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var max = 10, append_data, tabindex = 23;
/*If the add icon was clicked*/
$(".add").live('click',function(){
var divid = parseInt(document.getElementById("txt_rowcnt").value)+parseInt(1);
var id = parseInt(document.getElementById("txt_rowcnt").value)+parseInt(1);
if($("div[id^='txt_']").length <10){ //Don't add new textbox if max limit exceed
$(this).remove(); //remove the add icon from current text box
var tabindex2 = parseInt(tabindex)+1;
var append_data = '<div id="txt_'+divid+'" class="txt_div" style="display:none;"><div class="left"><input type="text" id="txt1_'+id+'" name="txt1_'+id+'" class="medium_input" dir="rtl" style="width:94px;" readonly="true" tabindex="'+tabindex+'" onblur="valid_to(this.id);"/><input type="text" id="txt2_'+id+'" name="txt2'+id+'" class="medium_input" dir="rtl" style="width:94px;" maxlength="5" tabindex="'+tabindex2+'" onblur="calc_from(this.id);"/></div><span class="right" style="float: left; margin-left: 7px; margin-top: 7px;"><img src="add.png" class="add"/> <img src="remove.png" class="remove"/></span></div>';
$("#text_boxes").append(append_data); //append new text box in main div
$("#txt_"+divid).effect("bounce", { times:3 }, 300); //display block appended text box with silde down
divid++;
id = parseInt(id)+1;
tabindex = parseInt(tabindex)+2;
} else {
alert("Maximum 100 textboxes are allowed");
}
document.getElementById("txt_rowcnt").value=parseInt(divid)-parseInt(1);
})
/*If remove icon was clicked*/
$(".remove").live('click',function(){
var prev_obj = $(this).parents().eq(1).prev().attr('id'); //previous div id of this text box
$(this).parents().eq(1).slideUp('medium',function() { $(this).remove(); //remove this text box with slide up
if($("div[id^='txt_']").length > 1){
append_data = '<img src="remove.png" class="remove"/>'; //Add remove icon if number of text boxes are greater than 1
}else{
append_data = '';
}
if($(".add").length < 1){
$("#"+prev_obj+" .right").html('<img src="add.png" class="add"/> '+append_data);
document.getElementById("txt_rowcnt").value=parseInt(document.getElementById("txt_rowcnt").value)-parseInt(1);
}
});
})
});
</script>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data" >
<table>
<tr>
<td> Textboxes </td>
</tr>
<tr>
<td>
<div id="text_boxes">
<div id="txt_1" class="txt_div">
<div class="left">
<input type="text" name="txt1_1" id="txt1_1" tabindex="21" onblur="valid_to(this.id);" />
<input type="text" name="txt2_1" id="txt2_1" tabindex="22" onblur="calc_from(this.id);"/>
<span class="right" style="margin-top:7px;"> <img src="add.png" class="add"/> </span>
</div>
</div>
</div>
</td>
</tr>
<input type="hidden" name="txt_rowcnt" id="txt_rowcnt" value="1" />
</table>
</form>
</body>
</html>
当我在浏览器中查看页面时，我感到困惑的是为什么。
我可以看到两个带有添加图像按钮的文本字段，但是当我单击添加按钮时，它会隐藏起来，而不是使用添加和删除按钮获取新行。
有人可以启发我吗？