DOM表格操作
注意:就算代码中不包含<tbody>标签,浏览器解析时也可能会自动添加,因此需要注意子元素的选择
表格操作用到的属性:
1、tHead
2、tBodies
3、tFoot
更为细致的有:
4、rows
5、cells
表格操作:
//从后台获取数据、隔行变色、删除整行
<!DOCTYPE>
<html>
<head lang="en">
<meta charset="utf-8">
<title>表格操作</title>
</head>
<body>
<table id="tab" border="1px" width="100%">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
<script>
window.onload=function(){
var data=[
{number:1,name:"leo1",sex:"男",age:17},
{number:2,name:"leo2",sex:"男",age:15},
{number:3,name:"leo3",sex:"男",age:14},
{number:4,name:"leo4",sex:"女",age:18},
];
var oTbody=document.getElementById("tab").tBodies[0]; for(var i=0;i<data.length;i++){
var oTr=document.createElement("tr");
if(i % 2){
oTr.style.background="#ccc";
}
else{
oTr.style.background="#fff";
} var oTd=document.createElement("td");
oTd.innerHTML=data[i].number;
oTr.appendChild(oTd); var oTd=document.createElement("td");
oTd.innerHTML=data[i].name;
oTr.appendChild(oTd); var oTd=document.createElement("td");
oTd.innerHTML=data[i].sex;
oTr.appendChild(oTd); var oTd=document.createElement("td");
oTd.innerHTML=data[i].age;
oTr.appendChild(oTd); var oTd=document.createElement("td");
var oA=document.createElement("a");
oA.href="javascript:;";
oA.innerHTML="删除";
oTd.appendChild(oA);
oTr.appendChild(oTd); oTbody.appendChild(oTr); } var oA=document.getElementsByTagName("a");
for(var m=0;m<oA.length;m++){
oA[m].onclick=function(){
oTbody.removeChild(this.parentNode.parentNode);
for(var i=0;i<document.getElementsByTagName("tr").length;i++){
if(i % 2){
oTr.style.background="#ccc";
}
else{
oTr.style.background="#fff";
}
}
}
} } </script>
</html>
DOM表格操作的更多相关文章
- Javascript:DOM表格操作
需求说明: /* *需求说明: *获取元素:tBodies,tHead,tFoot,rows,cells *表格的创建 *数据添加 *隔行变色 *删除操作,剩余表格重新计算,实现隔行变色 */ HTM ...
- dom 表格操作
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- 原生js封装table表格操作,获取任意行列td,任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
- javaScript之表格操作<一:新增行>
DOM表格系列操作 /** * 添加表格行 * @function 本接口可以用于:在表格tbody部分新增任意数量,任意样式的行HTML结构; * @name addTableLines * @au ...
- 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
- dom事件操作例题,电子时钟,验证码,随机事件
dom事件操作 当事件发生时,可以执行js 例子: 当用户点击时,会改变<h1>的内容: <h1 onClick="this.innerHTML='文本更换'"& ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- DOM样式操作
CSS 到 DOM的抽象 通过操作 CSS 对应的 DOM对象来更新CSS样式 换肤操作 如何获取实际的样式(不仅有行内,更有页面和外联样式表中定义的样式) 样式表分为三类: 外联,页面,行内 内部样 ...
随机推荐
- AnyProxy做App网络流量测试
前言: AnyProxy是一个开放式的HTTP代理服务器.Github主页:[https://github.com/alibaba/anyproxy]主要特性包括: 基于Node.js,开放二次开发能 ...
- 《Linux内核设计与实现》读书笔记 5
第五章系统调用 5.1与内核通信 系统调用在用户空间进程和硬件设备间添加了一个中间层, 作用:为用户空间提供了一种硬件的抽象接口:保证了系统的稳定和安全,避免应用程序不正确使用硬件,窃取其他进程的资源 ...
- first time to use github
first time to use github and feeling good. 学习软件工程,老师要求我们用这个软件管理自己的代码,网站是全英的,软件也简单易用,方便 https://githu ...
- Github上传更新
通过2天的时间,不停的网上找各种资料,今天下午终于可以登录上github for Windows 客户端了,,, 然后通过一整晚的摸索,也把项目上传到github里. github地址:https:/ ...
- Java设计模式之工厂模式(Factory模式)介绍(转载)
原文见:http://www.jb51.net/article/62068.htm 这篇文章主要介绍了Java设计模式之工厂模式(Factory模式)介绍,本文讲解了为何使用工厂模式.工厂方法.抽象工 ...
- jQuery(四)
get():把jQuery转化成原生js <script> $(function(){ //alert($('#div1').get(0).innerHTML); //jQuery里面也有 ...
- MES模块
基础数据管理:产品模型.工厂模型.工艺模型 仓储管理 成本管理 绩效管理 看板管理 日志管理 设备管理:工装管理.设计器具管理.设备保养管理.设备备件管理.设备采集管理.设备点检管理.设备故障管理.设 ...
- 关于ListBox在Grid中无法充满的问题
WPF布局的时候发现一个问题,ListBox放在Grid中的时候,老是无法充满整个Grid,但是查看代码也没有设置相关的属性,原来在设置ListBox之前首先要让ListBox的容器充满,然后List ...
- delphi ADOQuery 开启本地缓存
在开发 C/S 应该程序的时候,有时为了程序的运行提高效率. 需要使用 缓存功能: //ADO组件需要把 ADOQuery1.LockType:=ltBatchOptimistic; ADOQuery ...
- Delphi2007精简版加载Borland.Studio.Together.dll错误解决办法
安装Delphi2007精简版,启动提示Borland.Studio.Together.dll加载错误,错误信息如下: Failed to load IDE add in 'C:\Program Fi ...