CODEWITHSUNDEEP
javascriptjquery
Milligran
Milligran

Reputation: 3161

Using Javascript/jquery how can I get values from each cells in a selected row

I am trying to figure out how to get and assign each cell value in a row to a variable.In particular the check box values

Here is an example of the table

<table id="mytable" class="table">
    <thead>
        <b><tr><th>Header1</th><th>Header2</th><th>Header2</th><th>Header3</th></tr></b>
    </thead>
    <tr>
        <td>value1</td>
        <td>value1</td>
        <td>
            <label><input id="divpriority" ng-model="priority" type="checkbox" /> Option1</label>

            <label><input id="divsource" type="checkbox" /> Option2</label>

            <label>  <input type="checkbox" checked/>Otion3</label>
        </td>                   
        <td><br/><br/><button id="buttonvalues" type="button" class="btn-primary">GetValues</button></td>
    </tr>
</table>

So when the "GetValues" button is clicked in the current row the values from each cell are assigned to a variable.

I was thinking of something along the lines of this:(I know this is likely incorrect)

  $("#mytable table tbody ").on("click", "#buttonvalues", function() {
     var header1;
     var header2;
     var Options = new Array()

   var header1 = $(this).closest('tr').header1.val ;
   var header2 = $(this).closest('tr').header2.val

  Options = //Not sure what to do here

Using Javascript/jquery how can I get values from each cells in a selected row and assign the values to a variable with the click of a button included in the row.

Please emphasize on assigning the name of the label from the check box into an array variable. I would like to get the name of the checkbox thats checked into the array

Upvotes: 2

Views: 4365

Answers (4)

dc5
dc5

Reputation: 12441

If you want to save off each cell value in the row something like this will work.

Demo Fiddle

Code:

$("#mytable").on("click", ".btn-primary", function () {
    var values = [];
    var $header = $(this).closest('table').find('thead th');
    var $cols   = $(this).closest('tr').find('td');

    $header.each(function(idx,hdr) {
        var $curCol = $cols.eq(idx);
        var $labels = $curCol.find('label');
        var value;

        if($labels.length) {
            value = {};
            $labels.each(function(lblIdx, lbl) {
                value[$(lbl).text().trim()] = $(lbl).find('input').is(':checked');
            });
        } else {
            value = $curCol.text().trim();
        }
        values.push( { name: $(hdr).text(), value: value } );
    });

    console.log(JSON.stringify(values, null, 2));
});

Result:

[
  {
    "name": "Header1",
    "value": "value1"
  },
  {
    "name": "Header2",
    "value": "value1"
  },
  {
    "name": "Header3",
    "value": {
      "Option1": false,
      "Option2": false,
      "Option3": true
    }
  },
  {
    "name": "Header4",
    "value": "GetValues"
  }
]

To get the name of each checked option in an array, change the header loop to:

$header.each(function(idx,hdr) {
    var $curCol = $cols.eq(idx);
    var $labels = $curCol.find('label');
    var value;

    if($labels.length) {
        // Filters for labels containing a checked checkbox
        value = $labels.filter(function(lblIdx) {
            return $(this).find('input').is(':checked');
        }).map(function(valIdx, valLbl) {  // Maps the result to the text value of the label
            return $(valLbl).text().trim();
        }).get();  // returns just the array of values
    } else {
        value = $curCol.text().trim();
    }
    values.push( { name: $(hdr).text(), value: value } );
});

Output Demo Fiddle:

[
  {
    "name": "Header1",
    "value": "value1"
  },
  {
    "name": "Header2",
    "value": "value1"
  },
  {
    "name": "Header3",
    "value": [
      "Option1",
      "Option3"
    ]
  },
  {
    "name": "Header4",
    "value": "GetValues"
  }
]

Upvotes: 4

Vlad
Vlad

Reputation: 978

Try this: http://jsbin.com/oREJEKo/1/edit

$('#mytable').on('click', 'button', function() {
  var checkboxes = $($(this)).closest('tr').find('input[type="checkbox"]');
  var myvalues = [];
  $(checkboxes).each(function() {
    if ( $(this).is(':checked') ) {
       myvalues.push( $(this).closest('label').text() );  
    }
  });

  console.log(myvalues);
});

Upvotes: 1

Ram
Ram

Reputation: 144689

IDs must be unique, you should use classes instead, assuming you have changed the IDs to classes you can use .map() method which returns an array:

$("#mytable").on("click", ".buttonvalues", function() {
     var options = $(this).closest('tr')
                          .find('input[type=checkbox]:checked')
                          .map(function() {
                              return $.trim( $(this).parent().text() );
                          }).get();
});

Please note that $("#mytable table") doesn't select a table that has mytable ID attribute. It selects descendant tables of #mytable element.

Upvotes: 1

Jasper
Jasper

Reputation: 76003

I think you're looking to get the values for a row when the row is clicked-on. If that's the case then your selector could be: $("#mytable").on("click", ".btn-primary", .... And to get the values of the checkboxes: var priority = $(this).closest('tr').find("input").eq(0).val();

I'd suggest placing classes on the checkboxes in each row so you can select by that class rather than depending on the HTML structure always being the same an using .eq(0). Your current use of IDs is not specifically valid as they are supposed to be unique in the DOM.

Upvotes: 1

Related Questions