Changement de td à la zone de texte lorsque l'utilisateur clique dessus et changer de zone de texte retour à la td lorsque l'utilisateur est fait

Je suis à la recherche d'une certaine manière l'utilisateur peut modifier un td à partir de la table en cliquant sur elle. Mon installation actuelle est lorsqu'un utilisateur clique sur un td, il doit remplacer les cliqué td par une zone de texte qui contient le texte de l'cliqué td. Ensuite, lorsque l'utilisateur clique en dehors de cela, appuie sur entrée. Il devrait changer la zone de texte retour à la td.

C'est le Tableau que j'ai:

<table class="table" id="tableCompleted">
    <thead>
        <tr>
            <th>Name</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>No</td>
            <td>No</td>
        </tr>
        <tr>
            <td>Jesse</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
        </tr>
        <tr>
            <td>David</td>
            <td>No</td>
            <td>Yes</td>
            <td>No</td>
            <td>No</td>
        </tr>
    </tbody>
</table>

C'est le script que j'ai écrit, le problème que j'ai est que, lorsqu'un utilisateur clique sur un td, il remplace tous les td et je n'ai pas compris comment faire pour le changer en arrière quand il perd le focus. J'ai essayé à l'aide d'un bouton, mais qu'il est encore pire. Aussi le texte de la td ne pas se placer à l'intérieur de la zone de texte.

Le script que j'ai utilisé pour cela:

$('td').click(function () {
    $('td').replaceWith(function () {
        return '<input type="text" id="modify" "value="' + $('#Text').val() + '" />';
    });
})

Actuellement j'ai 3 problèmes avec elle, je ne sais pas comment faire pour changer seulement la td qui est cliqué, parce que tous les td ne disposez pas d'un id unique ou de la classe. Et je ne suis pas sûr de savoir comment le changer en arrière lorsque l'utilisateur se fait à le changer. Il est également à ne pas placer le contenu de la td à l'intérieur de la zone de texte.

Le remplacement de la cellule du tableau avec une zone de texte rendrait invalide. Vous ne pouvez pas avoir du contenu à l'intérieur d'un tableau qui n'est pas à l'intérieur d'une cellule, de sorte que vous ne pouvez pas prédire comment les différents navigateurs ne réagissent. Placer la zone de texte à l'intérieur de la cellule.

OriginalL'auteur Dr. Banana | 2015-07-26

  1. 8

    Pour faire référence à l'élément cliqué, vous pouvez utiliser le this mot-clé:

    $('td').on('click', function() {
    $(this)...
});

    Aussi vous ne devriez pas remplacer le td avec un input, car un trélément ne peut pas avoir un input enfant. Au lieu de supprimer le textContent de la td et ajouter un input à elle. Voici un moyen de mise en œuvre de cette:

    $('td').on('click', function() {
    var $this = $(this);
    var $input = $('<input>', {
        value: $this.text(),
        type: 'text',
        blur: function() {
           $this.text(this.value);
        },
        keyup: function(e) {
           if (e.which === 13) $input.blur();
        }
    }).appendTo( $this.empty() ).focus();
});

    Voici une démo à l'aide de l'extrait ci-dessus.

    Vous avez également un plus raisonnable option: contentEditable propriété.

    $('td').prop('contentEditable', true);

    À l'aide de la propriété navigateur gère le montage. Vous pouvez ajouter manuellement un contentEditable aux cellules cibles dans votre balisage ou d'utiliser le JavaScript pour la modification de l'attribut.

    Et voici un exemple d'utilisation de la contentEditable l'attribut jsfiddle.net/10u9rgfc

    OriginalL'auteur undefined

  2. 1

    Pur javascript solution ici. Et de plus jsfiddle démo
    Lutte contre la criminalité 🙂

    (function(){
'use-strict';

var td = document.getElementsByTagName('td');
for(var i=0;i<td.length;i++) {
    td[i].addEventListener('click', change, false);
}

function change() {
    if(this.firstChild.nodeType !== 3) {      
        return;
    }
    var docFrag = document.createDocumentFragment();
    var input = document.createElement('input');
    input.value = this.textContent;
    this.removeChild(this.firstChild);
    docFrag.appendChild(input);
    this.appendChild(docFrag);
}
}());

    OriginalL'auteur fubbe

  3. -1

    Vous pouvez utiliser this. Ici, c'est un travail démo.

      $('td').click(function () {
    $(this).replaceWith(function () {
        return '<input type="text" id="modify" value="' + $(this).text() + '"> </input>';
    });
})

    Pour le récupérer, vous pouvez utiliser joindre focusout sur this.

    Votre exemple remplace le td avec une zone de texte, mais il n'a pas le remplir avec la valeur de la td, il affiche maintenant undefined
    Pourquoi est ce droit, il corrups l'ensemble de la table.
    Essayez ceci, jsfiddle.net/sachinnambiar/7o8tk8bo
    Cette solution crée des invalides de balisage et il n'ya aucune garantie que le bout de code fonctionne dans tous les navigateurs.
    Cela pourrait être ce que l'OP a demandé, c'est juste que ce que l'OP a demandé qui est faux. Vérifiez f.e. @Vohuman 's réponse à la place.

    OriginalL'auteur Sachin Nambiar Nalavattanon