如何用JavaScript动态增加网页按钮?

请帮我写一个html文件,页面里有两个按钮,每点击一次按钮A就动态增加一行这样的显示:"文本框-->文本框的距离是文本框"(这里的"文本框"要在网页里显示为真实的文本框,... 请帮我写一个html文件,页面里有两个按钮,每点击一次按钮A就动态增加一行这样的显示:"文本框-->文本框的距离是文

本框"(这里的"文本框"要在网页里显示为真实的文本框,其余的都是字符串);
每点击一次按钮B就把最后增加的一行删除掉(防止你不小心多增加了一行)

对JavaScript不是很熟悉, 多谢了........如果有描述不清的地方请指出....... 展开

 我来答

4个回答

#热议# 什么是淋病？哪些行为会感染淋病？

dong1dong1_80
2010-09-30 · 超过44用户采纳过TA的回答

知道小有建树答主

回答量：117

采纳率：0%

帮助的人：114万

我也去答题访问个人页

关注

展开全部

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">

LastTableID = 0;

function add() {
LastTableID = LastTableID + 1;

adTable = document.getElementById('atb_' + LastTableID);
if (adTable != null) {
adTable.style.display = "block";
}
else {
str = '<table id="atb_' + LastTableID + '" style="display:block">';
str = str + '<tr height="25" align=center valign=middle bgcolor=#FFFFFF>';
str = str + '<td><input type="text" name="input1_' + LastTableID + '"></td>';
str = str + '<td>--></td>';
str = str + '<td><input type="text" name="input2_' + LastTableID + '"></td>';
str = str + '<td>的距离是：</td>';
str = str + '<td><input type="text" name="input3_' + LastTableID + '"></td>';
str = str + '</tr></table>';
window.upid.innerHTML += str + '';
}
}

function dellast() {

//alert(LastTableID);

if (LastTableID > 0) {

deleTable = document.getElementById('atb_' + LastTableID);

if (deleTable != null) {

deleTable.style.display = "none";

LastTableID = LastTableID - 1;
}
}

}
</script>
</head>
<body>
<form name="myform">
<table>
<tr>
<td>
<input name="Submit2" type="button" onclick="javascript:add()" value="增加">
<input type="button" name="del" onclick="javascript:dellast()" value="删除">
</td>
</tr>
<tr>
<td>
<div id="upid"></div>
</td>
</tr>
</table>
</form>
</body>
</html>

本回答由提问者推荐

已赞过 已踩过<

评论收起

tonylinzhen
2010-09-30 · TA获得超过1368个赞

知道小有建树答主

回答量：997

采纳率：50%

帮助的人：397万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Downloads</title>
<script language="javascript">
window.onload = function(){
window.new_link = $("link_tr").cloneNode(true);
window.new_link.removeAttribute("id");
window.new_link.getElementsByTagName("a")[0].style.display = "";
}

function $(id){
return document.getElementById(id);
}

function more_link(){
var newl = new_link.cloneNode(true);
var a = newl.getElementsByTagName("a")[0];
bind(a, "click", function(){delete_link(a);});
$("link_tb").appendChild(newl);
}

function delete_link(o){
while(o.parentNode){
o = o.parentNode;
if(typeof o.tagName != 'undefined' && o.tagName == 'TR'){
o.parentNode.removeChild(o);
break;
}
}
}

function bind(o, eventHandler, fun){
if(o.attachEvent)
o.attachEvent('on'+eventHandler,fun);
else if(o.addEventListener)
o.addEventListener(eventHandler,fun,false);
}
</script>
</head>
<body>
<form action="" method="post" name="add_form">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody id="link_tb">
<tr id="link_tr">
<td>URL: <input name="link[url][]" type="text" size="55" />
<a href="javascript:void(null);" style="display:none;">删除</a>
</td>
</tr>
</tbody>
</table>
</form>
<a href="javascript:more_link()">继续添加地址</a>
</body>
</html>

细节上你自己可以改掉成为你自己的样式或文本

已赞过 已踩过<

评论收起

蓓雷
2010-09-30 · TA获得超过2894个赞

知道小有建树答主

回答量：869

采纳率：0%

帮助的人：229万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>动态增加控件</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="button" id="btnA" value="增加" /><input type="button" id="btnB" value="删除" />
<div id="divContainer">
</div>
<script type="text/javascript">
$(function () {
$("#btnA").bind("click", function () {
$("#divContainer").append("<div><input type='text' value='" + ($("#divContainer div").length+1) + "'/>--><input type='text'/>的距离是<input type='text'/></div>");
});
$("#btnB").bind("click", function () {
$("#divContainer div:last").remove();
});
});
</script>
</body>
</html>
用jQuery实现，你得下载jQuery。

已赞过 已踩过<

评论收起

nix1001
2010-09-30 · TA获得超过218个赞

知道答主

回答量：81

采纳率：0%

帮助的人：68.8万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function addRow(){
var tab = document.getElementById("tab");
row = tab.insertRow(tab.rows.length);
cell1 = row.insertCell();
cell2 = row.insertCell();
cell3 = row.insertCell();
cell4 = row.insertCell();
cell5 = row.insertCell();
cell6 = row.insertCell();
cell1.innerText=tab.rows.length-1;
cell2.innerHTML="<input type='text' />";
cell3.innerText="-->";
cell4.innerHTML="<input type='text' />";
cell5.innerHTML="的距离";
cell6.innerHTML="<input type='text' />";
}

function delLastRow(){
var tab = document.getElementById("tab");
tab.deleteRow(tab.rows.length-1);
}
</script>

</head>

<body>
<input type="button" onclick="addRow()" value="新增" />
<input type="button" onclick="delLastRow()" value="删除" />
<br />
<table width="600px" border="0" cellspacing="0" cellpadding="0" id="tab">
<tr>
<td width="30px"></td>
<td width="150px"></td>
<td width="20px"></td>
<td width="150px"></td>
<td width="50px"></td>
<td width="150px"></td>
</tr>
</table>
</body>
</html>

已赞过 已踩过<

评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何用JavaScript动态增加网页按钮?

其他类似问题

为你推荐：