jQuery - adding checkboxes in a specific table

Question

I'm stuck with my small jQuery script. I want to make checkboxes for the rows of a specific table. This would be a greasemonkey script, so I can't edit the source of the site.

This is how the HTML is set up:

<html>
  <head></head>
  <body>
     <table class = test1></table>
     <table class = test2></table>
     <table class = goal>
       <thead>
         some some <tr> 
       </thead>
       <tbody>
         here are the table rows where I want to put the checkboxes
       </tbody>
     </table>
  </body>
</html>

The problem is that, is puts checkboxes in the rows at every "tr" what it can find in all the tables. And finally my code:

var $ = unsafeWindow.jQuery

$(document).ready(function (){
  $("table.goal").ready(function(){
    $("tbody").ready(function(){
      $("tr").prepend('<td><input type="checkbox" name="x" value="y"></td>');
    });
  });
});

Please, someone would be so kind to explain me, why this isn't working as intended? Thanks in advance.

Arun P Johny · Accepted Answer · 2013-10-07 10:02:25Z

1

There is no need to use table.ready/tbody.ready, you have to use descendant-selector

$(document).ready(function () {
    $("table.goal tbody tr").prepend('<td><input type="checkbox" name="x" value="y"></td>');
});

Demo: Fiddle

Note: If the rows are created dynamically, then the dom manipulation need to be executed after the tr's are created

answered Oct 7, 2013 at 10:02

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

Rohan Kumar · Accepted Answer · 2013-10-07 10:02:54Z

0

Try this,

$(document).ready(function (){
    $("table.goal tbody tr").each(function(){
       //check if a checkbox is already added or not
       if($(this).find('td:eq(0) > input[type="checkbox"]').length)
       {
          $(this).prepend('<td><input type="checkbox" name="x" value="y"></td>');
       }
    })
});

answered Oct 7, 2013 at 10:02

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Comments

netchkin · Accepted Answer · 2013-10-07 10:07:16Z

0

try

$("tbody tr").prepend('<td><input type="checkbox" name="x" value="y"></td>');

It should omit the thead.

answered Oct 7, 2013 at 10:07

netchkin

1,3941 gold badge12 silver badges22 bronze badges

Comments

Nibin · Accepted Answer · 2013-10-07 10:12:22Z

0

Hope this might help you... :)  

    $(.goal tr).prepend('<td><input type="checkbox" name="x" value="y"></td>');

answered Oct 7, 2013 at 10:12

Nibin

3,9602 gold badges22 silver badges40 bronze badges

Comments

zapcost · Accepted Answer · 2013-10-07 10:14:29Z

0

function AddCheckboxToTable($table) {
    var $thead = $table.find('> thead');
    var $tbody = $table.find('> tbody');

    $thead.find('> tr').prepend('<th>Checkbox</th>');
    $tbody.find('> tr').each(function(index, element) {
        var $tr = $(element);
        $tr.prepend('<td><input type="checkbox" name="checkbox" value="'+index+'">   </td>');
    });
};

$(function() {
    AddCheckboxToTable($('table.goal'));
});

See this fiddle : http://jsfiddle.net/dYAkJ/

answered Oct 7, 2013 at 10:14

zapcost

1,39612 silver badges5 bronze badges

Collectives™ on Stack Overflow

jQuery - adding checkboxes in a specific table

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related