Javascript cut table to insert <div> tag

Question

I want to cut the table after tr to insert a div and open table again:

Before:

 <table> <tr onClick="cutAfter(this);"> <td>bla</td><td> 123 </td><td>Yes </td> </tr> <tr onClick="cutAfter(this);"> <td>bli</td><td> 456 </td><td>no</td> </tr> <tr onClick="cutAfter(this);"> <td>blu</td><td> 789 </td><td>hum</td> </tr> </table> 

After:

 <table> <tr onClick="cutAfter(this);"> <td>bla</td><td> 123 </td><td>Yes </td> </tr> <tr onClick="cutAfter(this);"> <td>bli</td><td> 456 </td><td>no</td> </tr> </table> <div onClick="fuse(this)">It works</div> <table> <tr onClick="cutAfter(this);"> <td>blu</td><td> 789 </td><td>hum</td> </tr> </table> 

And return to the first state when pressed. Any idea (no jQuery).

Answer 1

An easy way to do this is to use a combination of DOM manipulation methods such as insertAdjacentHTML to create a new table and appendChild to move rows to a new table:

 function cutAfter(row) { var table = row.parentNode.parentNode; if (row.nextElementSibling) { table.insertAdjacentHTML('afterend', '<table><tbody></tbody></table>'); var newTable = table.nextElementSibling.tBodies[0]; while (row.nextElementSibling) { newTable.appendChild(row.nextElementSibling); } } } 

 table { margin-bottom: 10px; } table td { border: 1px #AAA solid; } 

 <table> <tr onClick="cutAfter(this);"> <td>bla</td><td> 123 </td><td>Yes </td> </tr> <tr onClick="cutAfter(this);"> <td>bli</td><td> 456 </td><td>no</td> </tr> <tr onClick="cutAfter(this);"> <td>blu</td><td> 789 </td><td>hum</td> </tr> </table> 

Answer 2

Here is a simple example made from an HTML file (structure) and a Javascript file (behavior). The script uses node manipulation to preserve existing handlers (for example, added by other scripts). It also attaches event handlers directly using element.onxxx to make things simple, but you should replace this with your favorite event manager.

 var makeSplittable = function(table, joinText) { init(); function init() { var tBodies = table.tBodies; for (var ii = 0; ii < tBodies.length; ii++) { var rows = tBodies[ii].rows; for (var j = 0; j < rows.length; j++) { rows[j].onclick = split; // Replace with your favorite event manager } } } function split(evt) { var rowIndex = this.rowIndex; var tbody = findParent(this, "tbody"); var numRows = tbody.rows.length; if (rowIndex < numRows - 1) { var rows = []; for (var ii = rowIndex + 1; ii < numRows; ii++) { rows.push(tbody.rows[ii]); } var existingTable = findParent(this, "table"); var newTable = createTable(rows); var joiner = createJoiner(); existingTable.parentNode.insertBefore(newTable, existingTable.nextSibling); existingTable.parentNode.insertBefore(joiner, existingTable.nextSibling); } } function createTable(rows) { var table = document.createElement("table"); var tbody = document.createElement("tbody"); for (var ii = 0; ii < rows.length; ii++) { tbody.appendChild(rows[ii]); } table.appendChild(tbody); return table; } function createJoiner() { var div = document.createElement("div"); var content = document.createTextNode(joinText); div.appendChild(content); div.onclick = join; // same return div; } function join(evt) { var previousTable = this.previousSibling; var nextTable = this.nextSibling; var tbody = previousTable.tBodies[previousTable.tBodies.length - 1]; var rows = nextTable.rows; while (rows.length) { tbody.appendChild(rows[0]); } nextTable.parentNode.removeChild(nextTable); this.parentNode.removeChild(this); } function findParent(element, type) { if (!element || !type) { return null; } if (element.nodeName.toLowerCase() == type.toLowerCase()) { return element; } return findParent(element.parentNode, type); } }; makeSplittable(document.getElementById("target"), "Merge adjacent tables"); 

 table, div { margin: 5px 0; } tr:hover td { background-color: orange; } td { background-color: yellow; cursor: pointer; padding: 10px; } div { color: #0c0; cursor: pointer; } 

 <table id="target"> <tr> <td>bla</td> <td>123</td> <td>Yes</td> </tr> <tr> <td>bli</td> <td>456</td> <td>no</td> </tr> <tr> <td>blu</td> <td>789</td> <td>hum</td> </tr> </table> 

Answer 3

An opportunity, suggesting that a DIV should not be inserted after the last TR unless there was a cut, but it would be nice to see your efforts. It is also assumed that there is no <thead> or <tfoot> .

 function isTagName(element, tagName) { return element.tagName.toUpperCase() === tagName.toUpperCase(); } function getClosest(element, tagName) { var closest = null; while (element !== document && !isTagName(element, tagName)) { element = element.parentNode; } if (element !== document && isTagName(element, tagName)) { closest = element; } return closest; } function insertAfter(newNode, referenceNode) { return referenceNode.parentNode .insertBefore(newNode, referenceNode.nextSibling); } function moveAppend(list, dest, from) { var index = list.length - 1, last; for (last = from || 0; index >= last; index -= 1) { dest.appendChild(list[index]); } return dest; } document.body.addEventListener('click', function(e) { var target = e.target, tr = getClosest(target, 'tr'), newDiv, newTable, newBody, next, parent; if (tr) { if (tr.rowIndex < tr.parentNode.rows.length - 1) { newDiv = document.createElement('div'); newDiv.appendChild(document.createTextNode('It works!')); insertAfter(newDiv, getClosest(tr, 'table')); newTable = document.createElement('table'); newBody = document.createElement('tbody'); moveAppend(tr.parentNode.rows, newBody, tr.rowIndex + 1); newTable.appendChild(newBody); insertAfter(newTable, newDiv); } } else if (isTagName(target, 'div') && isTagName(target.previousElementSibling, 'table') && isTagName(target.nextElementSibling, 'table')) { next = target.nextElementSibling; moveAppend(next.tBodies[0].rows, target.previousElementSibling.tBodies[0]); parent = target.parentNode; parent.removeChild(next); parent.removeChild(target); } }, false); 

 table, td { border-style: solid; border-width: 1px; } div { background-color: yellow; } 

 <table> <tr> <td>bla</td> <td>123</td> <td>Yes</td> </tr> <tr> <td>bli</td> <td>456</td> <td>no</td> </tr> <tr> <td>blu</td> <td>789</td> <td>hum</td> </tr> </table>