Réglage de l'index dynamique en javascript

Question

J'ai une table à laquelle je dois ajouter dynamiquement des lignes en cliquant sur un bouton. Chaque rangée a 3 zones de texte et un bouton d'effacement. En cliquant sur le bouton Effacer les données dans les zones de texte doivent être effacées, c'est-à-dire en cliquant sur le bouton, j'envoie l'index de la ligne à une méthode qui supprime le contenu des zones de texte de cet index.

Problème - Comment puis-je spécifier le numéro d'index dans la propriété onClick du bouton de ligne lors de l'ajout de la nouvelle ligne?

Answer 1

Idéal pour utiliser la délégation d'événements, ou vous pouvez utiliser this en JavaScript.

Délégation événement w/jQuery

<input class="clear-row-btn" type="button" >Clear Row</input> 

événement .live

$(".clear-row-btn").live("click", function(){ 
    var $tr = $(this).closest("tr"); 
    $tr.find("input[type='text']").val(""); 
}); 

HTML w/onclick méthode

<input type="button" onclick="clearRow(this)" >Clear Row</input> 

jQuery

function clearRow(btn) { 
    var $tr = $(btn).closest("tr"); 
    $tr.find("input[type='text']").val(""); 
} 

JavaScript

function clearRow(element) { 

     while(element.nodeName!='TR'){ 
     element = element.parentNode; 
     } 

     //find textboxes inside the element, which is now the parent <tr>  
} 

Answer 2

Comment puis-je spécifier le numéro d'index dans la propriété onClick du bouton de ligne tout en ajoutant la nouvelle ligne?

Vous n'en avez pas. Au lieu de cela, utilisez le fait que les zones de texte et le bouton sont dans la même ligne. Je n'utiliserais probablement pas onclick sur le bouton du tout; à la place, je disposerais d'un gestionnaire de clic unique sur le table et gérerais les clics sur le bouton (c'est ce qu'on appelle la délégation d'événement). Quelque chose comme ceci:

var table = document.getElementById("theTableID"); 
table.onclick = function(event) { 
    var elm, row, boxes, index, box; 

    // Handle IE difference 
    event = event || window.event; 

    // Get the element that was actually clicked (again handling 
    // IE difference) 
    elm = event.target || event.srcElement; 

    // Is it my button? 
    if (elm.name === "clear") { 
     // Yes, find the row 
     while (elm && elm !== table) { 
      if (elm.tagName.toUpperCase() === "TR") { 
       // Found it 
       row = elm; 
       break; 
      } 
      elm = elm.parentNode; 
     } 
     if (row) { 
      // Get all input boxes anywhere in the row 
      boxes = row.getElementsByTagName("input"); 
      for (index = 0; index < boxes.length; ++index) { 
       box = boxes[index]; 
       if (box.name === "whatever") { 
        box.value = ""; 
       } 
      } 
     } 
    } 
}; 

... mais si vous voulez continuer à utiliser l'attribut onclick sur le bouton à la place, vous pouvez saisir le milieu de cette:

Le bouton:

<input type="button" onclick="clearBoxes(this);" ...> 

La fonction:

function clearBoxes(elm) { 
    var row, boxes, index, box; 

    // Find the row 
    while (elm) { 
     if (elm.tagName.toUpperCase() === "TR") { 
      // Found it 
      row = elm; 
      break; 
     } 
     elm = elm.parentNode; 
    } 
    if (row) { 
     // Get all input boxes anywhere in the row 
     boxes = row.getElementsByTagName("input"); 
     for (index = 0; index < boxes.length; ++index) { 
      box = boxes[index]; 
      if (box.name === "whatever") { 
       box.value = ""; 
      } 
     } 
    } 
} 

Références:

• spécification DOM2 Core - bien pris en charge par tous les principaux navigateurs
• DOM2 HTML spécification - les liaisons entre les DOM et HTML
• DOM3 Core spécification - des mises à jour, pas tous pris en charge par tous les principaux navigateurs
• HTML5 specification - qui maintenant a les liaisons DOM/HTML, comme pour HTMLInputElement ainsi vous connaissez les propriétés value et name.

---

hors sujet: Comme vous pouvez le voir, j'ai dû contourner certaines différences de navigateur et faire des choses utilitaires simples (comme trouver l'élément parent le plus proche d'un élément) explicitement dans ce code. Si vous utilisez une bibliothèque JavaScript décent comme, Prototype, YUI, Closure, ou any of several others, ils feront ces choses pour vous, vous permettant de vous concentrer sur votre problème réel.

Pour vous donner une idée, voici que le premier exemple (manipulation du clic par délégation de l'événement) écrit avec jQuery:

$("#theTableID").delegate("input:button[name='clear']", "click", function() { 
    $(this).closest("tr").find("input:text[name='whatever']").val(""); 
}); 

Oui, vraiment. Et d'autres bibliothèques rendront également les choses plus simples.