CODEWITHSUNDEEP
javascriptjqueryhtml
user3865036
user3865036

Reputation: 11

Javascript change a table cell, from the end of one row, into a table row on it's own - is this possible

Id like to change the layout of a table that I'm getting from a SharePoint site. It's not possible to change the table at the source, but I can add javascript to the page and hopefully modify it.

The problem is that the table is fixed width, and the columns are divided equally, however the last column contains a lot of text, an it makes it difficult to read when it's all squashed up into a narrow column.

What I'd like is to change this (the actual table may have more rows)

+-----+-----+-----+-----+-----+
|     |     |     |     |eeeee|
|  a  |  b  |  c  |  d  |eeeee|
|     |     |     |     |eeeee|
+-----+-----+-----+-----+-----+
|     |     |     |     |55555|
|  1  |  2  |  3  |  4  |55555|
|     |     |     |     |55555|
+-----+-----+-----+-----+-----+

To this

+-----+-----+-----+-----+
|     |     |     |     |
|  a  |  b  |  c  |  d  |
|     |     |     |     |
+-----+-----+-----+-----+
|    eeeeeeeeeeeeeee    |
+-----------------------+
|     |     |     |     |
|  1  |  2  |  3  |  4  |
|     |     |     |     |
+-----+-----+-----+-----+
|    555555555555555    |
+-----------------------+

I've tried adding extra tags using innerHTML,append/prepend but these only seem to create rows inside the last cell (it could be that I'm doing it wrong?)

Is this even possible? or will it be a case hiding the existing table, and recreating a new one ? Can anyone provide pointers to the solution ?

Thanks

Upvotes: 1

Views: 250

Answers (2)

ZiNNED
ZiNNED

Reputation: 2650

Without knowing the exact HTML structure, this is quite easily doable.

HTML:

<table>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>
    <tr>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
    </tr>
</table>

JS:

$(document).ready(function () {
    $("table tr").each(function () {
        var cell = $(this).find("td:last-of-type");
        $(this).after("<tr><td colspan='3'>" + cell.html() + "</td></tr>");
        cell.remove();
    });
});

See this FIDDLE for an example.

Upvotes: 2

techfoobar
techfoobar

Reputation: 66693

The following should do it:

var numColumns = $('table#foo tr:first td').length - 1;
$('table#foo tr').each(function() {
    $('<tr/>').append($('td:last', this).attr('colspan', numColumns)).insertAfter(this);
});

Upvotes: 0

Related Questions