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. C#拷贝整个文件夹以及子目录和其中文件

       private void CopyDirectory(string srcPath, string desPath)         {             string folderNam ...

  2. hdu1863 畅通工程 基础最小生成树

    #include <iostream> #include <cstdio> #include <algorithm> #define N 110 #define M ...

  3. [SCOI2016]围棋

    Description 近日,谷歌研发的围棋AI-AlphaGo以4:1的比分战胜了曾经的世界冠军李世石,这是人工智能领域的又一里程碑.与传统的搜索式AI不同,AlphaGo使用了最近十分流行的卷积神 ...

  4. 题解报告：poj 2631 Roads in the North（最长链）

    Description Building and maintaining roads among communities in the far North is an expensive busine ...

  5. Linux Ubuntu 14.04 LTS下VirtualBox连接USB

    1.环境 主机:Ubuntu 14.04 LTS 虚拟机:Windows 7 专业版本 VirtualBox: 图形用户界面版本 5.1.8 r111374 (Qt5.6.1) 2.在主机上给Virt ...

  6. java中的compareto方法以及LIst列表排序的详细介绍【转】

    java中的compareto方法的详细介绍 javacompareTo  java中的compareto方法,返回参与比较的前后两个字符串的asc码的差值,看下面一组代码 String a=&quo ...

  7. archsummit_bj2014

    http://bj2014.archsummit.com/schedule.html 大会日程 时间 2014年12月19日 会议室 二号会议厅 7:45 入场注册 8:45 开场致辞 9:30 论高 ...

  8. Day01 计算机硬件基础

    1.什么是编程语言? 编程语言是程序员与计算机沟通的介质. 2.什么是编程? 程序员利用某种编程语言的语法格式将自己脑子中想要让计算机做的事写到文件中. 所以说,变成的结果就是文件,文件的内容就是一堆 ...

  9. 如何创建你的第一个手机APP？

    本文使用helloworld来作为android的入门项目,通过这个最简单的项目来帮助大家了解android程序开发包含哪些部分,以及如何运行android程序,本次开发android程序的工具是ec ...

  10. layout转Bitmap

    业务需求详细描述:最近产品说要在分享的商品图中添加一些其他图片和文字,然后拼接为一张图片,再分享到微信朋友圈,于是我就一脸懵逼了,但是没办法还是得做额! 然后整理了一下思路,主要有这么两条路线: 自己 ...