本文介绍了如何使用jQuery动态地在网页中添加输入框，并包含了删除已有输入框的功能。
动态添加输入框,不废话,直接上代码
<!DOCTYPE html>
<html><head lang="en">
<meta charset="UTF-8">
<title>添加选项</title>
<script type="text/javascript">
function add(){var liLength = ($("#ui li").length)+1;
var Name = getName(liLength-1);
if(Name==null){
alert("选项过多");
}else{
$("#ui").append("<li id="+Name+">"+Name+" : <input type='text'/> <a name="+Name+" onclick='removeX(this.name)' href='#'>移除</a></li>");
}
}
function removeX(str){//删除选项
console.debug(str);
var strV = $('#'+str+'');
//console.debug(strV);
var uiArr = $("#ui li");
//console.debug(uiArr);
for(i=0;i<uiArr.length;i++){
// console.debug(uiArr[i].id);
if(uiArr[i].id==str){
console.debug(" 第几个 "+i);
console.debug(" uiArr[i].id "+uiArr[i].id);
console.debug(" str "+str);
}
}
$('#'+str+'').remove();//删除
}
var strArr =['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
function getName(liLength){
if(liLength>strArr.length){
return null;
}else{
return strArr[liLength];
}
}
</script>
</head>
<body>
<input type="button" onclick="add()" value="点击添加"/>
<form >
<ui id="ui">
<li id="A">A : <input type="text" /> <a name="A" onclick="removeX(this.name)" href="#">移除</a></li>
</ui>
</form>
</body>
</html>
扫一扫
3100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
