第十三篇 JS 操作table表格
阿新 • • 發佈：2017-09-25
span 正常 tex 依次 語法 文檔 ++ 它的 方向
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(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了，那麽這個循環就不會繼續運行了。 大家註意的是，寫循環，要註意“死循環”，死循環意思都懂唄，就是一直循環，一直循環，不走了，就一直在這裏面，這樣的話，下面的程序代碼就無法運行，懂嗎。代碼是從上往下運行的！
<!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表格