Column rowspan using jquery - php

Question

I have a table with a double click event on every each of the rows. When I double click on any row, it will display another row called ".matching". Besides that, I also want to create a column rowspan if a hidden ".matching" row is displayed. Below shows my php part:
<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>
And this is my jquery:
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');
}
}
The problem with this code, when i double click on any row, it creates the rowspan on another row. Or in another word, it create all rowspan to all of the rows in the table.
How to add particular column rowspan to that particular double click row event?

Answer 1

Try this, You should find lastcolumn of clicked row
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');
}
}