tHead：表头

　　tBodies:表格正文

　　tFoot:表格尾

　　rows:行

　　cells：列

表格的应用：

　　1、获取

　　2、表格创建

　　3、隔行变色

　　4、删除一行

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格操作</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         window.onload=function () {
  10.             var data=[
  11.                 {id:1,username:'xiao',sex:'女'},
  12.                 {id:2,username:'xing1',sex:'女'},
  13.                 {id:3,username:'xing2',sex:'女'},
  14.                 {id:4,username:'pangzi',sex:'男'}
  15.             ];
  16.             var oTab=document.getElementById('tab1');
  17.             var oTbody=oTab.tBodies[0];
  18.             for( var i=0;i<data.length;i++){
  19.                 var oTr=document.createElement('tr');
  20.                 oTbody.appendChild(oTr);
  21.                 var oTd=document.createElement('td');
  22.                 oTd.innerHTML=data[i].id;
  23.                 oTr.appendChild(oTd);
  24.                 var oTd=document.createElement('td');
  25.                 oTd.innerHTML=data[i].username;
  26.                 oTr.appendChild(oTd);
  27.                 var oTd=document.createElement('td');
  28.                 oTd.innerHTML=data[i].sex;
  29.                 oTr.appendChild(oTd);
  30.                 var oTd=document.createElement('td');
  31.                 oTr.appendChild(oTd);
  32.                 var oA=document.createElement('a');
  33.                 oTd.appendChild(oA);
  34.                 oA.innerHTML="删除";
  35.                 oA.href="#";
  36.                 oA.onclick=function () {
  37.                         oTbody.removeChild(this.parentNode.parentNode);
  38.                     for(var i=0;i<oTbody.rows.length;i++){
  39.                         if(i%2==0){
  40.                             oTbody.rows[i].style.background='white';
  41.                         }else {
  42.                             oTbody.rows[i].style.background="gray";
  43.                         }
  44.                     }
  45.                 }
  46.  
  47.                 if(i%2==0){
  48.                     oTbody.rows[i].style.background='white';
  49.                 }else {
  50.                     oTbody.rows[i].style.background="gray";
  51.                 }
  52.             }
  53.         }
  54.     </script>
  55.  
  56.     <table id="tab1" width="100%" border="1px">
  57.         <thead>
  58.             <tr>
  59.                 <th>编号</th>
  60.                 <th>姓名</th>
  61.                 <th>性别</th>
  62.                 <th>操作</th>
  63.             </tr>
  64.         </thead>
  65.         <tbody>
  66.         </tbody>
  67.     </table>
  68. </body>
  69. </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 1566: [NOI2009]管道取珠【dp】

    想不出来想不出来 仔细考虑平方的含义,我们可以把它想成两个人同时操作,最后得到相同序列的情况 然后就比较简单了,设f[t][i][j]为放了t个珠子,A的上方管道到了第i颗珠子,B的上方管道到了第j颗 ...

  2. EasyUI设置Layout自适应浏览器宽度和高度

    //设置自适应浏览器宽度和高度 function setLayoutHeight() { var height = $(window).height() - 20; $("#main_lay ...

  3. elasticsearch映射 mapping

    mapping的格式个应用,主要是创建索引(数据库)的时候指明type 的field类型,然后elasticsearch可以自动解析

  4. CDH版本大数据集群下搭建的Hue详细启动步骤（图文详解）

    关于安装请见 CDH版本大数据集群下搭建Hue(hadoop-2.6.0-cdh5.5.4.gz + hue-3.9.0-cdh5.5.4.tar.gz)(博主推荐) Hue的启动 也就是说,你Hue ...

  5. decltype使用

    #include<thread> #include<array> #include<iostream> #include<windows.h> #inc ...

  6. Python函数和面向对象题目

  7. 线段树(单点更新) HDU 1754 I Hate It

    题目传送门 /* 线段树基本功能:区间最大值,修改某个值 */ #include <cstdio> #include <cstring> #include <algori ...

  8. Mysql数据类型简介（大概了解）

    知道有整型,浮点型,定点数类型( DECIMAL(M,D)M是数据总长度,是小数位 ),日期类,字符串类,二进制类型(存图片路径,视频路径一般用BLOG就行了喔)……不会再去查 讲一下几个专有名词: ...

  9. hdu 1979 DFS + 字典树剪枝

    http://acm.hdu.edu.cn/showproblem.php?pid=1979 Fill the blanks Time Limit: 3000/1000 MS (Java/Others ...

  10. Hadoop的ChainMapper和ChainReducer使用案例（链式处理）（四）

    不多说,直接上干货!      Hadoop的MR作业支持链式处理,类似在一个生产牛奶的流水线上,每一个阶段都有特定的任务要处理,比如提供牛奶盒,装入牛奶,封盒,打印出厂日期,等等,通过这样进一步的分 ...