Use javascript to split a table into two based on row position

Question

I want to split a table into two tables based on row position. I have a way to find the row position of the table. Now my requirement is to split the table into two tables using only javascript.

We need more: show the code you already have, and what you tried yet. Do not hesitate to use a [jsfiddle](http://jsfiddle.net/). — sp00m, Dec 19 '12 at 09:44
http://stackoverflow.com/questions/1763479/how-to-get-the-html-for-a-dom-element-in-javascript — Dmytro Zarezenko, Mar 27 '13 at 17:10

HopeNick · Answer 1 · 2013-04-12T19:27:33.487

Hope it helps:

function splitTableIntoTwoTables(table, idx) {

    var rows = table.getElementsByTagName("tr"),
        newtable = table.cloneNode(false),
        tbody = document.createElement("tbody");

    if (table.hasAttribute("id")) {
        newtable.setAttribute("id", "splitted_"+table.getAttribute("id"));
    }

    for (var i = rows.length - 1; i > idx; i--) {
        if (tbody.childNodes) {
            tbody.insertBefore(rows[i].cloneNode(true), tbody.lastChild);
        } else {
            tbody.appendChild(rows[i].cloneNode(true));
        }
        table.deleteRow(i);
    }

    newtable.appendChild(tbody);
    var p = document.createElement("p");
    p.appendChild(document.createTextNode("=============>"));
    if (table.nextSibling) {
        table.parentNode.insertBefore(p, table.nextSibling);
    } else {
        table.parentNode.appendChild(p);
    }
    if (p.nextSibling) {
        table.parentNode.insertBefore(newtable, p.nextSibling);
    } else {
        table.parentNode.appendChild(newtable);
    }
}

score 1 · Answer 2 · answered Apr 12 '13 at 17:57

1

Please, try my variant. Works for tables with or without tbodies. It takes a table and an index of row, after which it is to be divided.

function split(table, index){
    var temp, clone = table.cloneNode(false),
        trs = table.getElementsByTagName('tr'),
        tbodies = table.getElementsByTagName('tbody');
    if (++index>=trs.length) return;
    if (clone.id) clone.id+='-clone';
    while (index>0) {
        if(tbodies[0] && (temp = tbodies[0].getElementsByTagName('tr').length) <= index) {
            index -= temp;
            clone.appendChild(tbodies[0]);
        } else {
            temp|0 && (temp = tbodies[0] ? clone.appendChild(tbodies[0].cloneNode(false)) : clone);
            temp.appendChild(trs[0]);
            index--;
        }
    }
    table.parentNode.insertBefore(clone, table);
};

answered Apr 12 '13 at 17:57

Aleko

960
1
9
10

It's very good that you use getElementsByTagName(), because it is really much faster than querySelectorAll()! Why do you place the clone above the original? I.m.h.o. prepending string like "prefix"+string is always faster with less memory comsumption than appending like string+='postfix' (see StringBuffer in Java). I also think that having is always good. Btw. your variant results in clone with TWO s in MSIE 10 at least ;) (I've tested with table that has and headers). So, at this time we both have a chance to write a really good one splitting function ;) – HopeNick Apr 12 '13 at 19:17
I place clone on above because it is faster to transfer first rows than last rows. – Aleko Apr 13 '13 at 11:14
`temp|0 && (temp =` - Cool enough, ha? Test if temp is element – Aleko Apr 13 '13 at 11:16
Yes, this is an interesting approach. But I can't give you + to karma until your function will produce the valid HTML in MSIE ;) – HopeNick Apr 15 '13 at 08:31

Use javascript to split a table into two based on row position

2 Answers2