JS 操作table表格

这节课难度可能高一点，因为没有提前解释if判断、for循环。这节课是直接把这两样用上了，老师先简单介绍一下：
if，判断语句，判断就很简单了嘛，假如说1=1(1等于1)，当然是真的了对吧，那么1=2呢，那就是假的，因为正常情况下，1不可能等于2，1就是1。那么我们在JS里写一个：
 
var a=1;

if(a=1){

    alert('正确');

}else{

    alert('错的');

}
 
给一个变量，来做判断，大家记住，if也有它的规则，先一个if，圆括号做判断，随后一个花括号里面做运行的代码。
以上就是最简单的一组判断语法，就是说，a等于1，我们就走之后的代码，如果它不等于1，我们就走else，else是“否则”的意思，就是说：如果a=1，就是正确，否则它就是错误。而我们给的a的数字则就是1，所以判断正确。同学们也可以把a的变量设置成其他数字，结果就则是“错的”。
 
for循环，“循环”两个字都懂嘛！写一个简单的弹出框测试一下：
 
for(i=0;i<;i++){

    alert(i);

}
 
这样的话，页面会依次弹出0,1,2,3,4 为什么呢？因为我弹出的是 i 这个变量，它最初被我们赋值为0，所以它则是0，而循环里，它小于5是一个判断，最关键的是后面的 'i++'，意思是，i=i+1，它本身加上一个1。意思则是这样的：
i等于0，它如果小于5，那么它自身就加1。循环一次，我们就会走一次里面的代码，所以页面会依次提示i的值，最后它不小于5了，那么这个循环就不会继续运行了。
大家注意的是，写循环，要注意“死循环”，死循环意思都懂呗，就是一直循环，一直循环，不走了，就一直在这里面，这样的话，下面的程序代码就无法运行，懂吗。代码是从上往下运行的！
 
简单的介绍了if和for，我们来用JS来操作table：
 
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>JS实现控制表格样式</title>

</head>

<body>

<!--给表格一个id，JS好找到它-->

<table id="tt">

    <tr>

        <td>ID</td>

        <td>姓名</td>

        <td>性别</td>

        <td>操作</td>

    </tr>

    <tr>

        <td>1</td>

        <td>路人甲</td>

        <td>男</td>

        <td><a href="#">查看</a><a href="#">删除</a></td>

    </tr>

    <tr>

        <td>2</td>

        <td>路人乙</td>

        <td>女</td>

        <td><a href="#">查看</a><a href="#">删除</a></td>

    </tr>

    <tr>

        <td>3</td>

        <td>路人丙</td>

        <td>男</td>

        <td><a href="#">查看</a><a href="#">删除</a></td>

    </tr>

    <tr>

        <td>4</td>

        <td>路人丁</td>

        <td>女</td>

        <td><a href="#">查看</a><a href="#">删除</a></td>

    </tr>

</table>

<button onclick="biaoge()">添加表格效果</button>

<button onclick="bian()">添加边框</button>

<input type="button" value="第一行上色" onclick="yi()"/>

<button onclick="ziti()">字体变大</button>

<input type="button" value="加上背景颜色" onclick="yan()"/>

<script>

    //我们使用文档对象找到表格的id

    var tab = document.getElementById("tt");//这里我们用的是全局变量，因为它没有设在任何函数方法里

    //添加表格效果

    function biaoge(){ //这样的话就是一个函数方法,变量设在里面，就是局部变量

        tab.style.borderCollapse="collapse";  //间距

        tab.style.border="1px solid gray";  //边框

        tab.style.textAlign="center";   //内容居中

        tab.style.width="800px";        //宽度

    }

    //字体变大

    function ziti(){

        tab.style.fontSize="21px";  //字体大小设置

    }

    //添加背景颜色

    function yan(){

        for(i=2;i<tab.rows.length;i++){

            if(i%2==0){//这里的 % 号是取膜，就是i除以2要等于0则是正确的

                tab.rows[i].style.backgroundColor="yellow"; //背景色

            }

            else{//上面取膜不等于0，则运行这里的代码

                tab.rows[i].style.backgroundColor="orange";//背景色

            }

        }

    }

    //第一行上色

    function yi(){

        tab.rows[1].style.backgroundColor="lightgray";//背景色

    }

    //给每个td添加表格

    function bian(){

        //这里写的是双重循环，第一个循环，找到table下的tr，第二个循环是找到tr下的td

        for(i=0;i<tab.rows.length;i++){

            //rows是table下的tr，length则是获取长度

            for(j=0;j<4;j++){

                tab.rows[i].cells[j].style.border="1px solid gray"; //边框

            }

        }

    }

</script>

</body>

</html>
JS里的操作，老师都写了注释，难点其实就两个：1.if里的%取膜；2.双重循环。
程序里有很多运算符，比如常用的吧：
+(加) -(减) *(乘) /(除) %(取膜)
更多的老师不举例了，大家去看下手册，只有运用到老师才会说哦。
这里用到取膜%，意思是i%2，它若等于0就是对的，否则就走else里的代码，那么怎么说它是对的呢？比如啊：2%2则等于0，3%2则不等于0，它这个0不是结果等于0，而是余数等于0！换个方向想，只要是2的倍数，就可以。
 
双重循环，怎么说它呢，它不难，难在里面的两个新属性，rows是找到table下的tr，cells是找到tr下的td，其实多用两下不陌生也就不难。那么双重循环，你可以这样：
第一个循环，是先找到tr(行)，它下面有很多td(列)，而第二个循环则是找到td。
 
说多了没用，同学多写代码测试，不要怕错，又没人笑话你，你若会了，你就6了，怕过程的是没有好的结果的哦。
 

第十三篇 JS 操作table表格的更多相关文章

  1. js操作table表格导出数据到excel方法

    js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不 ...

  2. js创建table表格

    //js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...

  3. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  4. 原生js封装table表格操作，获取任意行列td，任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  5. JS获取table表格任意单元格值

    jsp页面表格布局 <body onload="show()"> <center> <input type="text" valu ...

  6. js 操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法

    表格有几行: var trCnt = table.rows.length;  (table为Id ) 每行有几列:for (var i=0; i<trCnt; i++)              ...

  7. js操作table倒叙显示序号的问题

    今天遇到一奇葩问题,就是在js添加table时,序号是倒叙显示的,而且数据库查出来时正序的,为什么显示是倒叙的呢? 我百度一番,终于有了结果: var newRow=table.insertRow(- ...

  8. 纯JS 将table表格导出到excel

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...

  9. node.js 操作excel 表格与XML文件常用的npm

    在日常工作中会经常用到把一些excel表格文件转化为json,xml,js等格式的文件,下面就是我在日常中用到的这些npm. 1.node-xlsx: node-xlsx可以把excel文件转化为上面 ...

随机推荐

  1. mvp解读

    mvp存在的问题 1.业务复杂时,可能使得Activity变成更加复杂,比如要实现N个IView,然后写更多个模版方法. 2.业务复杂时,各个角色之间通信会变得很冗长和复杂,回调链过长. 3.Pres ...

  2. [学习笔记] L1-PCA

    L1-PCA Intro PCA的本质就是从高维空间向低维空间投影,投影的本质又是左乘(或右乘)一个向量(表征原来特征空间到投影后特征空间的权重),经过线性加权,转换到低维空间表征,如果将向量换成矩阵 ...

  3. H5 页面适配几种展现形式

    1.contain 模式:以内容中心为基点按照视觉稿的宽高比缩放以适配窗口显示全页面内容,窗口与内容的宽度比或高度比之间较小者缩放填满窗口,当窗口宽高比和视觉稿不同时,另一方向的两侧出现留空部分. 2 ...

  4. 12@365 java上传文件（word、图片等）至服务器

    这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...

  5. RESTful 介绍

    什么是RESTful?一种软件架构风格.设计风格,而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务端交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制. ...

  6. Java多线程(1)：3种常用的实现多线程类的方法

    (1) 继承java.lang.Thread类(Thread也实现了Runnable接口) 继承Thread类的方法是比较常用的一种,如果说你只是想起一条线程.没有什么其它特殊的要求,那么可以使用Th ...

  7. LeetCode.1122-相对排序数组(Relative Sort Array)

    这是小川的第393次更新,第427篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第258题(顺位题号是1122).给定两个数组arr1和arr2,arr2中的元素是不同的 ...

  8. SQL 批量添加的语法

    .--添加一条记录 . insert into tableName(col1,col2,col3) values (val1,val2,val3) .--添加多条记录 . insert into ta ...

  9. PTA(Basic Level)1060.爱丁顿数

    英国天文学家爱丁顿很喜欢骑车.据说他为了炫耀自己的骑车功力,还定义了一个"爱丁顿数" E ,即满足有 E 天骑车超过 E 英里的最大整数 E.据说爱丁顿自己的 E 等于87. 现给 ...

  10. [转帖]jdk8 Metaspace 调优

    jdk8 Metaspace 调优 https://blog.csdn.net/bolg_hero/article/details/78189621 转帖 简介 从JDK8开始,永久代(PermGen ...