javascript动态增加删除行

最新推荐文章于 2021-08-21 16:43:24 发布

青茶

最新推荐文章于 2021-08-21 16:43:24 发布

阅读量108

点赞数

文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/zhangyaou/article/details/83741207

版权

<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" οnclick="add();">add</button>
<button id="dyndel" οnclick="del();">delete</button>
<button id="tog" οnclick="jstoggle('dyn');">toggleDyn</button>
<button id="tog" οnclick="jstoggle('hello');">toggleHello</button>
<div id="dyn">
<input type="hidden" id="num" value="0"/>
</div>
</body>
</html>