Retrieving values from a table in HTML using jQuery?

Question

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

Alsciende · Accepted Answer · 2010-06-10 12:32:52Z

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

edited Jun 10, 2010 at 12:32

answered Jun 9, 2010 at 13:30

Alsciende

27k9 gold badges54 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ajm Over a year ago

#metric_summary will give you the table, not the rows.

artlung Over a year ago

This fails for me. The first parameter of the function passed into each() is the index, api.jquery.com/each the second is the Element. So revise (input) to be (index, input) and the code will work.

Alsciende Over a year ago

Ok thanks for the tip. I wonder how useful is the index compared to the actual element.

Mo. Over a year ago

thanks for your answer, but i have decided im just going to stor the current value of the input box in to an array. would it be something like this: 'function retrieve_metric_stats(){ var metricVals = []; $('.editable_metric').each(function (input) { MetricVals = input.val; return metricVals; }); }'

artlung · Accepted Answer · 2010-06-09 13:36:56Z

1

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

answered Jun 9, 2010 at 13:36

artlung

33.5k19 gold badges76 silver badges124 bronze badges

Comments

ajm · Accepted Answer · 2010-06-09 13:38:52Z

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

Select all of the TDs.
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.

Collectives™ on Stack Overflow

Retrieving values from a table in HTML using jQuery?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related