Auto sum system where add up those that were not clicked and Zera where I click

Question

I am trying to do the following: on the screen it has to appear from 0 to 36, the moment I click on any of the numbers the value that is in front of it has to zero. And at the same time in front of all the other numbers add +1 to the value you are. And so on every click on any of the numbers changes the values. But I locked 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>

Answer 1

There are some errors in your PHP, besides not being very clear what you want.

But by fixing your PHP, the code looks like this (notice 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 code correct 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
    });
});

Online example: http://jsfiddle.net/mH2u7/

---

EDIT:

I noticed that I had not tagged jQuery as a tag, so if you want to do the same only using pure javascript, you can do so: (http://jsfiddle.net/n9LTQ/)

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;
            }
        }
    }
}