Doplnění barevných políček šachovnice

Fórum › JavaScript, AJAX, jQuery

MaxDJs 0

Návštěvník

3. 3. 2010 #1

Zdravím všechny,

měl bych menší prosbu, a to jak místo textového pole

cell is row "+j+", column "+i

dát obrázek barevného pole šachovnice a to tak, aby na každém sudém poli bylo bílé(světlé) políčko a na každém lichém poli bylo černé(tmavé) políčko. Lze to něják udělat??

Děkuji za odpověď

function sachovnice() {

        // get the reference for the body

        var body = document.getElementsByTagName("body")[0];



        // creates a <table> element and a <tbody> element

        var tbl     = document.createElement("table");

        var tblBody = document.createElement("tbody");



        // creating all cells

        for (var j = 0; j < 8; j++) {

            // creates a table row

            var row = document.createElement("tr");



            for (var i = 0; i < 8; i++) {

                // Create a <td> element and a text node, make the text

                // node the contents of the <td>, and put the <td> at

                // the end of the table row

                var cell = document.createElement("td");

                var cellText = document.createTextNode("cell is row "+j+", column "+i);

                cell.appendChild(cellText);

                row.appendChild(cell);

            }



            // add the row to the end of the table body

            tblBody.appendChild(row);

        }



        // put the <tbody> in the <table>

        tbl.appendChild(tblBody);

        // appends <table> into <body>

        body.appendChild(tbl);

        // sets the border attribute of tbl to 2;

        tbl.setAttribute("border", "2");

    }

Nahlásit jako SPAM

IP: 90.177.22.–

toka 0

Stálý člen

4. 3. 2010 #2

Není na tom nic složitého, jen se podívej:

function sachovnice() { 

    // get the reference for the body 

    var body = document.getElementsByTagName("body")[0]; 

    

    var black = 1;

    

    // creates a <table> element and a <tbody> element 

    var tbl     = document.createElement("table"); 

    var tblBody = document.createElement("tbody"); 

    

    // creating all cells 

    for (var j = 0; j < 8; j++) { 

      // creates a table row 

      var row = document.createElement("tr"); 

      

      for (var i = 0; i < 8; i++) { 

        // Create a <td> element and a text node, make the text 

        // node the contents of the <td>, and put the <td> at 

        // the end of the table row 

        var cell = document.createElement("td");

        

        // width and height

        cell.style.width = cell.style.height = '100px';

        

        if(black) cell.style.backgroundColor = '#000000';

        else cell.style.backgroundColor = '#ffffff';

        

        // invert color, not at the end

        if(i != 7) black = !black;

        

        //cell.appendChild(cellText); 

        row.appendChild(cell); 

      } 

      

      // add the row to the end of the table body 

      tblBody.appendChild(row); 

    } 

    

    // put the <tbody> in the <table> 

    tbl.appendChild(tblBody); 

    // appends <table> into <body> 

    body.appendChild(tbl); 

    // sets the border attribute of tbl to 2; 

    tbl.setAttribute("border", "2"); 

  }

Stačí si jen představit, jak šachovnice vypadá :-)

Nahlásit jako SPAM

IP: 86.61.209.–

Tomáš Kavalek

MaxDJs 0

Návštěvník

6. 3. 2010 #3

V Y Ř E Š E N O

Dá se použít proměnná v cyklu for??

var rozmer = document.getElementById('rozmer').value

for (var j = 0; j < rozmer; j++) { 

      var row = document.createElement("tr"); 

      for (var i = 0; i < rozmer; i++) { 

        var cell = document.createElement("td");

<form method="post">

<input type="text" id="rozmer" value="8">

<input type="submit" value="Odeslat">

Protože když to takhle udělám tak se mi šachovnice nevykresluje.

Nahlásit jako SPAM

IP: 90.177.22.–

toka 0

Stálý člen

12. 3. 2010 #4

Dá.

<html>

<head>

</head>

<body>

<h1>Sachy</h1>

<input id="counter" value="8" />

<input type="button" onclick="sachovnice();" value="Vykresli" />

<script>

  function sachovnice() { 

    // get the reference for the body 

    var body = document.getElementsByTagName("body")[0];

    

    var black = 0;

    

    // creates a <table> element and a <tbody> element 

    var tbl     = document.createElement("table"); 

    var tblBody = document.createElement("tbody"); 

    

    var rozmer = document.getElementById('counter').value;

    

    // creating all cells 

    for (var j = 0; j < rozmer; j++) { 

      // creates a table row 

      var row = document.createElement("tr"); 

      

      if(!(rozmer % 2)) black = !black;

      

      for (var i = 0; i < rozmer; i++) { 

        // Create a <td> element and a text node, make the text 

        // node the contents of the <td>, and put the <td> at 

        // the end of the table row 

        var cell = document.createElement("td");

        

        // width and height

        cell.style.width = cell.style.height = '100px';

        

        black = !black;

        

        if(black) cell.style.backgroundColor = '#000000';

        else cell.style.backgroundColor = '#ffffff';

        

        //cell.appendChild(cellText); 

        row.appendChild(cell); 

      } 

      

      // add the row to the end of the table body 

      tblBody.appendChild(row); 

    } 

    

    // put the <tbody> in the <table> 

    tbl.appendChild(tblBody); 

    // appends <table> into <body> 

    body.appendChild(tbl); 

    // sets the border attribute of tbl to 2; 

    tbl.setAttribute("border", "2"); 

  } 



    sachovnice();

</script>

</body>

</html>