Aggiungere una riga all'interno di una tabella html con jquery

spacca!  0 scarso!  0 versione stampa invia per email scheda utente totale visite  411
In questo articolo vediamo come creare una tabella prelevando i dati da un database mysql e come associare una funzione javascript ad ogni riga trovata.
La funzione si occuperà di creare una nuova riga successiva a quella cliccata nella quale verrà caricata la scheda dettaglio tramite una chiamata in ajax.
Da notare l'utilizzo del metodo closest() di jquery che permette di recuperare il riferimento all'elemento più vicino passato come parametro, in questo caso la riga che contiene il nostro link.
La funzione after() invece ci permette di creare un nuovo elemento dopo quello indicato.
Guarda l'esempio.

Iniziamo includendo, come siamo più comodi, la libreria jquery nel tag head della pagina.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Inseriamo di seguito le istruzioni javascript.

<script type="text/javascript">
$(document).ready(function () {

    $("a.dettaglio").click(function (e) {
        e.preventDefault();

        var istat = $(this).attr("data-istat");
        if ($("#" + istat).length > 0) {
            $("tr.dettaglio").remove();
            return false;
        }
        $("tr.dettaglio").remove();
        $(this).closest("tr").after("<tr class='dettaglio'><td colspan='2' id='" + istat + "'></td></tr>");
        $("#" + istat).load("dettaglio.php", {istat: istat});
    });
});
</script>

Per la connessione al database e la creazione della tabella utilizziamo l'estensione mysqli di php. Interroghiamo la solita tabella dei comuni italiani scaricabile qui.

<table>
    <thead>
        <tr>
            <th>Comune</th>
            <th>Provincia</th>
        </tr>
    </thead>
    <tbody>
        <?php
        $sql = new mysqli("localhost", "root", 'password', 'database');
        $query = "SELECT Istat,Comune,Provincia FROM comuni ORDER BY RAND() LIMIT 5";
        $result = $sql->query($query);
        while ($row = $result->fetch_assoc()) {
            echo "<tr>";
            echo "<td>";
            echo "<a class='dettaglio' href='#' data-istat='" . $row['Istat'] . "'>" . $row['Comune'] . "</a>";
            echo "</td>";
            echo "<td>" . $row['Provincia'] . "</td>";
            echo "</tr>";
        }
        ?>
    </tbody>
</table>

Da notare l'attributo data-istat assegnato al link : prende come valore il codice istat del comune e viene utilizzato da javascript per inviare alla scheda dettaglio un riferimento con il quale eseguire la query.

La pagina dettaglio.php, il cui output verrà inserito nella colonna della riga appena creata, verifica per prima cosa che la pagina sia stata richiamata da ajax ed utilizza poi il parametro ricevuto per eseguire la richiesta al database e mostrare i risutlati.

<?php

$isAjax = isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';

if (!$isAjax) {
    $user_error = 'Access denied - not an AJAX request...';
    trigger_error($user_error, E_USER_ERROR);
}

$sql = new mysqli("localhost", "root", 'password', 'database');
$query = "SELECT * FROM comuni WHERE istat = " . (int) $_REQUEST['istat'];
$result = $sql->query($query);
$row = $result->fetch_assoc();
?>

<section>
    <aside><span>Istat :</span> <?php echo $row['Istat'] ?> </aside> 
    <aside><span>Cap :</span> <?php echo $row['CAP'] ?></aside> 
    <aside><span>Prefisso :</span> 0<?php echo $row['Prefisso'] ?></aside> 
    <aside><span>Fisco :</span> <?php echo $row['CodFisco'] ?></aside> 
    <aside><span>Abitanti :</span> <?php echo $row['Abitanti'] ?></aside> 
    <aside><span>Regione :</span> <?php echo $row['Regione'] ?></aside> 
</section>

Non ho commentato il codice ma sono davvero poche righe, se avete bisogno chiedete pure.
 
 

Inserisci un commento

non sei loggato

CAPTCHA