第十三篇 JS 操作table表格
Posted 幸享龙枫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第十三篇 JS 操作table表格相关的知识，希望对你有一定的参考价值。
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<5;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表格的主要内容，如果未能解决你的问题，请参考以下文章
python成长之路第十三篇：Python操作MySQL之pymysql