Created
July 17, 2016 17:53
-
-
Save pokatomnik/df71920ba61c8831354d97ad75af92fc to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment