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. bzoj 1433: [ZJOI2009]假期的宿舍【匈牙利算法】

    i能睡j床的连边(i,j),跑最大匹配或者最大流,然后看看人数能不能对上总数即可 #include<iostream> #include<cstdio> #include< ...

  2. 如何使用webstorm去操作git

    0. 前言 在上一篇文章中,讲述了使用webstorm去调试node程序,最近研究了一下如何使用webstorm去操作git. 对于git的使用,大家的使用方式均有不同,最王道的方式非命令行莫属,基于 ...

  3. 大型系统的Redis性能优化

    问题描述 系统背景:大型线上Java服务集群(活跃用户数上千万),业务重度使用Redis存储个管理Session,业务并发量>1WQPS,基本上每个请求都需要访问Redis(可能是多次),使用了 ...

  4. BZOJ1026（数位dp）

    数位dp第二道-就当成搜索,套板子写了写.我写的dp[pos][pre][state0]记录的是当前pos位没有限制时.前面的数是pre时.前面是否都是0时的方案数. #include <cst ...

  5. 暴力 Codeforces Round #305 (Div. 2) B. Mike and Fun

    题目传送门 /* 暴力:每次更新该行的num[],然后暴力找出最优解就可以了:) */ #include <cstdio> #include <cstring> #includ ...

  6. solrJ的使用--覆盖创建索引，查询，删除索引【转自http://blog.sina.com.cn/s/blog_64ac3ab10100t3mq.html】

    package com.xzhe.common.search; import java.util.ArrayList; import java.util.Collection; import java ...

  7. P1482 Cantor表（升级版）

    题目描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 … 2/1 2/2 2/3 2/4 … ...

  8. C# 控制台如何播放音频文件

    OK,先看下代码: using System.Reflection; using System.Media; namespace ThePlay { class Program { static vo ...

  9. node入门（三）——gulp运用实例

    在上一篇<node入门(二)——gulpfile.js初探>中,我们知道了(看懂入门二及其参考资料)怎么运用gulp来更高效的开发,现在来示范一下. 在package.json里面配置好d ...

  10. SPI总线小结

    串行外设接口(Serial Peripheral Interface,SPI)的缩写.是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用四根线.Motorola首先在其MC68HCXX系列 ...