Comment Modifier le code HTML d'une cellule de tableau dans inline à l'aide de Jquery

Je voudrais modifier une cellule de tableau en cliquant sur elle. J'ai essayé mais ce n'est pas à jour correctement.

Quand je suis en train de mettre à jour la première cellule de la première ligne de la dernière colonne de son être mis à jour. Mais si j'essaie de me mettre à jour dans le milieu de la totalité de la valeur de la colonne à se changer.Mais pour moi, une seule valeur de la cellule doit se changer.

Violon Ici

JS:

JS:

$(document).ready(function() {
  $('.editable').click(function(e) {
    var i = 0;
    var id = $(this).attr('id');
    e.stopPropagation(); //<-------stop the bubbling of the event here
    var value = $('#' + id).html();

    console.log(id + i);

    updateVal('#' + id, value);

  });

  function updateVal(currentEle, value) {
    console.log("Current Element is" + currentEle);
    $(currentEle).html('<input class="thVal" maxlength="4" type="text" width="2" value="0" />');
    $(".thVal").focus();
    $(".thVal").keyup(function(event) {
      if (event.keyCode == 13) {
        $(currentEle).html($(".thVal").val().trim());
        //$(currentEle).html($(".thVal").val().trim());


      }

    });

    $(document).click(function() { //you can use $('html')
      $(currentEle).html($(".thVal").val().trim());
    });
  }
});

HTML:

<body>
  <tbody id="itemtab" style="width:100%;height:200px !important;font-size:12px">
    <table border="1">
      <th>field1</th>
      <th>field2</th>
      <th>field3</th>
      <tr>
        <td>10</td>
        <td>10</td>
        <td id="my1" class="editable">10</td>
      </tr>
      <tr>
        <td>10</td>
        <td>10</td>
        <td id="my2" class="editable">20</td>
      </tr>
      <tr>
        <td>10</td>
        <td>10</td>
        <td id="my3" class="editable">30</td>
      </tr>
    </table>
  </tbody>
</body>

InformationsquelleAutor Kathirvel Appusamy | 2014-12-08
  1. 0

    De sorte qu'il semble très bien fonctionner si vous modifiez le sous-gestionnaire d'événement à partir de la manipulation d'un click sur document à la gestion d'une focusout sur .thVal. par exemple, au Lieu de:

    $(document).click(function() {
    $(currentEle).html($(".thVal").val().trim());
});

    Ne

    $(".thVal").focusout(function () {
    $(currentEle).html($(".thVal").val().trim());
});

    JSFiddle ici

    • merci beaucoup mec
    InformationsquelleAutor bowheart
  2. 1

    Le problème est que $(document).click gestionnaire n'est pas toujours atteint, car parfois remontée d'événements est empêché par e.stopPropagation(); de $('.editable').click événement.

    Optimisé et à code fixe:

    $('.editable').click(function (e) {
    e.stopPropagation();
    var value = $(this).html();
    updateVal(this, value);
});

function updateVal(currentEle, value) {
    $(currentEle).html('<input class="thVal" maxlength="4" type="text" width="2" value="' + value + '" />');
    $(".thVal", currentEle).focus().keyup(function (event) {
        if (event.keyCode == 13) {
            $(currentEle).html($(".thVal").val().trim());
        }
    }).click(function(e) {
        e.stopPropagation();
    });

    $(document).click(function() {
        $(".thVal").replaceWith(function() {
            return this.value;
        });
    });
}

    Démo: http://jsfiddle.net/8acoz3fv/4/

    InformationsquelleAutor dfsq