Using Javascriptjquery how can I get values from each cells in a selected row - Stack Overflow

admin管理员组

文章数量:1336563

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

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

• javascript
• jquery

Share Improve this question Follow edited Sep 16, 2013 at 18:09 Milligran asked Sep 13, 2013 at 19:37 MilligranMilligran 3,17199 gold badges4646 silver badges5757 bronze badges 5

• But the checkboxes do not have name attributes, do you mean the labels' text content? Also IDs must be unique. – Ram Commented Sep 13, 2013 at 19:40
• Thats correct. The labels text\ – Milligran Commented Sep 13, 2013 at 19:41
• quick ment: your html is missing tbody – thtsigma Commented Sep 13, 2013 at 19:42
• @thtsigma That's one element that pretty much all browsers will add for you. If you omit <tbody /> from the HTML, it'll still show-up in the DOM. It's kinda like how you don't have to use closing </li> tags. – Jasper Commented Sep 13, 2013 at 19:50
• Interesting! Thanks @Jasper I was not aware of that. – thtsigma Commented Sep 13, 2013 at 19:51

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

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.

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.

Try this: http://jsbin./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);
});

本文标签： Using Javascriptjquery how can I get values from each cells in a selected rowStack Overflow