suchen

Heim >Web-Frontend >js-Tutorial >Wenn Sie eine Tabelle mit JavaScript bedienen, können Sie Zeilen und Spalten hinzufügen und die Hintergrundfarbe für jede zweite Zeile ändern.

Wenn Sie eine Tabelle mit JavaScript bedienen, können Sie Zeilen und Spalten hinzufügen und die Hintergrundfarbe für jede zweite Zeile ändern.

高洛峰
高洛峰Original
2016-11-25 15:05:50921Durchsuche

<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>


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js allgemeine FunktionenNächster Artikel：js allgemeine Funktionen

In Verbindung stehende Artikel

Mehr sehen