☰

» »

javascript tabela

javascript tabela

bigbada ::

Lp

Zanima me kako naj z javascriptom naredim 10x10 tabelo, kjer boš lahko posamezne celice klikal (da ne bodo samo narisane) ? Ali moram vsako posebaj imeti kot svoj div ? Ni mi najbolj jasno kako bi to izvedel ? Ker imam trenutno napisano funkcijo, da recimo kliknem na rdeči button in se mi ta barva shrani, potem pa bi kliknil na eno izmed celic v tej tabeli, da se mi obarva.

Nekaj takega imam v mislih:


Trenutna koda, kjer si izberem barvo. Rad bi pa zdaj še, da mi spodaj izrise teh 10x10 celic, da jih potem lahko obarvam. Prosim za pomoč.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#choices {
    position: relative;
    height: 62px; width: 450px;
    border: solid black 2px;
}
div#choices div {
    position: absolute; 
    height: 50px; width: 50px;
    border: solid black 2px;
    margin: 4px;
}
div#theChoice {
    position: relative;
    height: 50px; width: 400px;
    border: solid black 2px;
}
</style>
</head>
<body>
Test
<br/><br/>
<div id="choices">
    <div style="background-color: #000;"></div>
    <div style="background-color: #444;"></div>
    <div style="background-color: #666;"></div>
    <div style="background-color: #888;"></div>
    <div style="background-color: #AAA;"></div>
    <div style="background-color: #CCC;"></div>
    <div style="background-color: #EEE;"></div>
    <div style="background-color: #FFF;"></div>
</div>
<br/><br/>
Moja barva:
<div id="theChoice"></div>


<script type="text/javascript">
(
  function( )
  {
      var divs = document.getElementById("choices").getElementsByTagName("div");
      for ( var d = 0; d < divs.length; ++d )
      {
          var div = divs[d];
          div.style.left = ( d * 55 ) + "px";
          div.onclick = pickThis;
      }
      divs[divs.length-1].style.borderColor = "red";

      function pickThis( )
      {
          document.getElementById("theChoice").style.backgroundColor =
              this.style.backgroundColor;
          for ( var d = 0; d < divs.length; ++d )
          {
              divs[d].style.borderColor = "black";
          }
          this.style.borderColor = "red";
      }           
  
  }
)();
</script>
</body>
</html>

galu ::

Jaz sem podobno stvar delal z "nested for loopom" v for loopu.

10*(10 divov v vrstici, potem pa /br)
Tako to gre.

bigbada ::

Ok, sem rešil problem, mi je nekako uspelo.

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )

Oddelek: Izdelava spletišč		1297331012 (55161) htmltroubles
»

Jquery

Oddelek: Izdelava spletišč		151633 (1357) mk818764
»

poravnava li elementov

Oddelek: Izdelava spletišč		81984 (1849) boss-tech
»

Wampserver in Firefox

Oddelek: Izdelava spletišč		61714 (1594) jonystar
»

Kako se tole naredi?

Oddelek: Izdelava spletišč		261422 (1122) njok

Več podobnih tem