Auto sum system where those that were not clicked are added and zeros where I click

Question

Auto sum system where those that were not clicked are added and zeros where I click

Navigation

#1 by (2 votes)

2

I'm trying to do the following: the screen has to appear from 0 to 36, by the time I click on any of the numbers the value in front of it has to zero. And at the same time in front of all other numbers add +1 to the value you are. And so on with each click on any of the numbers change the values. But I caught in this code:

<table border="1">
      <?php

       $linha1 = array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18);
       $linha2 = array(19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36);

       $tabela = array($linha1, $linha2);
       for ($i =0 ; $i < 19; $i++)
       {
            echo "<tr>";

            for ($j =0 ; $j < 18; $i++)
            {
                echo "<td>valor</td>";
            }
        echo "</tr>;
       }
      ?>
</table>

php javascript html

asked by anonymous 24.06.2014 / 04:37

1 answer

Remote PHP access with Ajax - Return is the PHP code itself Date type field in Codegniter form

score 2 · Accepted Answer

You have some errors in your PHP, and it is not very clear what you want.

But by correcting your PHP, the code looks like this (note the comments in the code):

Server side:

<table border="1">
      <?php

       $linha1 = array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18);
       $linha2 = array(19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36);

       $tabela = array($linha1, $linha2);
       for ($i =0 ; $i < count($tabela); $i++){ // usar o tamanho da $tabela

            echo "<tr>";
            $estaLinha = $tabela[$i]; // só para clarificar

            for ($j =0 ; $j < 18; $j++){ // aqui tinha '$i++' e deve ser '$j++'
                echo "<td>".$estaLinha[$j]."</td>"; // em vez da palavra "valor" colocar o valor da array
            }
        echo "</tr>";
       }
      ?>
</table>

Now with this correct code the resulting HTML is this:

<table border="1">   
    <tbody>
        <tr>         
            <td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td>         
        </tr>      
        <tr>       
            <td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td>        
        </tr>
    </tbody>
</table>

With this table, you can use this JavaScript / jQuery:

$('table td').on('click', function () {       // oscultador de clic
    $(this).nextAll().each(function (i) {     // procurar os seguintes '<td>' com o método '.nextAll()' e percorrer um a um
        this.innerHTML = parseInt(this.innerHTML, 10) + 1; // adicionar +1 a cada um
        if (i == 0) this.innerHTML = 0;                    // tratar a excepção que é o primeiro imediatamente a seguir, verificando o index ('i') a função .each() passa
    });
});

Example online: link

EDIT:

I noticed that it had not tagged jQuery as a tag, so if you want to do the same only using pure javascript, you can do this: ( link )

var celulas = document.querySelectorAll('table tr td');
for (var i = 0; i < celulas.length; i++) {
    celulas[i].addEventListener('click', mudarValor);
}

function mudarValor(e) {
    var este = e.target;
    var verificador = 0;
    for (var i = 0; i < celulas.length; i++) {
        if (este == celulas[i]) {
            var proximo = este.nextElementSibling;
            proximo.innerHTML = 0;
            while (proximo) {
                proximo = proximo.nextElementSibling;
                if (proximo) proximo.innerHTML = parseInt(proximo.innerHTML, 10) + 1;
            }
        }
    }
}