使用Javascript / jquery如何从所选行的每个单元格中获取值

Question

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

Answer 1

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"
  }
] 

Answer 2

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.

Answer 3

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.

Answer 4

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