If I were to create an empty table in my index.html:
<body>
<table width="800" border="0" class="my-table">
<tr>
</tr>
</table>
</body>
Afterward, I would dynamically add rows and columns to my-table using the following Javascript code:
var myTable = $('.my-table');
var myArr=GET_FROM_SERVER //server returns an arry of object, myArr.length>50
for(var i=0; i<myArr.length)
myTable.append("<tr id="+i+">"
+" <td>"+myArr[i].name+"</td>"
+"<td>"+myArr[i].address+"</td>"
+"</tr>");
myArr represents an array of objects retrieved from the server, with the potential length exceeding 50.
I have successfully implemented this functionality, but now I am curious about how to add a scroll bar to the table in case there are too many rows for users to view at once.