Question

Am trying to add in <tr> elements after other <tr> elements in the table according to the rowspan of a <td> element within that specific <tr> element. Within the same function, upon clicking this button within the <td> element, the rowspan is increased by 1 each time, so it needs to increase the number of rows also. Not sure how to do this. Perhaps using slice() function somehow.

For example, say we have this table structure.

<table>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>
  </tr>
  <tr>
    <td rowspan="2">Content 4</td>
    <td colspan="2">Content 5</td>
  </tr>
  <tr>
    <td>Content 6</td>
    <td>Content 7</td>
  </tr>
</table>

So I want to be able to click a button within the <td rowspan="2">Content 4</td> element and create another <tr>, but because the rowspan already equals 2, I need another <tr> element to appear at the end of the table, cause it needs to count the current parent <tr> element as 1 in the list of <tr> children of the <table> element and the next <tr> element after that should be counted as 2, so it needs to add in a <tr> element at the end cause there are 2 rowspans in <td rowspan="2">Content 4</td>.

So basically, I need to capture all children <tr> elements starting with the parent <tr> element and increment down the <tr> element list within the <table> and count them with the rowspan, if rowspan=1 or rowspan does not exist, than it should create another <tr> element directly after the parent <tr> element of the <td> element…

$(this).parent().after('<tr></tr>');

But I’m thinking that I can’t use after() here, and should use slice() somehow, cause if the rowspan equals 2, than it needs to skip 2 <tr> elements, including the parent <tr> element, and add it after that. It needs to be totally based on the rowspan of that <td> element that is clicked so that the new <tr> elements will always be placed in the proper order.

An example of the code I’m actually using to accomplish the after() part, that needs to be changed based on the rowspan instead, is as follows:

for (var i = 0, len = maxAddSections; i < len; i++)
{
    tdHtml += '<td class="dp_add_section" colspan="1" style="display: table-cell;"><div style="opacity: 0.6;"><span class="upperframe"><span></span></span><div class="roundframe blockframe" style="text-align: center;">ADD SECTION</div><span class="lowerframe"><span></span></span></div></td>';
}
pTd.parent().after('<tr class="dp_add_tr_section">' + tdHtml + '</tr>');

pTd is the actual <td> object that is being clicked on, inside of the <td> element. So, I can grab the rowspan as follows:
pTd.attr('rowspan');
but how can I put it where it needs to go? Like is there a nextAll and calculate it based on the rowspan, but only add in the <tr> element 1 time?

BTW, I’m using maxAddSections that tells me how many <td> elements to add.

I need to change pTd.parent().after(... code ...); to add it after the rowspans from pTd.parent() which is a <tr> element and needs to count the number of rowspans and skip that many <tr> elements including the one that it is in. And that’s where it needs to add in the new <tr> element: '<tr class="dp_add_tr_section">' + tdHtml + '</tr>'

So, hopefully, this helps to clarify what I’m trying to do better.

How can I do this?

Answer 1

I added button elements inside your td and bind a click event to them.

<button class="btn">Add</button>

The event triggered to the buttons inside the td elements, will find the parent td element and retrieve the rowspan attribute. Then it will get the parent tr element and move to the rowspan - 1 following sibling tr element and will add a tr after it.

$(".btn").click(function(){
    var
        $this = $(this),
        $td = $this.parent(),
        rowspan = $td.attr("rowspan") || 1,
        $tr = $td.parent();

    for(var i=1; i<rowspan; ++i)
        $tr = $tr.next();
    $tr.after('<tr><td colspan="3">&nbsp;</td></tr>');
});

This is a working example.