jquery table lire la valeur du champ de saisie

J'ai créé un système de gestion de lieux où vous pouvez créer, supprimer ou modifier des noms de lieux. C'est une table où dans chaque rangée il y a un nom de lieu un bouton d'édition et un bouton de suppression. A la fin de la table, il y a un bouton "créer un nouveau lieu". Maintenant, quand je clique sur le bouton "créer un nouveau lieu", je reçois une nouvelle ligne générée dans laquelle je peux écrire le nouveau nom, annuler l'opération et sauvegarder l'opération. Je veux savoir pour enregistrer une opération qui devrait supprimer le contenu généré et créer une nouvelle ligne avec le nom, modifier et supprimer des cellules. Mon problème est qu'il fonctionne seulement avec une rangée mais si j'ai deux noms en fonctionnement alors le jquery ne sait pas sur quelle rangée j'ai cliqué ok pour l'enregistrer.jquery table lire la valeur du champ de saisie

Exemple:

généré Row1 = Espagne

généré Row2 = Brasil

Cliquez sur OK dans row2, ROW2 enlevé par jquery, le nom de row1 généré en placetable = faux!

Voici le code

<head> 
    <script src="../jquery.js" type="text/javascript"></script> 

$(document).ready(function() { 
    $(".edit").click(function() { 
    var id = $(this).attr("id"); 
    alert("edit "+id); 
    }); 
    $(".delete").click(function() { 
    var id = $(this).attr("id"); 
    alert("delete "+id); 
    }); 
    $("#newbutton").click(function() { 
    $("tr:last").after("<tr><td><input style='width: 80%' /></td><td class=ok>OK</td><td class=cancel>Cancel</td></tr>").ready(function() { 
     $(".cancel").live("click", function() { 
     $(this).parent().remove(); 
     }); 
     $(".ok").click(function() { 
     var name = $(this).val(); 
     $(this).parent().remove(); 
     $("tr .edit:last").after("<tr><td>"+name+"</td><td class=edit>edit</td><td class=delete>delete</td></tr>"); 
     }); 
    }); 
    }) 
}); 
    </script> 
</head> 
<table border=1 id=table> 
<tr><th>Name</th></tr> 
<tr><td>Bombai</td><td id=1 class=edit>edit</td><td id=1 class=delete>delete</td></tr> 
<tr><td>London</td><td id=2 class=edit>edit</td><td id=2 class=delete>delete</td></tr> 
<tr><td>Rom</td><td id=3 class=edit>edit</td><td id=3 class=delete>delete</td></tr> 
</table><label id=newbutton>New Place</label>

Source

2009-06-05 elhombre

Cela a été testé et fonctionne ...

Votre logique jquery était un peu hors.J'espère que cela vous permettra de le comprendre un peu mieux ... ;-)

<script type="text/javascript" language="javascript"> 

$(function() { 
    $(".edit").live('click',function() { 
    var item = $(this).attr("rel"); 
    alert("edit "+item); 
    return false; 
    }); 
    $(".delete").live('click',function() { 
    var item = $(this).attr("item"); 
    alert("delete "+id); 
    return false; 
    }); 
    $(".cancel").live("click", function() { 
    $(this).parent().remove(); 
    return false; 
    }); 
    $(".ok").live('click',function() {      
    var name = $(this).parent().siblings().find('input[type="text"]').val(); 
    $(this).parent().parent().remove(); 
    $("tr:last").after("<tr><td>"+name+"</td><td><a href='#' class='edit'>edit</a></td><td><a href='#' class='delete'>delete</a></td></tr>"); 
    return false; 
    }); 
    $("#newbutton").click(function() { 
    $("tr:last").after("<tr><td><input type='text' style='width: 80%' /></td><td><input type='button' class='ok' value='OK' /></td><td><input type='button' class='cancel' value='Cancel' /></td></tr>") 
    }) 
}); 
</script> 
</head> 
<body> 
<table border="1" id="table"> 
    <tr><th>Name</th></tr> 
    <tr> 
     <td>Bombai</td> 
     <td rel="1"><a href="#" class="edit">edit</a></td> 
     <td rel="1"><a href="#" class="delete">delete</a></td> 
    </tr> 
    <tr> 
     <td>London</td> 
     <td rel="2"><a href="#" class="edit">edit</a></td> 
     <td rel="2"><a href="#" class="delete">delete</a></td> 
    </tr> 
    <tr> 
     <td>Rom</td> 
     <td rel="3"><a href="#" class="edit">edit</a></td> 
     <td rel="3"><a href="#" class="delete">delete</a></td> 
    </tr> 
</table> 
<button id="newbutton">Add New Place</button>

Source

2009-06-05 18:29:46 KyleFarris

Merci beaucoup de m'avoir aidé avec une solution complète, je l'apprécie beaucoup! J'ai créé trois nouvelles lignes avec votre script, mais quand je clique sur OK, elles apparaissent à la fin de la table. N'y a-t-il pas un moyen de les faire apparaître à la fin des lignes modifiables. J'ai essayé de changer $ ("tr: last") en $ ("tr.edit: last") mais quand je clique sur OK, les lignes n'apparaîtront pas :(Avez-vous une solution à ce problème? – elhombre

Tout d'abord, id - doit être unique dans la page!
Comment éditez-vous vos lignes? Il n'y a pas un tel code ici. Pourriez-vous l'ajouter aussi?
Et un petit conseil, vous pouvez marquer la ligne sélectionnée avec un peu de classe ('édition') lors d'un clic d'édition (mais avant de supprimer cette classe de toute autre ligne) et cela vous aidera à trouver quelle ligne est en état d'édition.

EDIT: Aussi, vous pouvez utiliser l'un des plug-ins existants:

* Flexigrid: http://flexigrid.info/ 
* jQuery Grid: http://www.trirand.com/blog/ 
* jqGridView: http://plugins.jquery.com/project/jqGridView 
* Ingrid: http://reconstrukt.com/ingrid/

Grille jQuery (# 2 ci-dessus) prend en charge les cellules modifiables, et a une très bonne documentation et des échantillons sur le site. Je recommande d'y jeter un coup d'oeil au début.

Source

2009-06-05 10:55:30 zihotki

Je n'ai pas encore fait la modification et la suppression. Quand je peux créer de nouveaux endroits qui sont sauvegardés correctement dans le placetable, alors je vais passer à cette tâche. – elhombre

Que diriez-vous d'utiliser certains plug-ins jQuery existants qui vous fourniront toutes ces fonctionnalités? Consultez la mise à jour de la réponse. – zihotki

Merci de me donner une liste de plugins bien structurée je vais les vérifier! S'il n'y a pas de solution au problème sans plugin, j'en tiendrai compte. Je sais qu'ils peuvent vous aider à vous débarrasser de beaucoup de travail mais je ne veux pas utiliser le moins possible les plugins pour que les autres utilisateurs n'aient pas à apprendre une nouvelle syntaxe de plugins ou à se déformer en regardant mon code; – elhombre

Il y a quelques problèmes qui se passent ici.

Le premier est l'ID. Ceux-ci doivent être uniques, surtout si vous les utilisez comme références dans votre javascript. Puisque vos lignes générées n'incluent aucun identifiant, je les supprimerais complètement. Si vous les voulez vraiment, vous pouvez écrire quelque chose comme "id = 'delete_1'" qui les différenciera. Deuxièmement, vous utilisez la fonction de liaison de rappel en direct dans une fonction de rappel de clic. Cela signifie que chaque fois que vous cliquez sur le bouton "nouveau", il tente de relier vos rappels. Je ne suis pas sûr à 100% qu'il y ait un effet secondaire pour ce faire, mais la raison pour 'vivre' est qu'il va lier automatiquement le rappel à tout code html généré de sorte que vous n'avez pas à le faire manuellement.

Je vous recommande de déplacer les appels de liaison ".cancel" et ".ok" en dehors de cette fonction. Liez le rappel ".ok" en utilisant Live. Une fois que vous avez apporté ces modifications, cela peut vous aider à résoudre votre problème.

Si cela ne vous aide pas, utilisez firebug pour comprendre pourquoi jquery fait référence à la mauvaise ligne lors de la sauvegarde.

Source

2009-06-05 17:56:30 Rhinosaurus

jquery table lire la valeur du champ de saisie

Répondre

Questions connexes