Question

我坚持使用我的小jQuery脚本。我想为特定表的行创建复选框。这将是一个greasemonkey脚本，因此我无法编辑该站点的源代码。

这就是HTML的设置方式：

<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>

问题在于，将复选框放在每个“tr”的行中，它可以在所有表中找到它。最后我的代码：

var $ = unsafeWindow.jQuery

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

拜托，有人会如此友善地解释我，为什么这不按预期工作？提前谢谢。

Answer 1

无需使用table.ready / tbody.ready，您必须使用descendant-selector

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

演示：Fiddle

注意：如果动态创建行，则需要在创建tr之后执行dom操作

Answer 2

试试这个，

$(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>');
       }
    })
});

Answer 3

试

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

它应该省略thead。

Answer 4

Hope this might help you... :)  

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

Answer 5

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'));
});

看到这个小提琴：http://jsfiddle.net/dYAkJ/

jQuery - 在特定表中添加复选框

5 个答案: