table creation using 10 length

by Keval Bhatt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class='openDiv hide'>
	<table id="addPropertyValue1"></table>
	<table id="addPropertyValue2"></table>
	<table id="addPropertyValue3"></table>
	<table id="addPropertyValue4"></table>
	<table id="addPropertyValue5"></table>
</div>

CSS

.openDiv table tr td:first-child {
        font-weight: bold;
    }
    
    .openDiv table {
        width: 20%;
        float: left;
        border-right: 1px dotted;
        text-align: center;
    }

JavaScript

var n=50,getCollection ={};
for (var i=1;i<=n;i++){
getCollection['property'+i] = "test"+i

}


  var forLengthCheck = Object.keys(getCollection)
            _.each(getCollection, function(element, key) {
                if (forLengthCheck.indexOf(key) <  10) {
                    $('#addPropertyValue1').append('<tr><td>' + key + ':</td><td>' + element + '</td></tr>');
                }else if (forLengthCheck.indexOf(key) <20) {
                    $('#addPropertyValue2').append('<tr><td>' + key + ':</td><td>' + element + '</td></tr>');
                }else if (forLengthCheck.indexOf(key) < 30) {
                    $('#addPropertyValue3').append('<tr><td>' + key + ':</td><td>' + element + '</td></tr>');
                }else if (forLengthCheck.indexOf(key) < 40) {
                    $('#addPropertyValue4').append('<tr><td>' + key + ':</td><td>' + element + '</td></tr>');
                }else if (forLengthCheck.indexOf(key) < 50) {
                    $('#addPropertyValue5').append('<tr><td>' + key + ':</td><td>' + element + '</td></tr>');
                }
            })