Question

我有一个数据表表，它也使用row details api。当我点击+和-图片时，此功能正常。

但是我想要在点击整行时显示详细信息，而不仅仅是+和-图片。

以下是代码的该部分：

$('#table tbody td img').on('click', function () {
    var nTr = this.parentNode.parentNode;
    if ( this.src.match('details_close') )
    {
        /* This row is already open - close it */
        this.src = "../images/details_open.png";
        oTable.fnClose( nTr );
    }
    else
    {
        /* Open this row */
        this.src = "../images/details_close.png";
        oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
    }
});

我尝试从代码的第一行删除img并执行this.next('img').src以及其他一些变体，但所有人都回过头来说错误说匹配函数不能用于他们。如何更改代码以便我可以单击整行而不仅仅是图像？

Answer 1

你试过这个吗？

 $('#table tbody td').on('click', function () {
   var nTr = this.parentNode.parentNode;
   if ( $('#table tbody td').src.match('details_close') )
    {
       /* This row is already open - close it */
       $('#table tbody td').src = "../images/details_open.png";
       oTable.fnClose( nTr );
    }
   else
    {
       /* Open this row */
       $('#table tbody td').src = "../images/details_close.png";
       oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
    }
} );

Answer 2

以下更改应该有效：

$('#table tbody tr').on('click', function () {
   var nTr = this,
       img=$(this).find('td img')[0];
   if (img.src.match('details_close') )
    {
       /* This row is already open - close it */
       img.src = "../images/details_open.png";
       oTable.fnClose( nTr );
    }
   else
    {
       /* Open this row */
       img.src = "../images/details_close.png";
       oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
    }
} );

您遇到.match()调用问题的最可能原因是您使用jQuery对象替换了直接节点访问，并且没有匹配方法。

JQuery On Click选择子图像

2 个答案: