CODEWITHSUNDEEP
javascriptjqueryhtml
Mo.
Mo.

Reputation: 42583

Retrieving values from a table in HTML using jQuery?

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

Upvotes: 2

Views: 525

Answers (3)

Alsciende
Alsciende

Reputation: 26981

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

Upvotes: 1

ajm
ajm

Reputation: 20105

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.

Upvotes: 1

artlung
artlung

Reputation: 33833

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

Upvotes: 1

Related Questions