td bgcolor="#FF0000"

Her kan du få hjælp og stille spørgsmål til JavaScript!
Besvar
jimmi
Begynder
Indlæg: 2
Tilmeldt: 26. jun 2018, 11:50

td bgcolor="#FF0000"

Indlæg af jimmi » 26. jun 2018, 12:04

Jeg er lidt ny med javaScript :) Men jeg kan se muligheder 8-)
pt. skriver den ok, Wrong eller Nothing indicated ( <div id="msg01">' )

Hvordan få jeg farveskift på cellebaggrunden ? Så baggrundsfarven bliver grøn ved 'ok'

td bgcolor="#FF0000" = Wrong
td bgcolor="#00FF00" = ok



Kode: Vælg alt

<tr>
    <td>hej med dig<input id="test01" type="text" maxlength="8" onblur="myFunction01()" style="width: 95px; text-transform: lowercase;">&nbsp;</td>
    <td valign="top"><div id="msg01">'Past'</div></td>
    </tr>

Kode: Vælg alt

<script>
 
     function myFunction01() {
      var mylist01 = document.getElementById("test01");
      
	  // var mylist_text01 = test01.options[mylist01.selectedIndex].text;
	  var mylist_text01 = test01.value;      
	  
	  
      var div_msg01 = document.getElementById("msg01");
      var msg01="";
      if(mylist_text01 !=""){         
          if(mylist_text01.toLowerCase()=="test"){
             msg01="<font color='#66CC'>Ok</font>";
          }
          else{
             msg01 ="<font color='#CC0000'>Wrong</font>";
          }
      }
	  else{
		msg01 ="<font color='#CC0000'>Nothing indicated</font>";
	  }
      div_msg01.innerHTML=msg01;        
  }</script>

Brugeravatar
ronols
Entusiast
Entusiast
Indlæg: 25
Tilmeldt: 16. jun 2018, 08:26

Re: td bgcolor="#FF0000"

Indlæg af ronols » 27. jun 2018, 19:04

kig på denne code

Kode: Vælg alt

<!DOCTYPE html>
<html lang="da">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
        <title>demo</title>

        <style type="text/css">
            .red{
                background-color:#FF0000;
            }

            .green{
                background-color:#00FF00;
            }
        </style>
    </head>
    <body>
        <table id="mytable" >
            <tr>
                <td>hej med dig<input id="test01" type="text" maxlength="8" onblur="myFunction01()" style="width: 95px; text-transform: lowercase;">&nbsp;</td>
                <td valign="top">øf</td>
            </tr>
            <tr>
                <td valign="top"><div id="msg01">'Past'</div></td>
                <td valign="top">grisen øffede</td>
            </tr>
        </table>
        <script type="text/javascript">
            function remove_class_names_from_element(elm) {
                var antal = elm.classList.length;
                for (i = antal; i > 0; i--) {
                    var name = elm.classList.item((i - 1));
                    elm.classList.remove(name);
                    // console.log(i + " frde " + name); // test
                }
            }

            function myFunction01() {
                var mylist01 = document.getElementById("test01");

                // var mylist_text01 = test01.options[mylist01.selectedIndex].text;
                var mylist_text01 = test01.value;

                element = document.getElementById("mytable").rows[0];
                // element.classList.add("test");
                remove_class_names_from_element(element);
                var div_msg01 = document.getElementById("msg01");
                var msg01 = "";
                if (mylist_text01 != "") {
                    if (mylist_text01.toLowerCase() == "test") {
                        msg01 = "<font color='#66CC'>Ok</font>";
                        element.classList.add("green");
                    } else {
                        msg01 = "<font color='#CC0000'>Wrong</font>";
                        element.classList.add("red");
                    }
                } else {
                    msg01 = "<font color='#CC0000'>Nothing indicated</font>";
                }
                div_msg01.innerHTML = msg01;
            }
        </script>
    </body>
</html>

jimmi
Begynder
Indlæg: 2
Tilmeldt: 26. jun 2018, 11:50

Re: td bgcolor="#FF0000"

Indlæg af jimmi » 28. jun 2018, 08:51

Flot arbejde :-)

Hvordan laver jeg det om, så det kun er en celle, og ikke hele rækken ?

Brugeravatar
ronols
Entusiast
Entusiast
Indlæg: 25
Tilmeldt: 16. jun 2018, 08:26

Re: td bgcolor="#FF0000"

Indlæg af ronols » 28. jun 2018, 15:40

Hvordan laver jeg det om, så det kun er en celle, og ikke hele rækken ?
lave denne linje
element = document.getElementById("mytable").rows[0];
om til
element = document.getElementById("mytable").rows[0].cells[0];

cristian
Moderator
Moderator
Indlæg: 879
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: td bgcolor="#FF0000"

Indlæg af cristian » 2. jul 2018, 11:11

Kode: Vælg alt

element = document.getElementById("mytable").rows[0].cells[0];
Er et godt forslag men sæt dit id på cellen du vil ændre farven på i stedet for på tabellen,
så du ikke statisk skal sætte array værdier.

Kode: Vælg alt

element = document.getElementById("cellToColor");
element.style.color = "red";

Besvar