Récupérer des valeurs d'une table en HTML en utilisant jQuery?

Question

Je me demandais juste quel est le meilleur moyen de récupérer les valeurs actuelles de ce code HTMl en utilisant jquery et les stocker dans un tableau?

<table id="metric_summary"> 
    <tbody> 
    <tr class="editable_metrics"> 
     <td><label>DataSet:</label></td> 
     <td><input name="DataSet" value="prod"></td> 
    </tr> 

    <tr class="editable_metrics"> 
     <td><label>HostGroup:</label></td> 
     <td><input name="HostGroup" value="MONITOR"></td> 
    </tr> 

    <tr class="editable_metrics"> 
     <td><label>Host:</label></td> 
     <td><input name="Host" value="ALL"></td> 
    </tr> 

    <tr class="editable_metrics"> 
     <td><label>Class:</label></td> 
     <td><input name="Class" value="CPU"></td> 
    </tr> 

    <tr class="editable_metrics"> 
     <td><label>Object:</label></td> 
     <td><input name="Object" value="cpu"></td> 
    </tr> 

    <tr class="editable_metrics"> 
     <td><label>Metric:</label></td> 
     <td><input name="Metric" value="CapacityCPUUtilization"></td> 
    </tr> 

grâce

Answer 1

Je n'ai pas testé, mais il devrait faire le travail:

var Dict = {}; 
$('#metric_summary input').each(function (index, input) { 
    Dict[input.name] = input.value; 
}); 

modifier: si vous voulez stocker les valeurs dans un tableau sans les étiquettes, vous pouvez le faire:

var Values = []; 
$('.editable_metrics input').each(function (i, input) { 
    Values.push(input.value); 
}); 

Mais vous ne saurez pas quelle valeur fait référence à quelle étiquette. Vous pouvez le faire à la place:

var Values = []; 
$('.editable_metrics input').each(function (i, input) { 
    Values.push([ input.label, input.value ]); 
}); 

Answer 2

J'itérer sur chaque ligne, et l'analyser chacun pour le label et input value je souciais. Notez que dans le cas où vous avez des noms d'étiquettes en double, le stockage d'objets perdra des valeurs.

var arr_storage = []; // var to store as array 
var obj_storage = {}; // var to store as object 
$('#metric_summary tr').each(function(){ 
    var key = $('td label:first', this).text() 
    var value = $('td input:first', this).val(); 
    arr_storage.push([ key, value ]); 
    obj_storage[key] = value; 
}); 

Answer 3

Fondamentalement, il existe plusieurs façons de le faire. Les étapes de base:

1. Sélectionnez tous les TD. Itélez à travers eux, en les ajoutant à votre objet.

Il existe plusieurs façons de le faire. Aucun n'est vraiment faux ou juste, mais certains peuvent être meilleurs ou moins bons que les autres. Si vous devez à nouveau accéder à ces lignes ou cellules, pensez à un moyen de chaîner le tout avec d'autres opérations sur le site ou de mettre en cache des éléments pour des raisons de performances.

est ici un moyen d'obtenir un tableau d'étiquette/valeur des objets en utilisant map(), qui maps array-like structures to an array et fonctionne bien dans des situations comme celles-ci:

someObject = $('#metric_summary .editable_metrics td:first-child').map(function(){ 
    var $el = $(this); 
    return { 'label' : $el.find('label').html(), 'value' : $el.next().find('input').val() } 
}); 

Probablement pas très efficace, mais devrait vous aider à démarrer.