Ajouter / Supprimer des Lignes de la Table

J'ai créé une table dans Twitter Bootstrap ici

Je veux être capable de faire 2 choses avec elle

1) Supprimer des lignes en appuyant sur l'icône de suppression - va supprimer cette ligne

2) Ajouter un nouveau nom à ajouter du texte (nom) champ de saisie, puis en appuyant sur "ajouter une nouvelle ligne"

La recherche d'un moyen de le faire avec javascript /jquery

Grâce

Mon Code

<div class="input-prepend input-append"><span class="add-on"><i class="icon-picture"></i></span>

<input class="span2"
id="appendedInputButton" type="text" placeholder="Add New Name Here">
<button class="btn" type="button">Add New Row</button>
</div>
<table id="users" class="table table-bordered table-condensed">
<tr>
    <th>name</th>
    <th></th>
</tr>
<tr>
    <td><a href="#" data-pk="1">Mike</a>

    </td>
    <td class="taskOptions"> <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top"
        data-original-title="Delete Row"><i class="icon-remove"></i></a>

    </td>
</tr>
<tr>
    <td><a href="#" data-pk="2">John</a>

    </td>
    <td class="taskOptions"> <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top"
        data-original-title="Delete Row"><i class="icon-remove"></i></a>

    </td>
</tr>
<tr>
    <td><a href="#" data-pk="3">Mary</a>

    </td>
    <td class="taskOptions"> <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top"
        data-original-title="Delete Row"><i class="icon-remove"></i></a>

    </td>
</tr>
</table>

Notes

Cliquant sur le bouton supprimer supprimez la ligne
Tapant dans le champ de saisie et en appuyant sur "ajouter une nouvelle ligne" bouton ajouter un nouveau
ligne à la fin de la table avec le Nom rempli

utiliser .remove() et .append() ou .après() fonction de votre but dans la jquery

InformationsquelleAutor Redwall | 2013-02-21

4

Vous pouvez facilement supprimer la ligne en faisant cela:
```
$('td.taskOptions a.tip-top').on('click', function(e) {  
    e.preventDefault();
    $(this).tooltip('hide');
    $(this).parents('tr').remove();
});
```
De même, l'ajout d'une nouvelle ligne peut être fait comme suit:
```
$('button.btn').click(function(e) {  

    e.preventDefault();
    var the_name = $.trim($('#appendedInputButton').val());

    var new_row = $('<tr>\
                         <td>\
                             <a href="#" data-pk="1">'+the_name+'</a>\
                         </td>\
                         <td class="taskOptions">\
                             <a href="#deleteProject"  data-toggle="modal" class="tip-top" data-original-title="Delete Row"><i class="icon-remove"></i></a>\
                         </td>\
                      </tr>');
    new_row.appendTo($('#users'));
});
```
Veuillez noter qu'il pourrait être intéressant d'ajouter une classe plus spécifique nom de la touche (lorsque vous cliquez sur pour ajouter la ligne) pour éviter toute confusion. Un ID pourrait fonctionner tout aussi bien.

J'ai mis à jour votre jsFiddle avec la fonctionnalité supplémentaire. Vous pouvez voir ici.
- génial merci beaucoup et bon point sur le bouton de classe
- Vous devriez noter également que vous utilisez une ancienne version de jQuery dans le Violon, qui ne prend pas en charge on(). Vous devez le remplacer avec live().
- merci, oui j'ai chargé la version à télécharger facilement de bootstrap js comme seule option de là pour une raison. Suppose que je pourrais ajouter en tant que ressource. Je vois un petit problème, peut-être u sais comment le résoudre. Quand je fais ajouter une nouvelle ligne, je suis incapable de le supprimer. Des idées?
- C'est ce que je disais ci-dessus. Vous devez remplacer la on() avec live().
- Voir ici > jsfiddle.net/qxdz4/8
- un grand merci encore
- désolé de re-hachage de cette. J'ai essayé de mettre à jour le violon pour utiliser jquery 1.9.1 dans le f/w options et j'ai ajouté bootstrap comme des ressources. Mais j'ai toujours un problème avec la suppression de lignes créées, même si je suis en utilisant les dernières jquery et on() - une idée d'où je pourrais être en train de mal tourner, je ne peux pas le voir? jsfiddle.net/UbpfK/2
- Le Bootstrap vous l'avez compris, est de lancer une erreur, l'empêchant ainsi de travailler. Il n'y a rien de mal avec le code que vous avez mis à jour. Voici l'erreur > Uncaught TypeError: Cannot read property 'webkit' of undefined dans bootstrap.min.js:1
- ok merci quand même, bizarre que dans cette version jsfiddle.net/UbpfK/3 j'ai utiliser la dernière version de Bootstrap. Merci pour votre aide, apprécié..
InformationsquelleAutor BenM

Je ne sais pas comment vous obtenir chaque ligne pk de données (data-pk) de l'attribut. C'est à vous
Sur document.Prêt

$('[rel=tooltip]').tooltip();
function bindCloseButtons(){
    $("#users td.taskOptions a").click(function(e){
        $(this).parent().parent().remove();
    });
}

function addTableRow(name , pk){

    //name column
    var row = $("<tr></tr>");
    row.append('<td><a href="#" data-pk="'+pk+'">'+name+'</a></td>');

    //close button
    var btnClose = $('<td class="taskOptions"> <a href="#deleteProject"  data-toggle="modal" class="tip-top" data-original-title="Delete Row"><i class="icon-remove"></i></a></td>');

    row.append(btnClose);

    $("#users").append(row);
    bindCloseButtons();
    $('[rel=tooltip]').tooltip();
}

$("#addNew").click(function(e){
    var name = $("#appendedInputButton").val();
    var pk = 1; //TODO: set your pk here 
    addTableRow(name, pk);

});

bindCloseButtons();

Ici un violon:
http://jsfiddle.net/qxdz4/16/

Utilisation live() ou on() lors de la liaison.
n'hésitez pas à modifier 🙂
Pourquoi? Ma réponse est parfaitement bien 😉
ouais. merci pour la remarque

InformationsquelleAutor Keeper Hood

Tout d'abord vous créer une méthode AddmultipleInput()

L'intérieur de la fonction,

enter code here

.AddMultipleInput = function (btnAddId, btnDelId, inputContainerIdPrefix, inputContainerCss, firstChildInputIdPrefix) {
if ($('.' + inputContainerCss).length < 2) {
    $('#' + btnDelId).attr('disabled', 'disabled');
}

$('#' + btnAddId).click(function () {
    var num = $('.' + inputContainerCss).length; //how many "duplicatable" input fields we currently have
    var newNum = new Number(num + 1);   //the numeric ID of the new input field being added

    //create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#' + inputContainerIdPrefix + num).clone().attr('id', inputContainerIdPrefix + newNum);

    newElem.children().each(function () {
        var idPrefix = $(this).attr('id').substring(0, $(this).attr('id').length - 1);
        var namePrefix = $(this).attr('name').substring(0, $(this).attr('name').length - 1);
        $(this).attr('id', idPrefix + newNum).attr('name', namePrefix + newNum);
    })

    //insert the new element after the last "duplicatable" input field
    $('#' + inputContainerIdPrefix + num).after(newElem);

    //enable the "remove" button
     $('#' + btnDelId).attr('disabled', '');

    //business rule: you can only add 5 names
    if (newNum == 5)
        $('#' + btnAddId).attr('disabled', 'disabled');

});

$('#' + btnDelId).click(function () {
    var num = $('.' + inputContainerCss).length;

    $('#' + inputContainerIdPrefix + num).remove();
    $('#' + btnAddId).attr('disabled', '');
    if (num == 2)
        $('#' + btnDelId).attr('disabled', 'disabled');
});

Juste Essayer celui-ci. J'espère que cela est utile pour vous.

InformationsquelleAutor Duk

0

Je vous suggère de yo utiliser à la suite de fonctions jQuery:

sur(), cliquez sur(), remove(), append()

Merci de faire des recherches sur ce, aussi regarder les sélecteurs jQuery afin de trouver comment sélectionner la bonne ligne.

InformationsquelleAutor
0
```
$('.icon-remove').live('click',function(){
    $(this).parent('tr').remove();
});
```
Si vous utilisez jQuery 1.7 ou au-dessus, puis utilisez .on au lieu de .live.
- .live() est obsolète.
- pas avec la version de jQuery, il l'utilise.
- juste assez; alors permettez-moi de souligner une sémantique de mal à la place: l'aide d' .live() est une mauvaise pratique. Il y a une raison, c'est obsolète, à 1,9, et déconseillé deux versions antérieures. .delegate() existe sur la version qu'il utilise.
- je vous remercie de me donner la suggestion.
InformationsquelleAutor Suraj Shrestha
0

Ajouter une classe à votre supprimer des liens (comme supprimer rangée) et d'utiliser quelque chose comme:
```
$(document).on("click",".delete-row",function(ev) {
    ev.preventDefault();
    $(this).tooltip('hide');
    $(this).parents("tr").first().remove();
});
```
Remarque: "$(this).tooltip('détruire');" serait mieux que "cacher", mais votre violon de démarrage de la version ne supporte pas les détruire encore. Aussi, vous pouvez définir $("#utilisateurs") au lieu de $(document) en tant que gestionnaire de cet événement si vous le souhaitez, aussi longtemps que la suppression de la rangée de boutons sont des enfants de la gestionnaire de l'événement est déléguée correctement.

Pour ajouter une ligne de la réponse de la BenM devrait fonctionner parfaitement.

PS:

.les parents(sélecteur) fonction de voyages de plus d'un niveau de l'arborescence DOM, tandis que .parent() parcourt un seul niveau de l'arborescence DOM.

.les parents(sélecteur) fonction sélectionne tous les parents qui correspondent au sélecteur, donc au cas où il y a un changement en fin de compte vous mettre une table à l'intérieur d'un tableau (accidentellement im sûr), vous devez utiliser .(première), en vous assurant de ne pas supprimer la ligne incorrecte.

Edit: Comme mentionné par BenM, le code précédent ne fonctionne pas avec de nouvelles lignes, j'ai oublié de l'ajouter partie de la question, le nouveau code devrait fonctionner.
- Il n'y a pas besoin de parents().first() ici. Chaque élément aura une seule tr parent.
- Sympa, mais vous devez également mettre à jour votre réponse, car cela ne fera que de les lier à des éléments actuellement dans les DOM, et il est plus particulièrement désireux d'ajouter de nouvelles lignes, de sorte que votre code ne fonctionne pas sur ceux qui sont insérés après la liaison a eu lieu.
- C'est supposer beaucoup, mais oui, idéalement, c'est vrai
InformationsquelleAutor cernunnos

Vous devez vous connecter pour publier un commentaire.