У меня есть таблица HTML, и я хотел бы изменить таблицу на сетку, используя плагин jQuery JQGrid.
Как бы я это сделал?
Вот мой HTML:
<HTML>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
tableToGrid("#distTable");
});
</script>
</head>
<body>
<table id="distTable">
<thead>
<tr>
<th>Name</th>
<th>Platform</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">102803</td>
<td align="center">102803d22222222222222222222222222222222222222gs</td>
<td align="center">21587231</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">102803</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
<tr>
<td align="center">10280311111111111111111111111</td>
<td align="center">102803dgs</td>
<td align="center">215872321</td>
</tr>
</tbody>
</table>
</body>
</html>
Где и как я буду добавлять скрипт jQuery?