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

Posted 2020-10-12 勇往直前

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript操作DOM(动态表格处理)相关的知识，希望对你有一定的参考价值。

<html>
	<title>动态处理表格数据</title>
    <head>
    	<script type="text/javascript">
          function clearForm(){
              document.getElementById("deptno").value="";
              document.getElementById("dname").value="";
          }
          window.onload=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="清空" onclick="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>

以上是关于JavaScript操作DOM(动态表格处理)的主要内容，如果未能解决你的问题，请参考以下文章

DOM操作技术

JS（JavaScript）创建不规则表格 ,请高手帮忙实现一下啊

DOM操作技术----动态脚本

第10章 DOM （2 DOM操作技术）

JavaScript(第二十天)DOM操作表格及样式

26jQuery