Le changement dynamique de la cellule de la table avec la saisie de l'utilisateur en Javascript

C'est ce que je suis en train de faire: j'ai une table, créé à partir de Javascript avec la saisie de l'utilisateur dans chaque cellule. Ce tableau est juste pour confirmer que les données saisies par l'utilisateur est correct. Si l'utilisateur reçoit un message d'erreur, cliquer sur la cellule qui doit être modifié, et il met en place une zone de texte dans la cellule du tableau avec le courant de la cellule de données. L'utilisateur sera alors en mesure de soumettre des modifications ou annuler les modifications si ils ont cliqué sur le mauvais cellule. C'est actuellement ce que j'ai:

    <table id = "confirm">
      <tr><th>Firstname</th><td id = "txtFirstname" onclick = "update(this.id)">Adan</td></tr>
      <tr><th>Lastname</th><td>Smith</td></tr>
      <tr><th>Username</th><td>ASmith</td></tr>
      <tr><th>Email</th><td>[email protected]</td></tr>
      <tr><th>Phone</th><td>123-456-7890</td></tr>
    </table>

<script type = "text/javascript">
  function update(id){
    //Get contents off cell clicked
    var content = document.getElementById(id).firstChild.nodeValue;
    //Switch to text input field
    document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
  }
</script>

C'est ce que mon code actuel: Lorsque l'utilisateur clique sur la cellule, il remplace le texte actuel à l'intérieur d'une zone de texte, ce qui est excellent, mais lorsque vous essayez de modifier le texte, il appelle la fonction de remplaçant de nouveau le texte avec la valeur "null". Merci de m'aider à comprendre cela!

Bouillonnement.

OriginalL'auteur Vince | 2013-02-09

  1. 0
    <table id = "confirm">
      <tr><th>Firstname</th><td id = "txtFirstname" onclick = "update(this.id)">Adan</td></tr>
      <tr><th>Lastname</th><td>Smith</td></tr>
      <tr><th>Username</th><td>ASmith</td></tr>
      <tr><th>Email</th><td>[email protected]</td></tr>
      <tr><th>Phone</th><td>123-456-7890</td></tr>
    </table>

<script type = "text/javascript">
  function update(id){
    //Get contents off cell clicked
    var content = document.getElementById(id).firstChild.nodeValue;
    //Switch to text input field
    document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
  }
</script>

    Ajouté une instruction if dans la fonction update (). Changé:

    <script type = "text/javascript">
  function update(id){
    if(document.getElementById(id).firstChild != "[object HTMLInputElement]"){
      //Get contents off cell clicked
      var content = document.getElementById(id).firstChild.nodeValue;
      //Switch to text input field
      document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
    }
  }
</script>

    Qui fonctionne comme un charme!

    Votre code est un peu long et salissant. jQuery pourrait être une meilleure option ici: jsfiddle.net/DerekL/McJ4s/5
    J'évite d'en jquery que je ne suis pas trop familier avec elle. Mais merci quand même!

    OriginalL'auteur Vince

  2. 0
        var table = document.getElementById('');
    var rowCount = table.rows.length;
    var noRowSelected = 1;
    for(var i=1; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 1) {
                   break;
                }
                document.getElementById("").value = row.cells[1].innerHTML;
                document.getElementById("").value = row.cells[2].innerHTML;
                document.getElementById("").value = row.cells[3].innerHTML;
                document.getElementById("").value = row.cells[4].innerHTML;
           }
       }

  The Above Example the checkbox must be need for the each row.then we used this check box to get the current edit row values in the dynamic table. then to use the id for edit field to set valued got from the table.

    OriginalL'auteur ShinnedHawks

  3. 0

    Le Changement dynamique de la Ligne du Tableau de la Valeur:

    var tableau = document.getElementById(");

    var rowCount = table.rows.length;

var noRowSelected = 1;

for(var i=1; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {
               break;
            }
            document.getElementById("").value = row.cells[1].innerHTML;
            document.getElementById("").value = row.cells[2].innerHTML;
            document.getElementById("").value = row.cells[3].innerHTML;
            document.getElementById("").value = row.cells[4].innerHTML;
       }
   }

    L'Exemple ci-Dessus, la case doit être nécessaire pour chaque ligne.puis nous avons utilisé cette case à cocher pour obtenir le courant modifier les valeurs de ligne dans le tableau dynamique.

    OriginalL'auteur ShinnedHawks