純js實現(xiàn)隔行變色效果
更新時間：2017年11月29日 16:10:21 作者：snow_1
這篇文章主要為大家詳細(xì)介紹了純js實現(xiàn)隔行變色效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)隔行變色的具體代碼，供大家參考，具體內(nèi)容如下
<script type="text/javascript">
function createTable(){
//創(chuàng)建表格
var table = document.createElement("table");
//設(shè)置表格的行數(shù)
for(var i=0;i<4;i++){
var tr = document.createElement("tr");
//設(shè)置表格的列數(shù)
for( var j=0;j<5;j++){
var td = document.createElement("td");
tr.appendChild(td);
//添加文本
var txt = document.createTextNode("wkk");
td.appendChild(txt);
}
//判斷顏色的變換
if(i%2==0){
//添加屬性（第一種）
tr.style.backgroundColor = "#f0f";
} else {
tr.style.backgroundColor = "#ff0";
}
table.appendChild(tr);
}
//添加屬性（第二種）
table.setAttribute("border","1px");
//table.style.border = "solid 1px red";
table.setAttribute("width","200px");
table.setAttribute("height","100px");
//添加到body中
document.body.appendChild(table);
}//create table over
createTable();
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)淘寶首頁的banner欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
JavaScript是一門非常流行的編程語言，許多開發(fā)者都會把JavaScript選為入門語言，本文向大家分享JavaScript提高執(zhí)行效率的小技巧、最佳實踐等非常實用的內(nèi)容2017-03-03
這篇文章主要介紹了JS控制表格實現(xiàn)一條光線流動分割行的方法,實例分析了javascript操作table表格元素的技巧,需要的朋友可以參考下2015-03-03
Bootstrap學(xué)習(xí)筆記之環(huán)境配置(1)
這篇文章主要為大家詳細(xì)介紹了Bootstrap學(xué)習(xí)筆記之環(huán)境配置的具體操作方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
下面小編就為大家?guī)硪黄狫S時間控制實現(xiàn)動態(tài)效果的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
JavaScript 事件記錄使用說明需要的朋友可以參考下。2009-10-10
這篇文章主要介紹了js實現(xiàn)兩點之間畫線的方法,涉及javascript圖形繪制的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序日歷組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
javascript實現(xiàn)圖片跟隨鼠標(biāo)移動效果的方法
這篇文章主要介紹了javascript實現(xiàn)圖片跟隨鼠標(biāo)移動效果的方法,涉及javascript鼠標(biāo)事件及頁面元素的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
本篇文章主要介紹了解決瀏覽器會自動填充密碼問題的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04