In the function downward(), I attempted to remove the last row of a table and insert it as the first row, while the display() function simply generates the table.
<body>
<script>
function downward() {
var table = document.getElementsByTagName('table');
var count = table.rows.length - 1;
var currentTable = table[count];
var rows = currentTable.getElementsByTagName('tr');
var shifted = rows[count];
rows[count].parentNode.removeChild(rows[count]);
currentTable.insertBefore(rows[0]);
}
function display() {
var table = document.createElement('table');
table.setAttribute("id", "tbl");
for (var i = 0; i < 4; i++) {
var tr = document.createElement('tr');
for (var j = 0; j < 4; j++) {
var td = document.createElement('td');
var text = document.createTextNode(j+i);
td.appendChild(text);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.body.appendChild(table);
}
</script>
<input id="display" type="button" value="Display" onclick="display();" />
<input id="downward" type="button" value="downward" onclick="downward();" />
</body>