tHead:表头

  tBodies:表格正文

  tFoot:表格尾

  rows:行

  cells:列

表格的应用:

  1、获取

  2、表格创建

  3、隔行变色

  4、删除一行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格操作</title>
</head>
<body>
<script>
window.onload=function () {
var data=[
{id:1,username:'xiao',sex:'女'},
{id:2,username:'xing1',sex:'女'},
{id:3,username:'xing2',sex:'女'},
{id:4,username:'pangzi',sex:'男'}
];
var oTab=document.getElementById('tab1');
var oTbody=oTab.tBodies[0];
for( var i=0;i<data.length;i++){
var oTr=document.createElement('tr');
oTbody.appendChild(oTr);
var oTd=document.createElement('td');
oTd.innerHTML=data[i].id;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=data[i].username;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=data[i].sex;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTr.appendChild(oTd);
var oA=document.createElement('a');
oTd.appendChild(oA);
oA.innerHTML="删除";
oA.href="#";
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.background='white';
}else {
oTbody.rows[i].style.background="gray";
}
}
} if(i%2==0){
oTbody.rows[i].style.background='white';
}else {
oTbody.rows[i].style.background="gray";
}
}
}
</script> <table id="tab1" width="100%" border="1px">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>

js中表格的相关操作的更多相关文章

  1. JS中字符串的相关操作

    一.字符串的创建 创建一个字符串有几种方法.最简单的是用引号将一组字符包含起来,可以将其赋值给一个字符串变量. var myStr = "Hello, String!"; 可以用双 ...

  2. js 中对象--属性相关操作

    查询属性: 可以用 对象.属性 来查询属性和属性方法               或者                    对象[“属性”]  来查询属性和属性方法 演示代码: <script ...

  3. [转]js中confirm实现执行操作前弹出确认框的方法

    原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...

  4. js中scroll滚动相关

    js中scroll滚动相关 scroll,滚动,一般讨论的是网页整体与浏览器之间的关系. 一.元素相关 属性/方法 解释 element.scrollHeight 返回元素的整体高度. element ...

  5. 关于js中select的简单操作,以及js前台计算,span简单操作

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. JS中表格的全选和删除要注意的问题

    在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...

  7. Django中的ORM相关操作:F查询,Q查询,事物,ORM执行原生SQL

    一    F查询与Q查询: 1 . F查询: 在上面所有的例子中,我们构造的过滤器都只是将字段值与某个常量做比较.如果我们要对两个字段的值做比较,那该怎么做呢? Django 提供 F() 来做这样的 ...

  8. Qt中与文件目录相关操作

    一.与文件目录操作有关操作. Qt中与文件目录相关的操作在QDir中,需加入#include <QDir>语句. QDir::drives()是列出电脑根目录下的所有目录,返回的是QFil ...

  9. js中对时间的操作

    我们先来看一下如何获取当前时间: var date = new Date() //输出:Tue Jul 02 2019 10:36:22 GMT+0800 (中国标准时间) 紧接着,我们来获取相关参数 ...

随机推荐

  1. JVM内存模型详解

    内存模型 内存模型如下图所示 堆 堆是Java虚拟机所管理的内存最大一块.堆是所有线程共享的一块内存区域,在虚拟机启动时创建.此内存区域唯一的目的就是存放对象实例.所有的对象实例都在这里分配内存 Ja ...

  2. 通过 xshell 连接 ubuntu on windows(WSL)

    装上 ubuntu on windows 后,默认要先打开 cmd, 再运行 bash 进入 ubuntu 的 shell. 但是这个shell很难看,配色不好就算了,还存在各种复制粘贴麻烦. 默认没 ...

  3. zabbix被动模式和主动模式

    1 被动模式 zabbix默认采用被动模式.就是agent等待server采集数据. 在items中,type为zabbix agent就是指被动模式. 流程为:agent周期性收集数据,server ...

  4. Python while 1 和 while True 速度比较

    References http://legacy.python.org/dev/peps/pep-0285/http://stackoverflow.com/questions/3815359/whi ...

  5. Codeforces Round #544 (Div. 3) D. Zero Quantity Maximization

    链接:https://codeforces.com/contest/1133/problem/D 题意: 给两个数组a,b. 同时ci = ai * d + bi. 找到一个d使c数组中的0最多. 求 ...

  6. 双拓扑排序 HDOJ 5098 Smart Software Installer

    题目传送门 /* 双拓扑排序:抄的,以后来补 详细解释:http://blog.csdn.net/u012774187/article/details/40736995 */ #include < ...

  7. web 前端的一些问题

    1. HTML 和 JS 一个网页显示出来的静态的内容为html创见的静态object 对这些object的操作通过JS来响应 2. HTTP cookie cookie是由server set, 由 ...

  8. Backbone学习记录(3)

    创建视图 同前面创建模型和集合的方式一样,Backbone.View.extend()即可创建视图 var UserView=Backbone.View.extend(); var view1=new ...

  9. empty 和 isset的区别和联系

    empty 和 isset的区别和联系 要说它们的联系,其共同点就是empty()和isset()都是变量处理函数,作用是判断变量是否已经配置,正是由于它们在处理变量过程中有很大的相似性,才导致对它们 ...

  10. SSM-WebMVC(三)

    SSM-WebMVC(三) 一.Annotated Controllers ​ 应用程序控制器 handlerMethod(处理方法) ㈠方法入参 ​ (springmvc针对于在controller ...