<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. 新浪的wap网站，发现原来我们的head存在着这样的差异

    前一段时间一直被wap网站的自适应困惑…… 仔细研究了一下新浪的wap网站,发现原来我们的head存在着这样的差异…… <%@page contentType="text/html;c ...

  2. 『实践』百度地图给map添加右键菜单（判断是否为marker）

      var map; var s;//经度 var w;//纬度 $(document).ready(function(){ $(".mune").load("jsp/c ...

  3. node项目中用到的一些模块

    1.http模块,用来搭建服务器 代码,简单服务器实现 var http = require('http'); http.createServer(function (request, respons ...

  4. POJ 2516 Minimum Cost(拆点+KM完备匹配)

    题目链接:http://poj.org/problem?id=2516 题目大意: 第一行是N,M,K 接下来N行:第i行有K个数字表示第i个卖场对K种商品的需求情况 接下来M行:第j行有K个数字表示 ...

  5. MySQL学习笔记：三种组内排序方法

    由于MySQ没有提供像Oracle的dense_rank()或者row_number() over(partition by)等函数,来实现组内排序,想实现这个功能,还是得自己想想办法,最终通过创建行 ...

  6. MySQL通过rpm安装及其单机多实例部署

    1. CentOS 下安装 MySQL Oracle 收购 MySQL 后,CentOS 为避免 MySQL 闭源的风险,改用 MySQL 的分支 MariaDB:MariaDB 完全兼容 MySQL ...

  7. Redux-DevTools 安装

    以下以Chrome为准. 首先,从Chrome Web Store(需要***支持)下载chrome 插件 Redux DevTools. 使用方式有两种: 一种只需在代码createStore中添加 ...

  8. SQL技巧两则：选择一个表的字段插入另一个表，根据其它表的字段更新本表内容

    最近,在作django数据表迁移时用到的. 因为在django中,我把本来一个字符型字段,更改成了外键, 于是,哦喝~~~字符型字段相当于被删除了, 为了能导入这些字段的外键信息,于是出此下策. 其实 ...

  9. spring boot配置文件中 spring.mvc.static-path-pattern 配置项

    spring boot项目中的静态资源文件存放在static文件下面,当通过浏览器访问这些静态文件时,发现必须要添加static作为前缀才能访问,折腾了一番后发现,这个前缀跟 spring.mvc.s ...

  10. 继承的基本概念： （1）Java不支持多继承，也就是说子类至多只能有一个父类。 （2）子类继承了其父类中不是私有的成员变量和成员方法，作为自己的成员变量和方法。 （3）子类中定义的成员变量和父类中定义的成员变量相同时，则父类中的成员变量不能被继承。 （4）子类中定义的成员方法，并且这个方法的名字返回类型，以及参数个数和类型与父类的某个成员方法完全相同，则父类的成员方法不能被继承。 分析以上程

    继承的基本概念: (1)Java不支持多继承,也就是说子类至多只能有一个父类. (2)子类继承了其父类中不是私有的成员变量和成员方法,作为自己的成员变量和方法.(3)子类中定义的成员变量和父类中定义的 ...