pokatomnik/table-row-pushing.html

## table-row-pushing.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            *, html, body {
                margin: 0px;
                padding: 0px;
            }
            table {
                border-collapse: collapse;
            }
            table td {
                border : 1px solid black;
            }
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var addButton =
                    document.getElementById('add');
                var removeButton =
                    document.getElementById('remove');
                var tableTbody = document.querySelector('table > tbody');

                var columnsCount = ((tableTbody.querySelector('tr') === null)
                    || (tableTbody.querySelector('tr > td') === null))
                        ? 3
                        : tableTbody.querySelector('tr').childElementCount;

                function generateRandomString(len) {
                    function randomInt(min, max) {
                      return Math.floor(Math.random() * (max - min + 1)) + min;
                    }

                    var alphabet = 'qwertyuiopasdfghjklzxcvbnm';
                    alphabet += alphabet.toUpperCase();
                    alphabet += '1234567890';
                    var result = '';
                    for (var i=0; i<len; i++) {
                        result += alphabet[randomInt(0, alphabet.length)];
                    }
                    return result;
                }

                addButton.addEventListener('click', function () {
                    var html = '<tr>';
                    for (var i=0; i<columnsCount; i++) {
                        html += '<td>';
                        html += generateRandomString(10);
                        html += '</td>';
                    }
                    html += '</tr>';
                    tableTbody.innerHTML += html;
                });

                removeButton.addEventListener('click', function () {
                    tableTbody.children[tableTbody.childElementCount-1].remove
                        ? tableTbody.children[tableTbody.childElementCount-1].remove()
                        // Small IE11 fix:
                        : tableTbody.children[tableTbody.childElementCount-1].removeNode();
                });

            });
        </script>
    </head>
    <body>
        <button id="add">Add</button>
        <button id="remove">Remove</button>
        <table> <!-- Script support any table with tr tag or without it -->
            <tbody>
                <tr>
                    <td>
                        asd
                    </td>
                    <td>
                        dsa
                    </td>
                    <td>
                        qwe
                    </td>
                    <td>
                        ewq
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<style>
	*, html, body {
	margin: 0px;
	padding: 0px;
	}
	table {
	border-collapse: collapse;
	}
	table td {
	border : 1px solid black;
	}
	</style>
	<script>
	document.addEventListener('DOMContentLoaded', function () {
	var addButton =
	document.getElementById('add');
	var removeButton =
	document.getElementById('remove');
	var tableTbody = document.querySelector('table > tbody');

	var columnsCount = ((tableTbody.querySelector('tr') === null)
	\|\| (tableTbody.querySelector('tr > td') === null))
	? 3
	: tableTbody.querySelector('tr').childElementCount;

	function generateRandomString(len) {
	function randomInt(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	var alphabet = 'qwertyuiopasdfghjklzxcvbnm';
	alphabet += alphabet.toUpperCase();
	alphabet += '1234567890';
	var result = '';
	for (var i=0; i<len; i++) {
	result += alphabet[randomInt(0, alphabet.length)];
	}
	return result;
	}

	addButton.addEventListener('click', function () {
	var html = '<tr>';
	for (var i=0; i<columnsCount; i++) {
	html += '<td>';
	html += generateRandomString(10);
	html += '</td>';
	}
	html += '</tr>';
	tableTbody.innerHTML += html;
	});

	removeButton.addEventListener('click', function () {
	tableTbody.children[tableTbody.childElementCount-1].remove
	? tableTbody.children[tableTbody.childElementCount-1].remove()
	// Small IE11 fix:
	: tableTbody.children[tableTbody.childElementCount-1].removeNode();
	});

	});
	</script>
	</head>
	<body>
	<button id="add">Add</button>
	<button id="remove">Remove</button>
	<table> <!-- Script support any table with tr tag or without it -->
	<tbody>
	<tr>
	<td>
	asd
	</td>
	<td>
	dsa
	</td>
	<td>
	qwe
	</td>
	<td>
	ewq
	</td>
	</tr>
	</tbody>
	</table>
	</body>
	</html>