Comment ajouter des lignes au milieu d'une table avec jQuery?

J'ai une table qui a des noms des clients avec les produits qu'ils ont acheté avec leur prix. Donc, il y a plusieurs enregistrements pour chaque client. Cette table est simple 3 colonne de table : nom de produit et de prix.

Ce que je veux faire est:

Mettre tous les enregistrements appartenant à un client (je l'ai fait) et juste après ces lignes l'ajout d'une ligne supplémentaire qui serait juste montrer prix total de tous les produits que chaque client a acheté. Cette ligne aurait cellule vide dans le nom du produit et de la colonne. Et auraient total dans la colonne des prix.

MODIFIER

C'est juste un simple tableau simple sans aucune classe ou id. client sage regroupés Tableau est généré par php. Donc j'ai un tableau comme celui

<table>
    <tr>
        <td> name1 </td>
        <td> product1 </td>
        <td> 100 </td>
    </tr>
    <tr>
        <td> name1 </td>
        <td> product2 </td>
        <td> 200 </td>
    </tr>
    <tr>
        <td> name2 </td>
        <td> product3 </td>
        <td> 50 </td>
    </tr>
    <tr>
        <td> name2 </td>
        <td> product1 </td>
        <td> 100 </td>
    </tr>
</table>

Et je veux convertir :

<table>
    <tr>
        <td> name1 </td>
        <td> product1 </td>
        <td> 100 </td>
    </tr>
    <tr>
        <td> name1 </td>
        <td> product2 </td>
        <td> 200 </td>
    </tr>
    <!-- New row -->
    <tr>
        <td>  </td>
        <td>  </td>
        <td> 300 </td>
    </tr>
    <tr>
        <td> name2 </td>
        <td> product3 </td>
        <td> 50 </td>
    </tr>
    <tr>
        <td> name2 </td>
        <td> product1 </td>
        <td> 100 </td>
    </tr>
    <!-- New row -->
    <tr>
        <td>  </td>
        <td>  </td>
        <td> 150 </td>
    </tr>
</table>
Comment êtes-vous délimiter les lignes pour chaque client? Une classe? Id? Si vous avez quelque chose d'identifiable, il devrait être facile à obtenir que de ligne et de modifier le DOM d'après elle.
Pouvez-vous fournir un code HTML? Afin que nous puissions voir les noms de classe de vous donner les éléments, etc.

OriginalL'auteur understack | 2010-04-01

  1. 8

    À l'aide de jQuery, vous pouvez sélectionner toutes les lignes où le nom d'utilisateur est contenu dans l'un de ses éléments descendants. Je suis en supposant que les noms d'utilisateur sont uniques.

    $("tr:contains('" + username + "')")

    Maintenant, trouver le dernier

    $("tr:contains('" + username + "')").last()

    Et l'utilisation de la after fonction pour insérer votre nouvelle ligne.

    ok, je vois le point. Je peux ajouter une classe basée sur les noms et utilisez votre truc. Mais je pense que de toute façon je n'ai qu'à récupérer la liste de tous les noms de la première.

    OriginalL'auteur geowa4

  2. 19
    var prize = 1 * 1;
    var newrow = $('<tr><td></td><td></td><td>' + prize + '</td></tr>');
    $('#rowid').after(newrow);

    ou

    newrow.insertAfter('#rowid');

    où #rowid est un id à partir d'une ligne dans laquelle vous voulez ajouter une nouvelle ligne.

    j'ai utilisé cette réponse. très utile 🙂 d'ailleurs, est-il un moyen d'animer les insérer? 😀

    OriginalL'auteur jAndy