Question

这是我巨大的表中的2行HTML标记（由PHP生成并在之后应用Datatables）

<tr url="?page=item&id=850">

    <td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="850" class="checkbox"/>    850</td>

    <td> 9007</td>

    <td style="text-align:center">BK</td>

    <td style="text-align:center">41</td>

    <td style="text-align:center" id="qt">1</td>

    <td style="text-align:center">7</td>

    <td style="text-align:center">11</td>

    <td>09.02.2012</td>

</tr>

这是第二行

<tr url="?page=item&id=587">

   <td class="item_id"><input type="checkbox" name="checkbox[]" method="post" value="587" class="checkbox"/>    587</td>

   <td> 779-59</td>

   <td style="text-align:center">BR</td>

   <td style="text-align:center">37</td>

   <td style="text-align:center" id="qt">2</td>

   <td style="text-align:center">15</td>

   <td style="text-align:center">14</td>

   <td>08.02.2012</td>

</tr>

以下功能适用于90％的行。我真的不知道为什么这个脚本适用于示例中的第二行，但是对第一行没有任何作用。这两行几乎相同。

$("td").not('.item_id').click(function(){
    window.open ($(this).closest("tr").attr("url"));
});

您如何看待，导致此问题的原因是什么？

Answer 1

而是使用此选项将click附加tr处理程序，并忽略checkbox或其包含的单元格。试试这个。

$("tr").click(function(){
    window.open($(this).attr("url"));
});

$("td.item_id").click(function(e){
    e.stopPropagation();
});

警告您还可以使用event.target检查checkbox是否不执行此操作。

$("tr").click(function(e){
    if(!$(e.target).is(':checkbox') && !$(e.target).is('.item_id')){
        window.open($(this).attr("url"));
    }
});

Answer 2

我理解这件作品：

$("td").not('.item_id').click(function(){
  ...
});

但是这篇文章可以更新以表现更好吗？

window.open ($(this).closest("tr").attr("url"));

此外，属性url是否有效？您可能希望使用数据属性来获得更可预测的体验。也许这会更好：

<tr data-url="">
  ...
</tr>

打开你的窗户就像这样：

window.open( $(this).parent().attr("data-url") );

请参阅此示例：http://jsfiddle.net/Zuhrx/

Answer 3

其工作HERE其他错误。你在ready处理程序包裹代码吗？

使整个表行与JQuery问题可链接

3 个答案: