[jQuery] jquery json make html table
I have a table that i need to build from a json file. Here is both the
json file and the table's html. See the main goal is either get the
jquery to update the table output every 15 to 20second or just update
the table fields every 20 seconds, it doesn't need to update the icon,
host but it does need to update cur, rps and the blank field with the
scoreboard data, it would be a plus if I could tell it how many
servers and have it out the table, but i figured I would start with
the basics of just getting it to update the table from the json file.
Can anyone help me with that?
## Table.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
td,body{
font: 11px Arial, Helvetica, Sans-serif;
padding:2px;
word-wrap:break-word;
}
.rps{
font-wieght:bold;
color:#000088;
}
</style>
</head>
<body>
<table border="0" cellpadding="1" cellspacing="0" width="100%">
<tbody>
<tr>
<td valign="top">
<table border="0" cellpadding="1" cellspacing="0" width="100%">
<tbody>
<tr bgcolor="#eeeeee">
<td align="left" width="1%"></td>
<td align="right" width="3%">host</td>
<td width="2%">cur</td>
<td width="2%">rps</td>
<td width="18%"> </td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web01.example.com:8080/server-status" target="web">web01</
a></td>
<td align="center"><div id="req_web01"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web01">37</div></td>
<td><div id="str_web01"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web01" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web02.example.com:8080/server-status" target="web">web02</
a></td>
<td align="center"><div id="req_web02"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web02">37</div></td>
<td><div id="str_web02"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web02" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web03.example.com:8080/server-status" target="web">web03</
a></td>
<td align="center"><div id="req_web03"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web03">37</div></td>
<td><div id="str_web03"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web03" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web04.example.com:8080/server-status" target="web">web04</
a></td>
<td align="center"><div id="req_web04"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web04">37</div></td>
<td><div id="str_web04"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web04" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web05.example.com:8080/server-status" target="web">web05</
a></td>
<td align="center"><div id="req_web05"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web05">37</div></td>
<td><div id="str_web05"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web05" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web06.example.com:8080/server-status" target="web">web06</
a></td>
<td align="center"><div id="req_web06"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web06">37</div></td>
<td><div id="str_web06"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web06" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web07.example.com:8080/server-status" target="web">web07</
a></td>
<td align="center"><div id="req_web07"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web07">37</div></td>
<td><div id="str_web07"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web07" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web08.example.com:8080/server-status" target="web">web08</
a></td>
<td align="center"><div id="req_web08"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web08">37</div></td>
<td><div id="str_web08"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web08" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web09.example.com:8080/server-status" target="web">web09</
a></td>
<td align="center"><div id="req_web09"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web09">37</div></td>
<td><div id="str_web09"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web09" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web10.example.com:8080/server-status" target="web">web10</
a></td>
<td align="center"><div id="req_web10"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web10">37</div></td>
<td><div id="str_web10"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web10" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web11.example.com:8080/server-status" target="web">web11</
a></td>
<td align="center"><div id="req_web11"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web11">37</div></td>
<td><div id="str_web11"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web11" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web12.example.com:8080/server-status" target="web">web12</
a></td>
<td align="center"><div id="req_web12"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web12">37</div></td>
<td><div id="str_web12"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web12" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web13.example.com:8080/server-status" target="web">web13</
a></td>
<td align="center"><div id="req_web13"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web13">37</div></td>
<td><div id="str_web13"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web13" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web14.example.com:8080/server-status" target="web">web14</
a></td>
<td align="center"><div id="req_web14"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web14">37</div></td>
<td><div id="str_web14"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web14" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web15.example.com:8080/server-status" target="web">web15</
a></td>
<td align="center"><div id="req_web15"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web15">37</div></td>
<td><div id="str_web15"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web15" rel="facebox">WWh</a></font></div></td>
</tr>
<tr>
<td align="left" bgcolor="#ffffdd"><img
src="webstats.php_files/lighttpd.png" height="8" width="8"></td>
<td align="right" bgcolor="#ffffdd"><a rel="facebox"
href="http://web16.example.com:8080/server-status" target="web">web16</
a></td>
<td align="center"><div id="req_web16"><strong>3</strong></
div></td>
<td align="center"><div id="rps_web16">37</div></td>
<td><div id="str_web16"><font color="#888888"><a
target="_blank" href="http://webstatus-dev.example.com:8051/
mychart.php?svr=web16" rel="facebox">WWh</a></font></div></td>
</tr>
</tbody>
&n