<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(动态表格处理)的更多相关文章

  1. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  2. JQuery制作网页—— 第三章 JavaScript操作DOM对象

    1. DOM:Document Object Model(文档对象模型):          DOM操作:                   ●DOM是Document Object Model的缩 ...

  3. javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！

    DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE        2.HTM ...

  4. 你所不了解的javascript操作DOM的细节知识点(一)

    你所不了解的javascript操作DOM的细节知识点(一) 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节 ...

  5. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  6. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

  7. Python javascript操作DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  8. JavaScript 操作DOM对象

    1)JavaScript  操作DOM對象 1.DOM:是Document  Object  Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...

  9. 【repost】Javascript操作DOM常用API总结

    Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...

随机推荐

  1. C# WebClient进行FTP服务上传文件和下载文件

    定义WebClient使用的操作类: 操作类名称WebUpDown WebClient上传文件至Ftp服务: //// <summary> /// WebClient上传文件至Ftp服务 ...

  2. linux bash shell之declare

    一. #Set the right GC options based on the what we are runningdeclare -a server_cmds=("master&qu ...

  3. json的用法

    json格式 JSON格式:http://www.json.org/ python和JSON的关系请参考:http://docs.python.org/library/json.html JSON建构 ...

  4. 前端打包工具之fis3的初级使用

    说到打包工具,大家都会想到webpack,我之前也接触过webpack,说实话个人觉得webpack上手容易,但是对于新手来说里面有太多坑,配置文件也不简单.于是乎,我转入了fis3阵营,发现fis3 ...

  5. 【[国家集训队]小Z的袜子】

    对于L,R的询问.设其中颜色为x,y,z的袜子的个数为a,b,c...那么答案即为(a*(a-1)/2+b*(b-1)/2+c*(c-1)/2....)/((R-L+1)*(R-L)/2)化简得:(a ...

  6. C#控制台应用程序之选课系统

    本程序以文本文件作为存储媒介,实现了一个简化版的选课系统,主要实现了以下功能 对学生信息的增删改查 对课程信息的增删改查 对学生选课的增删改查 using System; using System.C ...

  7. Asp.net mvc 实时生成缩率图到硬盘

    之前对于缩率图的处理是在图片上传到服务器之后,同步生成两张不同尺寸的缩率供前端调用,刚开始还能满足需求,慢慢的随着前端展示的多样化,缩率图已不能前端展示的需求,所以考虑做一个实时生成图片缩率图服务. ...

  8. 【LOJ】#2446. 「NOI2011」 NOI 嘉年华

    题解 一道神奇的dp 我们发现关于两个东西的记录很难办,但是我们发现在固定时间区间内,如果A场地举办的活动数是一定的,那么B场地肯定举办的活动越多越好 我们预处理一个\(num[i][j]\)表示时间 ...

  9. ubuntu18.10安装网易云音乐

    1.到网易云官网下载安装包(在18.10双击安装包没能安装成功,于是使用命令行) 2.执行安装命令 sudo dpkg -i 名称,这时会提示缺少依赖gconf-service等,提示执行命令,照做就 ...

  10. thinkphp3.2局部不缓存的静态缓存

    在thinkphp中,对于访问量大的网站可以用静态缓存来越过数据库瓶颈来提高访问速度,但有时候并不是整个页面都要缓存的,如登录的用户名部分,那么如何实现局部不缓存呢? 其实有多种方法,但对于Think ...