Zufällige Farbe für <tr>

Also insgesamt versuche ich die Kästchen Farbe ändern, wenn jemand eine Maus über sie legt. Die Farbe muss zufällig sein. Ich weiß, dass ich einen Verbindungspunkt zwischen meinen Funktionen vermisse, aber ich kann nicht herausfinden, was es ist.Zufällige Farbe für <tr>

<!DOCTYPE html> 
<html onmousedown='event.preventDefault();' 
     onmouseenter = "colorize();" 
> 
<head> 
<title> Boxes </title> 
<meta charset='utf-8'> 
<style> 

    table { 
    border-spacing: 6px; 
    border: 1px rgb(#CCC); 
    margin-top: .5in; 
    margin-left: 1in; 
} 
    td { 
    width: 40px; height: 40px; 
    border: 1px solid black; 
    cursor: pointer; 
} 

</style> 
<script>

Erstellen einer Funktion aufgerufen Kolorieren, der ein Element-Objekt als Parameter übergeben wird und setzt die Elemente Hintergrundfarbe Unterbringungsarten unter Verwendung des rgb (r, g, b) Methode Einstellen jedes R, G und B zu eine Zufallszahl zwischen 0 und 255.

function colorize() { 

    var 
    r = ('0'+(Math.random()*255|0).toString(16)).slice(-2), 
    g = ('0'+(Math.random()*255|0).toString(16)).slice(-2), 
    b = ('0'+(Math.random()*255|0).toString(16)).slice(-2); 
    return '#' +r+g+b; 
    } 

    function colorize(co) { 
    document.body.style.background = co; 
    } 

    </script> 
    </head> 
    <body> 
    <table> 
    <tbody> 
    <script type="text/javascript">

Verwendung document.write() und for-Schleifen in der Tabelle zu füllen, eine 16x16-Box-Tabelle zu erstellen. Erstellen Sie für jedes td-Element einen onmouseenter-Aufruf zum Einfärben und übergeben Sie ihm das Element selbst (this).

var row = 16; 
    var cols = 16; 

    for(var r=0;r<row;r++){ 
    document.write("</tr>"); 

    for(var c=0;c<cols;c++){ 
    document.write("<td></td>"); 
    } 

    document.write("</tr>"); 
    } 
    </script> 
    </tbody> 
    </table> 
    </body> 
    </html>

Quelle

2017-04-10 HTMLnoobcs17001

Bitte korrigieren Sie Ihre Formatierung, damit Ihr Code lesbar ist. – Carcigenicate

Hoffe das hilft dir! – HTMLnoobcs17001

Was ist, wenn Ihre Textschriftfarbe dieselbe wie die Hintergrundfarbe ist? – TeaCode

Ich bin nicht sicher, was Sie mit Körper Hintergrund machen wollte, sagte nichts über die in Ihrem Text. ALo Ihre Colorizer-Funktion wird überschrieben. Vielleicht wolltest du so etwas ...?

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title> Boxes </title> 
 
<meta charset='utf-8'> 
 
<style> 
 
table { 
 
    border-spacing: 6px; 
 
    border: 1px rgb(#CCC); 
 
    margin-top: .5in; 
 
    margin-left: 1in; 
 
} 
 
td { 
 
    width: 40px; height: 40px; 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
} 
 
</style> 
 
    
 
<script> 
 
    function colorize(el) { 
 
    var r = ('0'+(Math.random()*255|0).toString(16)).slice(-2), 
 
     g = ('0'+(Math.random()*255|0).toString(16)).slice(-2), 
 
     b = ('0'+(Math.random()*255|0).toString(16)).slice(-2); 
 
     el.style.backgroundColor = '#' +r+g+b; 
 
    } 
 

 
    </script> 
 
    </head> 
 
    <body> 
 
    <table> 
 
    <tbody> 
 
    <script type="text/javascript"> 
 
    var row = 16; 
 
    var cols = 16; 
 

 
    for(var r=0;r<row;r++){ 
 
    document.write("</tr>"); 
 

 
    for(var c=0;c<cols;c++){ 
 
     document.write("<td onMouseEnter='colorize(this);'></td>"); 
 
    } 
 
    document.write("</tr>"); 
 
    } 
 
    </script> 
 
    </tbody> 
 
    </table> 
 
    </body> 
 
    </html>

Quelle

2017-04-10 21:49:46

Genau das habe ich gesucht! – HTMLnoobcs17001

Ich bin froh, dass es ist, was Sie wollten, aber bitte beachten Sie, dass dies weit von optimalem Code ist. Es gibt einige Optimierungen, die hier gemacht werden müssen und ich würde das nicht so verwenden, wie es ist, es sei denn, es ist ein Hobby-Projekt. –

Es sieht so aus, als wäre ich falsch gelaufen und habe keine ID für die Einfärbung, wo du das "el" legst. – HTMLnoobcs17001

Sie müssen Ihre Colorize-Funktion aktualisieren jede Zelle in Ihrer Tabelle. Tauschen Sie beide kolorieren() und kolorieren (co) mit einer Funktion:

function colorize() { 
    var r = ('0'+(Math.random()*255|0).toString(16)).slice(-2), 
     g = ('0'+(Math.random()*255|0).toString(16)).slice(-2), 
     b = ('0'+(Math.random()*255|0).toString(16)).slice(-2); 

    for (var i = 0; i < document.getElementsByTagName("td").length; i++){ 
     document.getElementsByTagName("td")[i].style.backgroundColor = "#"+r+g+b; 
    } 
}

Quelle

2017-04-10 21:49:37 alfredo

anrufen Das würde auch funktionieren! Vielen Dank! – HTMLnoobcs17001

i mit Ids spielen und das Hinzufügen von onmousedown in HTML-Tag, das die func aufruft.

function colorize() { 
 

 
    var 
 
    r = ('0'+(Math.random()*255|0).toString(16)).slice(-2), 
 
    g = ('0'+(Math.random()*255|0).toString(16)).slice(-2), 
 
    b = ('0'+(Math.random()*255|0).toString(16)).slice(-2); 
 
    return '#' +r+g+b; 
 
    } 
 

 

 
function change(){ 
 
    var x = document.getElementById("1"); 
 
    var y = document.getElementById("2"); 
 
    x.style.color = colorize(); 
 
    y.style.color = colorize(); 
 

 
\t }

<table frame="box" onmousedown="change()"id="1" > 
 
    <tr> 
 
    <th>Month</th> 
 
    <th>Savings</th> 
 
    </tr> 
 
    <tr> 
 
    <td>January</td> 
 
    <td>$100</td> 
 
    </tr> 
 
</table> 
 

 
<table frame="box" onmousedown="change()" id="2" > 
 
    <tr> 
 
    <th>Month</th> 
 
    <th>Savings</th> 
 
    </tr> 
 
    <tr> 
 
    <td>February</td> 
 
    <td>$200</td> 
 
    </tr> 
 
</table>

Quelle

2017-04-10 21:52:27

Zufällige Farbe für <tr>

Antwort

Verwandte Themen