码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript斑马线表格制作

时间:2019-08-18 13:20:52      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:order   write   div   yellow   script   ==   斑马线   code   col   

//实现斑马线表格

//方法1:
document.write(‘<table border="1">‘);

for(var i=1; i<11; i++){
    
    if(i % 2 ==0){
        document.write(‘<tr style="background-color:blue;color:#fff;">‘);
    }else{
        document.write(‘<tr style="background-color:yellow;color:green;">‘);
    }
    
    for(var j=1; j<8; j++){
        document.write(‘<td>单元格‘ + j + ‘</td>‘);
    }
    document.write(‘</tr>‘);
}

document.write(‘</table>‘);


//方法2:
var tableWp = ‘<table border="1">‘;

for(var i=0; i<10; i++){
    
    if(i % 2 != 0){
        tableWp += ‘<tr style="background-color:red;color:blue;">‘;
    }else{
        tableWp += ‘<tr style="background-color:blue;color:yellow">‘;
    }
    
    for(var j=0; j<7; j++){
        tableWp += ‘<td>单元格‘ + j + ‘</td>‘;
    }
    
    tableWp += ‘</tr>‘;
}

tableWp += ‘</table>‘;
document.write(tableWp);

 

JavaScript斑马线表格制作

标签:order   write   div   yellow   script   ==   斑马线   code   col   

原文地址:https://www.cnblogs.com/ooo888ooo/p/11372070.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!