How to get HTML table row data, based on checkbox selection in each row?

Question

I have a table dynamically created with java script.It has one checkbox in each row as the first column.I want to fetch the row data based on the checkboxes selected of respective rows.

var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);

cell0.innerHTML = 'Select'; 
cell1.innerHTML = 'Epic';
cell0.innerHTML = " checkbox html code ";
cell1.innerHTML = epicSeries[j];

Actually too many columns are there I am putting just two of them. I have lot of epics down the column header 'epic' and one checkbox as the first column in each row.I want row data based on checkbox selcted.

Sorry code was too long so I cant paste all of them.

post some codes where you've created the checkbox and the javascript function. It would be helpful — polin
– polin, Commented Oct 11, 2012 at 12:49
Will this fecth be called separately or on every change of any of the checkboxes? — David Mårtensson
– David Mårtensson, Commented Oct 11, 2012 at 12:59

Reflective · Accepted Answer · 2012-10-11 16:13:46Z

2

Having now an example of your code and bit more clear requirement, i think you should do the folowing:

$('#myTable input[type=checkbox]:checked').each(function() { 

   var row = $(this).parent().parent();
   var rowcells = row.find('td');
   // rowcells contains all td's in the row
   // you can do 
   // rowcells.each(function() {var tdhtml = $(this).html(); }); 
   // to cycle all of them    

});

If you have table like that:

<table>
  <tr>
     ....
     <td><input type="checkbox" name="cb1" checked></td>
     ...   
  </tr>
</table>

This code will return all <tr>'s with checked checkboxes

If row selecting check box is in a deeper level you should as more .parent()'s as needed

This exemple uses jQuery of course.

edited Oct 11, 2012 at 16:13

answered Oct 11, 2012 at 15:53

Reflective

3,9371 gold badge17 silver badges25 bronze badges

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

1 Comment

ravikant Over a year ago

thanks man,It perfectly worked for me. If you want to select a particular column only then just use var rowcells = row.find('tdClassName'); rowcells.each(function() {var tdhtml = $(this).html(); });

Reflective · Accepted Answer · 2012-10-11 12:56:08Z

0

$('table#tableid input[type=checkbox]').each(function() {
   if ($(this).is(':checked')) {
     .... 
   }
});

something like that i supose

answered Oct 11, 2012 at 12:56

Reflective

3,9371 gold badge17 silver badges25 bronze badges

3 Comments

David Mårtensson Over a year ago

include the :checked in the first query ;), checkbox]:checked to only select the checked, but you still need to get the row item using a closest call I think.

Reflective Over a year ago

the guy could do something when the checkbox is not checked ... don't you think :) if needed the row could be get for selected items only just using .parent() ... anyway ...depends what the guy wants to make ... it's not very clear :)

Reflective Over a year ago

Nobody knows who's right :) the question is not very clear :)

Abubakkar · Accepted Answer · 2012-10-11 13:24:13Z

0

This is what I used in my case using jquery:

$('.chkbox').click(function(){
    var row = jQuery(this).closest('tr');//your nearest row for the check box

    $(row).each(function(){
        //get all data using the id and use/store it
        $(this).find(".item").html();
    });
});

For each checkbox and for each item in a row give a class(I used chkbox for all checkboxes and item, price etc. for all items of a single row)

edited Oct 11, 2012 at 13:24

answered Oct 11, 2012 at 12:52

Abubakkar

15.7k8 gold badges58 silver badges84 bronze badges

Collectives™ on Stack Overflow

How to get HTML table row data, based on checkbox selection in each row?

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related