OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How do I dynamically insert a column of data into the middle of a html table which uses both rowspans colspans?

  • Thread starter Thread starter gee
  • Start date Start date
G

gee

Guest
I've got an existing large table that has multiple rowspans and colspans.
Ideally it would be rewritten from scratch to not use one large table, but that isn't an option right now.

By adding classes to the table when it's generated using PHP, I can easily use jquery to remove an entire coloumn not including the header and footer using, for example: $(".column3").remove();

I would then like to be able to insert a set of cells to replace the removed cells. The replaced set of cells will likely have multiple rowspans, but won't have any colspans.

A have a php script that can create a single column in the table.

I'm open to using other libraries.

I would prefer not to recreate every single row/

Example Table

This is an example of the data structure, the actual table is a lot bigger:

https://jsfiddle.net/7xf6ct4b/

Code:
    <tr>
        <th colspan="5">HEADER 1</th>
        <td>&nbsp;</td>
        <th colspan="5">HEADER 1</th>
    </tr>
    <tr>
        <td class="column1">Sub head Left</td>
        <td class="column2">Sub head 1</td>
        <td class="column3">Sub head 2</td>
        <td class="column4">Sub head 3</td>
        <td class="column5">Sub head 4</td>
        <td>&nbsp;</td>
        <td class="column6">Sub head Left</td>
        <td class="column7">Sub head 1</td>
        <td class="column8">Sub head 2</td>
        <td class="column9">Sub head 3</td>
        <td class="column10">Sub head 4</td>
    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td class="column2" rowspan="4">1st Main Column - Cell 1</td>
        <td class="column3" rowspan="15">2nd Main Column - Cell 1</td>
        <td class="column4" rowspan="6">3rd Main Column - Cell 1</td>
        <td class="column5" rowspan="4">4th Main Column - Cell 1</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>
        <td class="column7" rowspan="4">1st Main Column - Cell 1</td>
        <td class="column8" rowspan="15">2nd Main Column - Cell 1</td>
        <td class="column9" rowspan="6">3rd Main Column - Cell 1</td>
        <td class="column10" rowspan="4">4th Main Column - Cell 1</td>
    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>

    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>
    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>
    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td  class="column2" rowspan="4">1st Main Column - Cell 2</td>
        <td  class="column5" rowspan="7">4th Main Column - Cell 2</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>
        <td  class="column7" rowspan="4">1st Main Column - Cell 2</td>
        <td  class="column10" rowspan="7">4th Main Column - Cell 2</td>

    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>
    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td class="column4" rowspan="6">3rd Main Column - Cell 2</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>
        <td class="column9" rowspan="6">3rd Main Column - Cell 2</td>
    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>
    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td  class="column2" rowspan="5">1st Main Column - Cell 3</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>
        <td  class="column7" rowspan="5">1st Main Column - Cell 3</td>
    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>
    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>
    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td class="column5"  rowspan="4">4th Main Column - Cell 3</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>
        <td class="column10"  rowspan="4">4th Main Column - Cell 3</td>
    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td class="column4"  rowspan="3">3rd Main Column - Cell 3</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>
        <td class="column9"  rowspan="3">3rd Main Column - Cell 3</td>
    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td class="column2">1st Main Column - Cell 4</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>
        <td class="column7">1st Main Column - Cell 4</td>
    </tr>
    <tr>
        <td class="column1">Left Detail</td>
        <td class="column2">1st Main Column - Cell 5</td>
        <td>&nbsp;</td>
        <td class="column6">Left Detail</td>
        <td class="column7">1st Main Column - Cell 5</td>
    </tr>
    <tr>
        <td colspan="5">FOOTER</td>
        <td>&nbsp;</td>
        <td colspan="5">FOOTER</td>
    </tr>
</table>

The best I could find for solutions were of the form: $('#table > tbody > tr').eq(i-1).after(html) However thanks to the rowspans, these require you to keep a good track of what's where on the table to understand where in the row a cell should be inserted so it appears in the correct column/

I have looked at datatables, but I'm not clear if that can provide the funcionality I want now; a question in the past clarified it couldn't then.

<p>I've got an existing large table that has multiple rowspans and colspans.<br />
Ideally it would be rewritten from scratch to not use one large table, but that isn't an option right now.</p>
<p>By adding classes to the table when it's generated using PHP, I can easily use jquery to remove an entire coloumn not including the header and footer using, for example:
<code>$(".column3").remove();</code></p>
<p>I would then like to be able to insert a set of cells to replace the removed cells. The replaced set of cells will likely have multiple rowspans, but won't have any colspans.</p>
<p>A have a php script that can create a single column in the table.</p>
<p>I'm open to using other libraries.</p>
<p>I would prefer not to recreate every single row/</p>
<p><strong>Example Table</strong></p>
<p>This is an example of the data structure, the actual table is a lot bigger:</p>
<p><a href="https://jsfiddle.net/7xf6ct4b/" rel="nofollow noreferrer">https://jsfiddle.net/7xf6ct4b/</a></p>
<pre><code> <tr>
<th colspan="5">HEADER 1</th>
<td>&nbsp;</td>
<th colspan="5">HEADER 1</th>
</tr>
<tr>
<td class="column1">Sub head Left</td>
<td class="column2">Sub head 1</td>
<td class="column3">Sub head 2</td>
<td class="column4">Sub head 3</td>
<td class="column5">Sub head 4</td>
<td>&nbsp;</td>
<td class="column6">Sub head Left</td>
<td class="column7">Sub head 1</td>
<td class="column8">Sub head 2</td>
<td class="column9">Sub head 3</td>
<td class="column10">Sub head 4</td>
</tr>
<tr>
<td class="column1">Left Detail</td>
<td class="column2" rowspan="4">1st Main Column - Cell 1</td>
<td class="column3" rowspan="15">2nd Main Column - Cell 1</td>
<td class="column4" rowspan="6">3rd Main Column - Cell 1</td>
<td class="column5" rowspan="4">4th Main Column - Cell 1</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>
<td class="column7" rowspan="4">1st Main Column - Cell 1</td>
<td class="column8" rowspan="15">2nd Main Column - Cell 1</td>
<td class="column9" rowspan="6">3rd Main Column - Cell 1</td>
<td class="column10" rowspan="4">4th Main Column - Cell 1</td>
</tr>
<tr>
<td class="column1">Left Detail</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>

</tr>
<tr>
<td class="column1">Left Detail</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>
</tr>
<tr>
<td class="column1">Left Detail</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>
</tr>
<tr>
<td class="column1">Left Detail</td>
<td class="column2" rowspan="4">1st Main Column - Cell 2</td>
<td class="column5" rowspan="7">4th Main Column - Cell 2</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>
<td class="column7" rowspan="4">1st Main Column - Cell 2</td>
<td class="column10" rowspan="7">4th Main Column - Cell 2</td>

</tr>
<tr>
<td class="column1">Left Detail</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>
</tr>
<tr>
<td class="column1">Left Detail</td>
<td class="column4" rowspan="6">3rd Main Column - Cell 2</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>
<td class="column9" rowspan="6">3rd Main Column - Cell 2</td>
</tr>
<tr>
<td class="column1">Left Detail</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>
</tr>
<tr>
<td class="column1">Left Detail</td>
<td class="column2" rowspan="5">1st Main Column - Cell 3</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>
<td class="column7" rowspan="5">1st Main Column - Cell 3</td>
</tr>
<tr>
<td class="column1">Left Detail</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>
</tr>
<tr>
<td class="column1">Left Detail</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>
</tr>
<tr>
<td class="column1">Left Detail</td>
<td class="column5" rowspan="4">4th Main Column - Cell 3</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>
<td class="column10" rowspan="4">4th Main Column - Cell 3</td>
</tr>
<tr>
<td class="column1">Left Detail</td>
<td class="column4" rowspan="3">3rd Main Column - Cell 3</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>
<td class="column9" rowspan="3">3rd Main Column - Cell 3</td>
</tr>
<tr>
<td class="column1">Left Detail</td>
<td class="column2">1st Main Column - Cell 4</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>
<td class="column7">1st Main Column - Cell 4</td>
</tr>
<tr>
<td class="column1">Left Detail</td>
<td class="column2">1st Main Column - Cell 5</td>
<td>&nbsp;</td>
<td class="column6">Left Detail</td>
<td class="column7">1st Main Column - Cell 5</td>
</tr>
<tr>
<td colspan="5">FOOTER</td>
<td>&nbsp;</td>
<td colspan="5">FOOTER</td>
</tr>
</table>
</code></pre>
<p>The best I could find for solutions were of the form:
<code>$('#table > tbody > tr').eq(i-1).after(html)</code>
However thanks to the rowspans, these require you to keep a good track of what's where on the table to understand where in the row a cell should be inserted so it appears in the correct column/</p>
<p>I have looked at datatables, but I'm not clear if that can provide the funcionality I want now; a question in the past clarified it couldn't then.</p>
 
Top