scroll through the records in a table with php Javascript

Question

I have a table in html with data printed via php (mysql). I wish that by pressing a button next to each record, I appear the value of the associated record and print the displayed value.

I nearly succeeded but every time I press takes me only the first record button and not that of the same row.

 <?php
            $data = 'sito';
            $db = mysqli_connect('localhost', 'root', '', $data);
            $result= mysqli_query ($db, "SELECT * FROM prodotti");
            echo"<table id='tabella' width='800' border='1'>";
                echo"<tr>
                  <th >Codice</th>
                  <th >Nome</th>
                  <th >Giacenza</th>
                  <th> Azioni </th>
                  <th >Data consegna</th>
                </tr>";
                while($row=mysqli_fetch_array($result)){
           echo"<tr>
                  <td id='cod'>".$row['Codice']."</td>
                  <td id='nom'>".$row['Nome']."</td>
                  <td id='gia'>".$row['Giacenza']."</td>
                  <td id='dat'>
                    <button id='pulsante'  onClick='giacenza()'>pulsante</button>
                  </td>
                  <td id='datac'>";
                        $dat=$row['Data consegna'];
                        $data=substr($dat,8,2)."-".substr($dat,5,2)."-".substr($dat,0,4);
                        echo $data."</td>
                </tr>";}
            echo"</table>";
    ?>

here php code sorry

var d = document.createElement("div");
d.setAttribute("id", "modifica");
var String = "<textarea id='textarea' rows='1' cols='3'></textarea> <input type='text' id='input'></input>          <button type='submit' id = 'boton'>aggiorna </button>";
d.innerHTML = String;
var g = document.getElementById("gia").textContent;
document.body.appendChild(d);
document.getElementById("textarea").innerHTML = g; 

Answer 1

The buttons that you are putting next to each record are all the same. You are not giving your JavaScript any way of knowing which button was pressed. try something like this:

<button id='pulsante'  onClick='giacenza(".$row['Codice'].")'>pulsante</button>

and change your giacenza javascript function to take Codice as a parameter and use it to identify which record is being manipulated.

I assume Codice is your item code or something unique to the record. If you don't have a field like that you need to come up with something.

You also need unique identifiers for anything else like the text boxes you are manipulating. Instead of using id of "MyBox" use id of "MyBox_".$row['Codice']

Answer 2

I would suggest pass the value to the function as a parameter

PHP Code

<?php
    $data = 'sito';
    $db = mysqli_connect('localhost', 'root', '', $data);
    $result= mysqli_query ($db, "SELECT * FROM prodotti");
    echo"<table id='tabella' width='800' border='1'>";
    echo"<tr>
            <th >Codice</th>
            <th >Nome</th>
            <th >Giacenza</th>
            <th> Azioni </th>
            <th >Data consegna</th>
          </tr>";
    while($row=mysqli_fetch_array($result)){
       echo"<tr>
              <td id='cod'>".$row['Codice']."</td>
              <td id='nom'>".$row['Nome']."</td>
              <td id='gia'>".$row['Giacenza']."</td>
              <td id='dat'>
              <!-- Next line has the change -->
                <button id='pulsante' onClick='giacenza(/"".$row['Giacenza']."/")'>pulsante</button>
              </td>
              <td id='datac'>";
                    $dat=$row['Data consegna'];
                    $data=substr($dat,8,2)."-".substr($dat,5,2)."-".substr($dat,0,4);
                    echo $data."</td>
            </tr>";
    }
    echo"</table>";
?>

And your javascript code: Instead of taking value from element it uses the value from passed parameter

function giacenza(g){
   var d = document.createElement("div");
   d.setAttribute("id", "modifica");
   var String = "<textarea id='textarea' rows='1' cols='3'></textarea> <input type='text' id='input'></input>          <button type='submit' id = 'boton'>aggiorna </button>";
   d.innerHTML = String;
   document.body.appendChild(d);
   document.getElementById("textarea").innerHTML = g;
}