Retrieving values from a table in HTML using jQuery?

Question

Hi

i was just wondering whats the best way to retrieve the current values from this HTMl code using jquery and storing them in to a array?

<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>

thanks

Answer 1

I didn't test it, but it should do the job:

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

edit: if you want to store the values in an array without the labels, you can do this:

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

But you won't know which value refers to which label. You may want to do this instead:

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

Answer 2

I would iterate over each row, and the parse each for the label and input value I cared about. Note that in the event you have duplicate label names, the object storage will lose values.

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

Basically, there are a couple of ways to do it. The basic steps:

1. Select all of the TDs.
2. Iterate through them, adding them to your Object.

There are a bunch of different ways to do that. None is really wrong or right, but some may perform better or worse than the others. If you'll need to access those rows or cells again, think of a way in which you can chain this with other operations on the site or how you can cache things for performance reasons.

Here's a way to get an array of label/value Objects using map( ), which maps array-like structures to an array and works well in situations like these:

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() }
}); 

Probably not very efficient, but should get you started.