Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

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.

高洛峰

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

Original

937 Leute haben es durchsucht

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

Nach dem Login kopieren

Verwandte Etiketten：

javascript

Quelle：php.cn

Vorheriger Artikel：js allgemeine Funktionen Nächster Artikel：js-Array-Sortierung

Erklärung dieser Website

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

Neueste Artikel des Autors