getting the row values with checkbox

Question

hello guys? can you please help with this? i have this tables in HTML.what i want to achieve is that, when i click the row the checkbox will be checked and the row will be highlighted.and is it possible with the checkbox column hidden?

<table border="1" id="estTable">
<thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Age</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>Chris</td>
        <td>10</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>Cass</td>
        <td>15</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>Aldrin</td>
        <td>16</td>
    </tr>

</tbody>

</table>
<input type="button" value="Edit" id="editbtn"/>

<div id="out"></div>

and i have this javascript to get the values of the selected row.And i was hoping to print one row at a time.

 $('#editbtn').click(function(){

    $('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
         $('#out').append("<p>"+$(this).text()+"</p>");
        });
});

when one row is clicked the other row that was clicked will be uncheck. :] — chris
– chris, Commented Jan 12, 2013 at 15:21

pete · Accepted Answer · 2013-01-12 15:34:40Z

This gets a little easier when you use classes to add more context to your source:

<tr>
    <td class="select hidden">
        <input type="checkbox">
    </td>
    <td class="name">Chris</td>
    <td class="age">10</td>
</tr>

Then you can do something like this:

$(document).ready(function () {
    'use strict';
    $('#estTable tbody tr').click(function (e) {
        //when the row is clicked...
        var self = $(this), //cache this
            checkbox = self.find('.select > input[type=checkbox]'), //get the checkbox
            isChecked = checkbox.prop('checked'); //and the current state
        if (!isChecked) {
            //about to be checked so clear all other selections
            $('#estTable .select > input[type=checkbox]').prop('checked', false).parents('tr').removeClass('selected');
        }
        checkbox.prop('checked', !isChecked).parents('tr').addClass('selected'); //toggle current state
    });
    $('#editbtn').click(function (e) {
        var selectedRow = $('#estTable .select :checked'),
            tr = selectedRow.parents('tr'), //get the parent row
            name = tr.find('.name').text(), //get the name
            age = parseInt(tr.find('.age').text(), 10), //get the age and convert to int
            p = $('<p />'); //create a p element
        $('#out').append(p.clone().text(name + ': ' + age));
    });
});

Live demo: http://jsfiddle.net/Lf9rf/

Razmig · Accepted Answer · 2013-01-12 15:16:05Z

1

if i understand the "print one row at a time" correctly, i think you need to empty your "out" selector before executing the new call

$('#editbtn').click(function(){

    $('#out').empty();

    $('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
        $('#out').append("<p>"+$(this).text()+"</p>");
    });
});

answered Jan 12, 2013 at 15:16

Razmig

6491 gold badge5 silver badges10 bronze badges

1 Comment

chris Over a year ago

i meant, when one row is clicked the other row that was checked will be uncheck. :]

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

jsBin demo

CSS:

.highlight{
    background:gold;
}

jQuery:

$('#estTable tr:gt(0)').click(function( e ){ 
  var isChecked = $(this).find(':checkbox').is(':checked');
  if(e.target.tagName !== 'INPUT'){
      $(this).find(':checkbox').prop('checked', !isChecked);
  }
  $(this).toggleClass('highlight');
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 12, 2013 at 15:17

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

1 Comment

chris Over a year ago

sir? is this possible with the checkbox hidden?

Collectives™ on Stack Overflow

getting the row values with checkbox

3 Answers 3

Live demo: http://jsfiddle.net/Lf9rf/

Comments

1 Comment

jsBin demo

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Live demo: http://jsfiddle.net/Lf9rf/

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related