使用JS建立表格以及隔行換色（包括隔N行換色）

qingyezhu發表於2014-06-22
JS
<html>
<head>
    <title></title>
    <style>
        table{
            width:800px;
            border-collapse:collapse;
            border:1px solid #9BC2E0;
        }
        table td,th{
            width:120px;
            height:30px;
            font-size:13px;
            border:1px solid #9BC2E0;
        }
        tr.even{
            background:red;
        }
        tr.odd{
            background:blue;
        }
    </style>
    <script>
        
        window.onload = function createTable(){
        
            var table = document.getElementById('tableId');
            var tbody = document.createElement('tbody');
            var k = 0;
            //建立表格
            for(var i = 0;i < 25;i ++){
                var tr = document.createElement('tr');
                for(var j = 0;j < 5;j ++){
                    var td = document.createElement('td');
                    var text = document.createTextNode(k ++);
                    td.appendChild(text);
                    tr.appendChild(td);
                }
                tbody.appendChild(tr);
            }            
            table.appendChild(tbody);
            
            //隔N=3行換色，其中不包括首行
            var trs = table.getElementsByTagName('tr');
            for(var i = 1,len = trs.length;i < len;i ++){
                /*if(i&1){
                    trs[i].className ='even';
                }else{
                    trs[i].className = 'odd';
                }*/
                var j = parseInt((i - 1)/3);//隔N行
                if(j&1){
                    trs[i].style.backgroundColor='#0f0';
                }else{
                    trs[i].style.backgroundColor='#f00';
                }
            }
    　　　　//事件委託
            table.onclick = function(e){
                //ie與firefox獲取事件不同
                var event = e || window.event;
                var td = event.target || event.srcElement;
                if(td.tagName === 'TD'){
                    alert(td.innerHTML);
                }
            };            

        }
    </script>
</head>
<body>
    <table id="tableId">
        <thead>
            <tr>
                <th>head 1</th>
                <th>head 2</th>
                <th>head 3</th>
                <th>head 4</th>
                <th>head 5</th>
            </tr>
        </thead>
    </table>
    </body>
</html>

 

備註：關於建立表格的方式的另一種寫法（提升效能）：

          var table = document.getElementById('tableId');
            var tbody = document.createElement('tbody');
            var k = 0;
            //建立表格
            //createDocumentFragment:建立文件碎片節點
            var tbodydf = document.createDocumentFragment();
            var trdf = document.createDocumentFragment();
            for(var i = 0;i < 25;i ++){
                var tr = document.createElement('tr');
                for(var j = 0;j < 5;j ++){
                    var td = document.createElement('td');
                    var text = document.createTextNode(k ++);
                    td.appendChild(text);
                    trdf.appendChild(td);
                }
                tr.appendChild(trdf);
                tbodydf.appendChild(tr);
            }
            tbody.appendChild(tbodydf);
            table.appendChild(tbody);

 

 

相關文章