Javascript:DOM表格操作
需求说明:
/*
*需求说明:
*获取元素:tBodies,tHead,tFoot,rows,cells
*表格的创建
*数据添加
*隔行变色
*删除操作,剩余表格重新计算,实现隔行变色
*/
HTML:
<table id="table1">
<tbody>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr> </tbody>
</table>
CSS:
table{
border:1px solid #eee;
border-collapse: collapse;
} td,th{
border: 1px solid #eee;
padding: 12px 18px;
} a{
text-decoration: none;
padding: 4px 10px;
color: #f8f8f8;
font-size: 12px;
border-radius: 3px;
letter-spacing: 2px;
text-shadow: 0 0 1px rgba(0,0,0,.15);
background-color: #eb4f38;
}
JAVASCRIPT:
/*
*需求说明:
*获取元素:tBodies,tHead,tFoot,rows,cells
*表格的创建
*数据添加
*隔行变色
*删除操作,剩余表格重新计算,实现隔行变色
*/ /*
=========================
*tHead:表格头
*tBodies:表格正文
*tFoot:表格尾
*rows:行
* cells:列
=========================
*/ var oTable=document.getElementById('table1');
var oTbody=oTable.tBodies[0];
var data=[ {'id':1,'name':'kevin1','sex':'男'},
{'id':2,'name':'kevin2','sex':'男'},
{'id':3,'name':'kevin3','sex':'男'},
{'id':4,'name':'kevin4','sex':'男'},
{'id':5,'name':'kevin5','sex':'男'},
{'id':6,'name':'kevin6','sex':'男'}, ]; for(var i=0;i<data.length;i++){ var oTr=document.createElement('tr'); /*添加id*/
var oTd=document.createElement('td');
oTd.innerHTML=data[i].id;
oTr.appendChild(oTd); /*隔行换色*/ if (i%2===0) {
oTr.style.backgroundColor='#fff';
}else{
oTr.style.backgroundColor='#f8f8f8';
} /*添加name*/
oTd=document.createElement('td');
oTd.innerHTML=data[i].name;
oTr.appendChild(oTd); /*添加sex*/
oTd=document.createElement('td');
oTd.innerHTML=data[i].sex;
oTr.appendChild(oTd); /*添加操作*/
oTd=document.createElement('td');
/*oTd.innerHTML='删除';*/
oTr.appendChild(oTd); /*删除*/ var oA=document.createElement('a');
oA.innerHTML='删除';
oA.href='javascript:';
oA.onclick=function(){ //删除当前【行】
oTbody.removeChild(this.parentNode.parentNode); //删除操作完成之后,剩余表格重新计算,实现隔行变色
for(var i=0;i<oTbody.rows.length;i++){ if (i%2===0) {
oTbody.rows[i].style.backgroundColor='#fff';
}else{
oTbody.rows[i].style.backgroundColor='#f8f8f8';
} } } oTd.appendChild(oA);
oTbody.appendChild(oTr); }
在线演示:
Javascript:DOM表格操作的更多相关文章
- JavaScript DOM 基础操作
JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...
- DOM表格操作
注意:就算代码中不包含<tbody>标签,浏览器解析时也可能会自动添加,因此需要注意子元素的选择 表格操作用到的属性: 1.tHead 2.tBodies 3.tFoot 更为细致的有: ...
- javaScript之表格操作<一:新增行>
DOM表格系列操作 /** * 添加表格行 * @function 本接口可以用于:在表格tbody部分新增任意数量,任意样式的行HTML结构; * @name addTableLines * @au ...
- JavaScript DOM 常用操作
1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...
- JavaScript DOM–节点操作
节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType 为1 属性节点 nodeType 为2 文本 ...
- JavaScript DOM节点操作总结
节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...
- javascript DOM基础操作
DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM ...
- JavaScript DOM–元素操作
获取元素 根据 ID 获取元素 语法: document.getElementById(id) <div id='time'>2020-01-09</div> <scri ...
- dom 表格操作
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- NYOJ528 找球号(三)位运算
找球号(三) 时间限制:2000 ms | 内存限制:3000 KB 难度:2 描述 xiaod现在正在某个球场负责网球的管理工作.为了方便管理,他把每个球都编了号,且每个编号的球的总个数都是 ...
- PHP Sessions
PHP Sessions PHP session 变量用于存储关于用户会话(session)的信息,或者更改用户会话(session)的设置.Session 变量存储单一用户的信息,并且对于应用程序中 ...
- 手动安装svn到eclipse
今天为了装个svn搞得我焦头烂额~ 1.下载site-1.10.10.zip.(http://download.csdn.net/download/codepython/9082533) 2.在ecl ...
- static和const关键字的作用
static关键字至少有下列n个作用: (1)函数体内static变量的作用范围为该函数体,不同于auto变量,该变量的内存只被分配一次,因此其值在下次调用时仍维持上次的值: (2)在模块内的stat ...
- ios视图切换之push与present混用
在变成过程中,经常遇到两个视图控制器之间的切换,导航控制器即UINaVigation是最常用的一种,有时为了某些效果又需要进行模态切换,即present. 我们的布局经常是在window上加一个nav ...
- C盘hosts
# Copyright (c) - Microsoft Corp. # # This is a sample HOSTS file used by Microsoft TCP/IP for Windo ...
- ServerInfo.INI解密
[GlobalInfo]LastServerName=000781ED2D127FBA074D97444DC82F216443034E66BB341A428B14E326A656B9LastServe ...
- MySQL添加中文字符集问题 --- java.sql.SQLException: Incorrect string value
今天在做开关记录的时候,数据库表中description字段用于记录当前版本的描述(需要存储中文),在测试程序的时候发现如果用户输入中文,那么后台会报错.错误信息如下: java.sql.SQLExc ...
- 安卓4.2原生rom状态栏显示运营商
前言:要调整状态栏布局,需反编译systemui.apk.单卡机修改status_bar.xml和signal_cluster_view.xml,双卡机修改gemini_status_bar.xml和 ...
- Android Recovery的汉化 显示中文
Android Recovery的汉化 显示中文,有需要的朋友可以参考下. 首先下载开源的recovery源码,地址为https://github.com/xiaolu/android_bootabl ...