JavaScript操作DOM(动态表格处理)

最新推荐文章于 2018-09-04 15:59:05 发布

weixin_30768175

最新推荐文章于 2018-09-04 15:59:05 发布

阅读量115

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yuefeng123/p/7732619.html

版权

<html>
	<title>动态处理表格数据</title>
    <head>
    	<script type="text/javascript">
          function clearForm(){
              document.getElementById("deptno").value="";
              document.getElementById("dname").value="";
          }
          window.οnlοad=function(){
             document.getElementById("addBtn").addEventListener("click",onloadData,false);
          }

          function onloadData(){
          	var deptno=document.getElementById("deptno").value;
          	var dname=document.getElementById("dname").value;
          	addRow(deptno,dname);
          	clearForm();
          }

          //删除:找到父元素,调用其removeChild("指定删除的元素")
          function removeRow(deptno){
          	var deptRow=document.getElementById("dept-"+deptno);
          	var dept=document.getElementById("dept-body");
          	dept.removeChild(deptRow);
          }

          function addRow(deptno,dname){
          	var trElt=document.createElement("tr");
          	trElt.setAttribute("id","dept-"+deptno);//设置tr的属性
          	var deptnoTd=document.createElement("td");
          	var dnameTd=document.createElement("td");
          	var delTd=document.createElement("td");
            
                 var delBtn=document.createElement("button");//创建button按钮
                 delBtn.appendChild(document.createTextNode("删除"));//追加文本数据
                 delBtn.addEventListener("click",function(){//添加事件
            	   removeRow(deptno);
                 },false);
            
                delTd.appendChild(delBtn);

          	deptnoTd.appendChild(document.createTextNode(deptno));
          	dnameTd.appendChild(document.createTextNode(dname));
          	trElt.appendChild(deptnoTd);
          	trElt.appendChild(dnameTd);
          	trElt.appendChild(delTd);
          	document.getElementById("dept-body").appendChild(trElt);
          }
    	</script>
    </head>

    <body>
        <div>
        	部门编号:<input type="text" name="deptno" id="deptno"/><br>
        	部门名称:<input type="text" name="dname" id="dname"/><br>
            <input type="button" value="增加" id="addBtn"/>
             <input type="button" value="清空" οnclick="clearForm()"/>

        </div>

        <div>
    	<table border="1"  width="80%">
    		<thead >
    			<tr>
    			  <td>部门编号</td>
    			  <td>部门名称</td>
    			  <td>操作</td>
                 </tr>
    		</thead>
    		<tbody id="dept-body">
    			
    		</tbody>
    	</table>
    	</div>
    </body>
</html>

转载于:https://www.cnblogs.com/yuefeng123/p/7732619.html

weixin_30768175

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作DOM(动态表格处理)

<html> <title>动态处理表格数据</title> <head> <script type="text/javascript"> function clearForm(){ document.getElementById("deptno"...
复制链接

扫一扫