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. 如何才能优雅地书写JS代码

    第一:关于匿名函数的使用 要避免全局变量泛滥, 可以考虑使用匿名函数, 把不需要在外部访问的变量或者函数限制在一个比较小的范围内. 例如以下代码: <script> function fu ...

  2. Luogu P1542包裹快递【实数域二分】 By cellur925

    题目传送门 题目中说:最大值最小,显然是一个二分答案嘛qwq. 我们二分的答案显然是速度,但是由于实际中每一段的速度可能不同,所以这里我们把所有段进行的速度都定为二分出的答案. 二分的步骤好说,只是c ...

  3. 51Nod 1649 齐头并进

    #include <iostream> #include <algorithm> #include <cstring> //两遍迪杰斯特拉 #define INF ...

  4. centOS 部署服务器（一）

    接下来我所写的博客仅仅是为了记录我的学习过程,与其他无关. 由于公司换用了亚马逊服务器,用的是它的RDS数据库,所以就没有像以前的项目部署的时候使用mysql,不过要下载安装mysql-proxy,字 ...

  5. 利用layui的load模块解决图片上传

    首先肯定要参考layui官网的upload模块文档:http://www.layui.com/doc/modules/upload.html 讲讲思路:在一份添加表单中,我们有个图片上传的模块,然后我 ...

  6. 168 Excel Sheet Column Title Excel表列名称

    给定一个正整数,返回它在Excel表中相对应的列名称.示例:    1 -> A    2 -> B    3 -> C    ...    26 -> Z    27 -&g ...

  7. (024)[工具软件]截屏录屏软件FSCapture(转)

    该软件比 Snipaste 增加的功能有滚动截图和屏幕录制. 原文地址:https://www.appcgn.com/faststone-capture.html FastStoneCapture,简 ...

  8. Nagios安装与部署

    Nagios概述: Nagios是一款开源免费(也有收费版的Nagios XI)的监控工具,可以用以监控Windows.Linux.Unix.Router.Switch,可以监控指定主机的物理基础资源 ...

  9. mysql安装及基本概念

    1.mysql下载安装 在官网下载5.6版本(越老稳定性越好,现在公司一般都用5.6),选择windows,64bit .下载完解压看bin目录下是否有mysql·exe和mysqld.exe. 解压 ...

  10. Really simple SSH proxy (SOCKS5)

    原文: https://thomashunter.name/blog/really-simple-ssh-proxy-socks5/ SOCKS5 is a simple, eloquent meth ...