JavaScript 操作table，可以新增行和列并且隔一行换背景色

高洛峰

Lepaskan： 2016-11-25 15:05:50

asal

962 orang telah melayarinya

<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
        <title>JavaScript</title> 
    </head> 
    <body> 
        <script language="javascript"> 
            var n = 0; 
            function showTable(len) { 
                wi(&#39;<table border="1" width="300" style="border-collapse:collapse"><tbody id="table">&#39;); 
                for (i=0;i<len;i++) { 
                    if (parseInt(i%2)==1) { 
                        bg = &#39;#F4FAC7&#39;; 
                    } else { 
                        bg = &#39;white&#39;;    
                    } 
                    wi(&#39;<tr bgcolor=&#39;+bg+&#39;><td>第&#39;+(i+1)+&#39;行</td></tr>&#39;);  
                } 
                wi(&#39;</tbody></table><br />&#39;); 
                wi(&#39;<input type="button" value="Add" id="add" />&#39;);    
            } 
             
            function wi(str) { 
                return document.write(str);  
            } 
            showTable(10); 
             
            var add = document.getElementById("add"); 
            add.onclick = function() { 
                n = n+1; 
                if (n%2==0) { 
                    bg = &#39;#F4FAC7&#39;; 
                } else { 
                    bg = &#39;white&#39;;    
                } 
                var table = document.getElementById("table"); 
                var tr = document.createElement("tr"); 
                tr.bgColor = bg; 
                var td = document.createElement("td"); 
                td.innerHTML = &#39;第&#39;+(10+n)+&#39;行&#39;; 
                tr.appendChild(td); 
                table.appendChild(tr); 
            } 
        </script> 
    </body> 
</html>

Salin selepas log masuk

Label berkaitan：

javascript

sumber：php.cn

Artikel sebelumnya：js 常用函数 Artikel seterusnya：js 数组排序

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang