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. 浅谈单调栈 By cellur925

    这位dalao的单调栈文章很棒!我写的是他的题单233. http://www.cnblogs.com/COLIN-LIGHTNING/p/8474668.html 一.单调栈的一般写法 ;i< ...

  2. Python之单元测试——HTMLTestRunner

    前置条件:把HTMLTestRunner.py文件拷贝到External Libraries—>site-packages里面 import unittestimport HTMLTestRun ...

  3. Jmeter之文件下载

    Jmeter文件下载 1.打开jmeter新建线程组—>http请求 2.在百度上选择一个图片下载,选择图片右击复制图片地址 https://ss1.baidu.com/9vo3dSag_xI4 ...

  4. PHP常见的输出语句 echo()、print()、print_r()、var_dump()、pinrtf()之间的区别

    echo().print().print_r().var_dump().pinrtf()之间的区别 1.print() :简单输出语句,可以输出字符串,变量.表达式等单项的值!(不能输出数组.对象等复 ...

  5. Windows下DVWA安装指南

    注意:DVWA需要依赖httpd.PHP.MySQL.php-mysql等应用或组件,最简单的方法是安装wampserver(http://www.wampserver.com/),安装完了所需的各种 ...

  6. 转：从《The C Programming Language》中学到的那些编程风格和设计思想

    这儿有一篇写的很好的读后感:http://www.cnblogs.com/xkfz007/articles/2566424.html   读书不是目的,关键在于思考.   很早就在水木上看到有人推荐& ...

  7. Package 和 import 语句

  8. 初学.net增删改查

    分页显示 DAL: public List GetListByPager(int PageIndex, int PageSize, out int RowCount) { string sql = & ...

  9. 《Head First HTML与CSS》的CSS属性

    关于继承的结论. 1.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(详见(3)<Head First HTML与CSS>学习笔记---CSS入门的2) 2.基于类的选择器> ...

  10. 基于 Web 的 Go 语言 IDE - Wide 1.5.0 发布！

    Wide 是什么 Wide 是一个基于 Web 的 Go 语言团队 IDE. 在线开发:打开浏览器就可以进行开发.全快捷键 智能提示:代码自动完成.查看表达式.编译反馈.Lint 实时运行:极速编译. ...