Generate HTML table with jquery
ss
by AnthraxisBR
HTML
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<table class='table'>
</table>
CSS
.table {
border: 1px solid #000;
}
.table tr {
border: 1px solid #000;
}
.table tr td {
cursor:pointer;
border: 1px solid #000;
}
.table tr td:hover {
background-color:#ccc;
}
.here{
background-color:#999;
}
JavaScript
var arr = [
[ 'A1', 'A2','A3','A4','A5','A6','A7','A8','A9','A10'],
[ 'B1', 'B2','B3','B4','B5','B6','B7','B8','B9','B10'],
[ 'C1', 'C2','C3','C4','C5','C6','C7','C8','C9','C10']
];
$.each(arr, function( index_tr, value_tr ) {
$('.table').append('<tr class="'+index_tr+'"><tr>');
$.each(value_tr, function( index_td,value_td) {
$('.'+index_tr).append('<td>'+value_td+'</td>');
console.log(value_td);
});
});
$(document).on('click','td',function(){
$('td').removeClass('here');
$(this).addClass('here');
});