2016-11-13 7 views
1

私は、各行ごとにダブルクリックイベントを持つテーブルを持っています。いずれかの行をダブルクリックすると、「.matching」という別の行が表示されます。それに加えて、非表示の「一致」行が表示されている場合は、列の行間を作成する必要があります。以下は私のPHPの一部を示しています。jqueryを使用した列の行スパン

<table> 
<tr ondblclick="rowdoubleclick(this);"> 
    <td>...</td> 
    <td>...</td> 
    <td class="lastcolumn">Rowspan is here</td> 
</tr> 
<tr class="matching" style="display:hidden;"> 
    <td colspan="2">Hidden row shows here</td> 
</tr> 
</table> 

をそして、これは私のjQueryのです:私は、任意の行をダブルクリックしたときに、それは別の行にROWSPANを作成し、このコードの

function rowdoubleclick(e) { 
    var tablerow = $(e).closest('tr'); 
    var rowammend = $('.lastcolumn'); 
    var matching = $(e).closest('tr').next('tr.matching'); 

    if(matching.is(":hidden")) { 
     tablerow.attr('rowspan','2').css({'border-bottom':'transparent'}); 
     matching.slideToggle("fast"); 
     rowammend.attr('rowspan','2'); 
    } 
    else { 
     tablerow.css({'border-bottom':'1px solid #939393'}); 
     matching.hide(); 
     rowammend.attr('rowspan','1'); 
    } 
} 

問題。または、別の言葉では、テーブル内のすべての行にすべての行スパンを作成します。 その特定のダブルクリック行イベントに特定の列の行スパンを追加するにはどうすればよいですか?

答えて

1

これを試してみてください、あなたはクリックされた行のlastcolumnを見つける必要があります

function rowdoubleclick(e) { 
    var tablerow = $(e).closest('tr'); 
    // here you should find from clicked row and not from each row 
    var rowammend = $(e).find('.lastcolumn'); 
    var matching = $(e).closest('tr').next('tr.matching'); 

    if(matching.is(":hidden")) { 
     tablerow.attr('rowspan','2').css({'border-bottom':'transparent'}); 
     matching.slideToggle("fast"); 
     rowammend.attr('rowspan','2'); 
    } 
    else { 
     tablerow.css({'border-bottom':'1px solid #939393'}); 
     matching.hide(); 
     rowammend.attr('rowspan','1'); 
    } 
} 
関連する問題