網頁特效動態增加文本輸入框並帶刪除按鈕代碼
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "HTTP://www.w3.org/tr/xhtml1/dtd/ xhtml1-transitional.dtd">
<html xmlns="HTTP://www.jzread.com/1999/xhtml">
<head>
<meta HTTP-equiv="content-type" content="text/html; charset=utf-8" />
<title>網頁特效動態增加文本輸入框並帶刪除按鈕代碼</title>
</head>
<body>
<div id="d">
<input type="text" />
</div>
<input type="button" id="b" value="添加" />
</body>
<script language="javascript">
document.getelementbyid("b").onclick=function(){
document.getelementbyid("d").innerhtml+='<br><input type="text" />';
}
</script>
</html>
方法二帶刪除按鈕
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "HTTP://www.w3.org/tr/xhtml1/dtd/ xhtml1-transitional.dtd">
<html xmlns="HTTP://www.jzread.com/1999/xhtml">
<head>
< meta HTTP-equiv="content-type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<div id="d">
<input type="text" name="text_0"/>
</div>
<input type="button" id="b" value="添加"/>
& lt;/body>
<script language="javascript">
i = 1;
document.getelementbyid("b").onclick=function() {
document.getelementbyid("d").innerhtml+='<div id="div_'+i+'"><input name="text" name="text_'+ i+'" type="text" /><input type="button" value="刪除" onclick="del('+i+')"/></div>';
i = i + 1;
}
function del(o){
document.getelementbyid("d").removechild(document.getelementbyid("div_"+o));
}
</script>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
