JavaScript斑马线表格制作

weixin_30335575

于 2019-08-18 13:00:00 发布

阅读量229

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ooo888ooo/p/11372070.html

版权

//实现斑马线表格

//方法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);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <script type="text/javascript" src="js/demo.js" ></script>
    </body>
</html>

转载于:https://www.cnblogs.com/ooo888ooo/p/11372070.html

weixin_30335575

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript斑马线表格制作

//实现斑马线表格//方法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...
复制链接

扫一扫