javascript动态增多删除行
日期：2014-05-16 浏览次数：20346 次
javascript动态增加删除行
<html>
<head>
<script type="text/javascript">
function add(){
var num = parseInt(document.getElementById("num").value)+1;
document.getElementById("dyn").innerHTML += ("name"+num+"<input type='text' id='name"+num+"' /><br/><br/>");
document.getElementById("num").value=num;
}
function del(){
var num = parseInt(document.getElementById("num").value);
if(num == 0){
return;
}
var temp = document.getElementById("dyn").innerHTML;
document.getElementById("dyn").innerHTML = temp.substring(0,temp.indexOf("name"+num));
document.getElementById("num").value = num-1;
}
function jstoggle(togglecontent){
var temp = document.getElementById(togglecontent).style.display;
if(temp == "block" || temp==""){
document.getElementById(togglecontent).style.display = "none";
}else {
document.getElementById(togglecontent).style.display = "block";
}
}
</script>
<head>
<body>
<div id="hello" >
<p>hello world
</div>
<button id="dynadd" onclick="add();">add</button>
<button id="dyndel" onclick="del();">delete</button>
<button id="tog" onclick="jstoggle('dyn');">toggleDyn</button>
<button id="tog" onclick="jstoggle('hello');">toggleHello</button>
<div id="dyn">
<input type="hidden" id="num" value="0"/>
</div>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function add(){
var num = parseInt(document.getElementById("num").value)+1;
document.getElementById("dyn").innerHTML += ("name"+num+"<input type='text' id='name"+num+"' /><br/><br/>");
document.getElementById("num").value=num;
}
function del(){
var num = parseInt(document.getElementById("num").value);
if(num == 0){
return;
}
var temp = document.getElementById("dyn").innerHTML;
document.getElementById("dyn").innerHTML = temp.substring(0,temp.indexOf("name"+num));
document.getElementById("num").value = num-1;
}
function jstoggle(togglecontent){
var temp = document.getElementById(togglecontent).style.display;
if(temp == "block" || temp==""){
document.getElementById(togglecontent).style.display = "none";
}else {
document.getElementById(togglecontent).style.display = "block";
}
}
</script>
<head>
<body>
<div id="hello" >
<p>hello world
</div>
<button id="dynadd" onclick="add();">add</button>
<button id="dyndel" onclick="del();">delete</button>
<button id="tog" onclick="jstoggle('dyn');">toggleDyn</button>
<button id="tog" onclick="jstoggle('hello');">toggleHello</button>
<div id="dyn">
<input type="hidden" id="num" value="0"/>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
