Menu
I’m trying to understand the use of the map() function using multi-dimensional arrays.
Below is my attempt to create a temporary display table, but I’m having two questions.
1. Why are there a line of commas (,,,,,,,,,,) after the table display?
2. Why is the first column so much wider that the other cells?
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title> Event Binding </title>
<style>
#tbl { width: 50%; } /* border: 1px solid red; } */
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ddd;
}
th, td {
border: 1px solid black;
text-align: right;
padding: 2px;
}
tr:nth-child(even){background-color: #d2d2d2; }
</style>
</head>
<body>
<h2> Table Generation </h2>
<table id=”tbl”></table>
<script type=”text/javascript”>
var tableContents = [ [1,2,3,4,5], [6,7,8,9,10], [11,12,13,14,15], [16,17,18,19,20] ];
(function () {
function bindHandlers(){
var tbl = ”, arr = [];
for (var i=0; i<tableContents.length; i++) {
tmp = tableContents[i].map(
function mapper(elm, index){ return ‘<td>’+elm+’:’+index+'</td>’ } );
arr.push(‘<tr>’+tmp+'</tr>’);
} return arr;
}
document.getElementById(‘tbl’).innerHTML = bindHandlers()
})();
</script>
</body>
</html>