【黑马JS比较】用JavaScripts的DOM对象实现动态表格

案例：

在表格上可以实现添加和删除操作

思路：

代码：

html:

<!DOCTYPE html>
<html><head><title>动态表格</title><meta charset='UTF-8'><!-- 外部引入css 只需改动href --><link rel="stylesheet" href="table_css.css"></head><span ><!-- 表单元素 --><!-- 输入框 --><input type="input" id="no"><input type="input" id="name"><input type="input" id="sex"><!-- 按钮 --><input type="button" value="添加" id="add"></span><br/><br/><span id="stu" >学生信息表</span><table id="table"><tr><td>编号</td><td>姓名</td><td>性别</td><td>操作</td></tr></table><script src="table_js.js"></script>                 </body>
</html>

css:

    /* 设置表格到页面顶部的距离 */body{margin: 50px;}/* 通过把span元素变为块元素，并把宽度设为100%，使行内元素居中 */span{width: 100%;text-align: center;color: blue;display: block;}/* 设置表格边框样式border 1px,solid,rgb */table,tr,td{border: 1px solid black;}table{width: 100%;text-align: center;}

javascript:

// 单击按钮
// 链式编程
function deltr(obj){var table=obj.parentNode.parentNode.parentNode;var tr=obj.parentNode.parentNode;table.removeChild(tr);}
document.getElementById("add").onclick=function(){// document获取文本框内容 valuevar id=document.getElementById("no").value;var name=document.getElementById("name").value;var sex=document.getElementById("sex").value;//创建td,设置td的文本为文本框的内容/*注意：不能往元素中直接加入字符，而是必须新建一个TextNode然后用元素.appendChild(TextNode);*/var td_id=document.createElement("td");td_id.appendChild(document.createTextNode(id));var td_name=document.createElement("td");td_name.appendChild(document.createTextNode(name));var td_sex=document.createElement("td");td_sex.appendChild(document.createTextNode(sex));var td_del=document.createElement("td");var a_del=document.createElement("a");var text=document.createTextNode("删除");a_del.appendChild(text);//设置a标签中的字a_del.setAttribute("href","javascript:void(0)");//this对象表示当前对象//onclick属性:onclick="function(this)"点击了这个元素，可以操作这个元素a_del.setAttribute("onclick","deltr(this)");td_del.appendChild(a_del);//创建tr,将td添加到tr中var tr=document.createElement("tr");tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_sex);tr.appendChild(td_del);//获取table,将tr添加到table中// 当用TagName获取元素时，返回的是一个数组var table=document.getElementsByTagName("table")[0];table.appendChild(tr);
}

【黑马JS比较】用JavaScripts的DOM对象实现动态表格相关推荐

二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
js中如何判断一个DOM对象是否存在？
<div id="div1"></div> if(!!document.getElementById("div1")) 转载于:http ...
【黑马JS笔记】BOM对象DOM对象事件
DOM:文档对象模型,将标记语言文档的各个元素封装为一个对象,通过树结点的方式控制html文档内容在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点: ...
JS(DOM对象表单验证与正则表达)
目录 DOM对象表单验证 DOM对象 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
js中的DOM对象和jQuery对象的比较
1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...
JS对象与Dom对象与jQuery对象之间的区别
前言通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的 $("#save&qu ...
table取tr对象 vue_javascript的DOM对象终极总结：你必看的js面向对象
<大数据和人工智能交流>头条号向广大初学者新增C .Java .Python .Scala.javascript 等目前流行的计算机.大数据编程语言,希望大家以后关注本头条号更多的内容.作 ...
前端之JavaScript：JS之DOM对象一
js之DOM对象一一.什么是HTML DOM HTML Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 ...
JS DOM 对象
22:36 2013/6/4详情参照W3C文档标准Browser 对象(顶层对象) DOM Window DOM Navigator DOM Screen DOM History DOM Locati ...

【黑马JS比较】用JavaScripts的DOM对象实现动态表格

【黑马JS比较】用JavaScripts的DOM对象实现动态表格相关推荐

最新文章

热门文章