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. 【CodeForces - 501B 】Misha and Changing Handles（map）

    Misha and Changing Handles CodeForces原题是英文,这里就直接上中文好了,翻译不是太给力,但是不影响做题 ^▽^ Description  神秘的三角洲里还有一个传说 ...

  2. iptables 使用总结

    Linux 系统的防火墙功能是由内核实现的 2.0 版内核中,包过滤机制是 ipfw,管理工具是 ipfwadm 2.2 版内核中,包过滤机制是 ipchain,管理工具是 ipchains 2.4 ...

  3. UVa 11437 (梅涅劳斯定理) Triangle Fun

    题意: 给出三角形ABC顶点的坐标,DEF分别是三边的三等分点.求交点所形成的三角形PQR的面积. 分析: 根据梅涅劳斯定理,我们得到: ,解得 另外还有:,解得 所以AR : RP : PD = 3 ...

  4. 数论/暴力 Codeforces Round #305 (Div. 2) C. Mike and Frog

    题目传送门 /* 数论/暴力:找出第一次到a1,a2的次数,再找到完整周期p1,p2,然后以2*m为范围 t1,t2为各自起点开始“赛跑”,谁落后谁加一个周期,等到t1 == t2结束 详细解释:ht ...

  5. 三色灯渐变DIY制作

    小编前几天查资料,怎么使用12864屏幕的用法,突然发觉微博是个好东西,随着自己的成长,学习了很多的知识,没有做笔记的习惯,只是习惯把用到的硬件,传感器,资料写到程序的备注内,但感觉,用到时不是那么方 ...

  6. getAttribute()方法的第二个参数

    对于一个img元素,我们想获取它的src属性时可以有两种方式: 1.xxx.getAttribute("src") 2.直接通过xxx.src获取属性值 在src的属性值为相对路径 ...

  7. vs直接IP访问运行项目

    找到IIS Express 正在运行的项目应用程序,点击网站,会出现配置路径,找到配置路径,显示隐藏的文件夹 localhost替换成本地IP,重新运行项目,然后就可以直接通过IP访问项目,好处就是便 ...

  8. AJPFX关于Set接口学习笔记及总结

    Set接口中的方法和Collection中方法一致的.Set接口取出方式只有一种,迭代器. |--HashSet:底层数据结构是哈希表,线程是不同步的.无序,高效: HashSet集合保证元素唯一性: ...

  9. Git之删除本地和远程项目

    目录 删除本地项目 删除远程项目 删除本地项目: git rm -rf project  或者 rm -rf project   [删除工作区项目] git add project [将删除的项目添加 ...

  10. hihocoder offer收割编程练习赛8 A 小Ho的强迫症

    思路: 乱搞. 实现: #include <iostream> #include <cstdio> using namespace std; typedef long long ...