Dynamic Table Creation

also copy cell text on button click

by Chance Nursey-Bush

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<input id="numOfLoops" type="number" placeholder="Enter a number here" />
<button id="mybutton" style="display:none">Click</button>
<div id="dynamictable"></div>
<textarea></textarea>

CSS

table {
    background: #CCC;
    border: 1px solid #000;
}

table td {
    padding: 15px;
    border: 1px solid #DDD;
}

JavaScript

$(document).ready(function() {
    $('#dynamictable').on("click", "button", function() {
        console.log('clicked copy');
    });
    $('#numOfLoops').on("keyup", function() {
        $('#mybutton').show();
    });
});

document.getElementById("mybutton").addEventListener("click", populateTable);

function populateTable() {
    var count = document.getElementById("numOfLoops").value;

    var x = [];
    x[x.length] = "<table id='mytable'>";
    for (; --count >= 0;) {
        x[x.length] = "<tr><td>Return Value " + count + "</td><td><button name='btnCopy'>Copy</button></td></tr>";
    }
    x[x.length] = "</table>";
    var mydiv = document.getElementById("dynamictable");
    mydiv.innerHTML = x.join("");
}

/*$('#mytable tr').on("click", "td", function() {
        //alert($(this).html());
		$(this).select();
		
		try {
			var successful = document.execCommand('copy');
			var msg = successful ? 'successful' : 'unsuccessful';
			console.log('Copying text command was ' + msg);
		} catch (err) {
			console.log('Oops, unable to copy');
		}
    });*/