jquery efficient way to select tablerow data

Question

I have a table with multiple rows of the same pattern:

<tr role="row" class="even">
  <td><input type="checkbox" id="valj4"></td>
  <td>Generell grupp</td>
  <td><a href="/Home/DeviceDetails?uuid=2b9fe569-dd6a-403c-b973-fd577acf12b5">IKT Ipad11-    Mirko</a></td>
  <td>Grundinställningar</td>
</tr>

Each row has a checkbox with unique ID, what would be the most efficient way to get a list of UUIDs for the rows with a checked checkbox. I would like to use jQuery.

You could also add a class on the fields and iterate through them using a foreach, and then checking the current checkbox id to manipulate it the way you want — sergioviniciuss, Dec 09 '14 at 10:34
Have you tried anything at all? I suspect it's not about efficiency, but about "how to do it?" — Regent, Dec 09 '14 at 10:35
I use a foreach right now, but i think some kind of jquery selector is better? — Lord Vermillion, Dec 09 '14 at 10:38
It is not necessarily better; but jQuery selector is more *expressive*, to a person who knows how to read it, as it compresses lines and lines of code in a easy compact string. However, since it requires capabilities that are beyond the standard selectors, jQuery will still need to iterate over nodes, thus you are not necessarily doing anything computationally worse. — Amadan, Dec 09 '14 at 10:50

score 3 · Accepted Answer · answered Dec 09 '14 at 10:41

$(function() {
  var texts = [];
  $('tr td:has(input:checkbox:checked) ~ td > a').each(function(i, e) {
    texts.push($(e).attr('href'));
  });
  $('#result').html(texts.join('<br/>'));
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr role="row" class="even">
    <td>
      <input type="checkbox" id="valj4" checked>
    </td>
    <td>Generell grupp</td>
    <td><a href="/Home/DeviceDetails?uuid=2b9fe569-dd6a-403c-b973-fd577acf12b5">IKT Ipad11-    Mirko (...5)</a>
    </td>
    <td>Grundinställningar</td>
  </tr>
  <tr role="row" class="even">
    <td>
      <input type="checkbox" id="valj4">
    </td>
    <td>Generell grupp</td>
    <td><a href="/Home/DeviceDetails?uuid=2b9fe569-dd6a-403c-b973-fd577acf12b6">IKT Ipad11-    Mirko (...6)</a>
    </td>
    <td>Grundinställningar</td>
  </tr>
  <tr role="row" class="even">
    <td>
      <input type="checkbox" id="valj4" checked>
    </td>
    <td>Generell grupp</td>
    <td><a href="/Home/DeviceDetails?uuid=2b9fe569-dd6a-403c-b973-fd577acf12b7">IKT Ipad11-    Mirko (...7)</a>
    </td>
    <td>Grundinställningar</td>
  </tr>
</table>
<div id="result"/>

Getting the UUID is then an easy exercise in string chopping.

@Lix: Yeah, that was quickest to write and show results. Replaced with nicer. — Amadan, Dec 09 '14 at 10:46
Note: `input` is redundant with the `:checked` selector. `:checkbox:checked` is enough. — Gone Coding, Dec 09 '14 at 14:33

score 1 · Answer 2 · answered Dec 09 '14 at 10:36

I assume your table has an id and it's "#table-id":

$("#table-id").find(":checked")

would get you all the checked checkboxes and radio boxes.

$("#table-id").find("input[type='checkbox']:checked")

would get you all the checked checkboxes.

var ids = "";
$("#table-id").find("input[type='checkbox']:checked").each(function(){
    ids += $(this).attr("id") + ",";
});

would give you a comma seperated list containing the ids of checked checkboxes in the table.

and the UUIDS list:

var UUIDs = "";
$("#table-id").find("input[type='checkbox']:checked").each(function(){
    var href = $(this).closest("tr").find("td > a").first().attr("href");
    var UUID = href.split('?')[1];
    UUIDS += UUID + ",";
});

the `:checkbox` pseudo selector is simpler than using `input[type='checkbox']`, so you could simply have `$('#table-id :checkbox:checked)` as your selector. `:checkbox` has been available since version 1.0 of jQuery — Gone Coding, Dec 09 '14 at 14:30
Yes, I couldn't remember that because I usually use the attribute selector type. — Taha Paksu, Dec 09 '14 at 14:41

score 1 · Answer 3 · answered Dec 09 '14 at 10:49

I would try the following

var ids = [];
$("#table input:checkbox:checked").each(function () {
    var uuid = getParameter($(this).closest('tr').find('a').eq(0).attr('href'))
    ids.push(uuid);
});

function getParameter(url) {
    var regex = new RegExp("[\\?&]uuid=([^&#]*)"),
        results = regex.exec(url);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

where #table is the id of your table

Example

Michal Paszkiewicz · Answer 4 · 2014-12-09T12:01:02.573

0

Create a new list of UUIDs.

var listOfUUIDs = [];

Get the checked input, go up to grandparent (the tr), then find the a inside it.

Go through the list of a's, adding UUIDs to the list.

$("tr input[checked=checked]").parent().parent().find("td a").each(function(){ 
    listOfUUIDs.push(
        $(this).prop('href').substr(indexOf("uuid=") + 5)
    )
});

edited Dec 09 '14 at 12:01

answered Dec 09 '14 at 10:43

Michal Paszkiewicz

573
7
21

1

Please explain your answer briefly for the benefit for other readers. – Mohit Jain Dec 09 '14 at 11:40

score 0 · Answer 5 · answered Dec 09 '14 at 11:11

0

jQuery('#formId').find('tr[class=even]').each(function () {

var rowId = "";

this.find('input[type=checkbox]').each(function() {

    if(this.checked) {
        rowId = "row" + $(this).val();
    }

});
$(this).attr('id', rowId);

});

answered Dec 09 '14 at 11:11

Nilam Naik

55
1
1
15

Daniel · Answer 6 · 2014-12-09T11:16:56.030

-1

This should give you what you need.

$('tr').each(function(index) {
    var $this   = $(this), 
        input   = $this.find('input'),
        result  = '';

    if ( input.is(':checked') ) {
        var uuid    = $this.find('a').attr('href').replace(/^\/Home\/DeviceDetails\?uuid=/g, ""),
            result  = result + index + '. ' + input.attr('id') + ' has the uuid: ' + uuid + '<br />';
    }

    $('#result').html(result);
});

edited Dec 09 '14 at 11:16

answered Dec 09 '14 at 10:44

Daniel

396
2
11

Your `replace()` command is far to specific to the example HTML to be used as a complete solution. – Lix Dec 09 '14 at 10:47
this would be a quick solution if the link is the same every time, if the link is different instead of replace use something like this http://www.kevinleary.net/jquery-parse-url/ , but think this should be enough – Daniel Dec 09 '14 at 10:52

score -2 · Answer 7 · edited Dec 09 '14 at 11:41

-2

try this

$( "input[type=checkbox]" ).change(function() {
 if($(this).is(":checked")) {
     alert($(this).attr("id"));
  }
 });

edited Dec 09 '14 at 11:41

Jens

15,326
9
51
75

answered Dec 09 '14 at 10:37

Sharma Vikram

2,172
4
19
41

I need the UUID not the ID of checkbox – Lord Vermillion Dec 09 '14 at 10:39

jquery efficient way to select tablerow data

7 Answers7