javascript - jQuery add dynamically cell to a static cell into table -
i want create static/dynamic table. cell <th>
, first 2 columns <td>
of row static. content others cells want create dynamically using jquery script.
i not know how start. data cell have saved @ json format (array) as:
{ "ex1":[["1","8","16","24"]], "ex2":[["0","100200","109f","ffffffff"]] }
html:
<table id="persondatatable" style="border: 1px #e3ffg3 solid; text-align: center;"> <tr class="bg02"> <th colspan="2">name</th> <th width="100px">sensor 1</th> <th width="100px">sensor 2</th> <th width="100px">sensor 3</th> <th width="100px">sensor 4</th> </tr> <tr id="row1"> <td class="bg02">a</td> <td class="bg02">out64h</td> <td>element[index]</td> <td>element[index+1]</td> <td>element[index+2]</td> <td>element[index+3]</td> </tr> <tr id="row2"> <td class="bg02">r</td> <td class="bg02">in128birh</td> <td>element[index]</td> <td>element[index+1]</td> <td>element[index+2]</td> <td>element[index+3]</td> </tr> </table>
static text in every <tr>
necassary because text not in json file. can ask create javascript script?
thanks
see jsfiddle: http://jsfiddle.net/9zr6z70g/3/
the jquery code way:
var data = { "ex1":[["1","8","16","24"]], "ex2":[["0","100200","109f","ffffffff"]] }; var data1 = data.ex1[0]; var data2 = data.ex2[0]; $(document).ready(function(){ var row1cells = $("#row1 td"); var row2cells = $("#row2 td"); (var index=0; index<4; index++) { $(row1cells[index+2]).html(data1[index]); $(row2cells[index+2]).html(data2[index]); } });
for multiple ex data, way:
var excount = 2; var data = { "ex1":[["1","8","16","24"]], "ex2":[["0","100200","109f","ffffffff"]] }; $(document).ready(function(){ (var index=1; index<=excount; index++) { var cells = $("#row"+index+" td"); var values = data["ex"+index][0]; (var jndex=0; jndex<4; jndex++) { $(cells[jndex+2]).html(values[jndex]); $(cells[jndex+2]).html(values[jndex]); } } });
more details multiple ex, see jsfiddle: http://jsfiddle.net/9zr6z70g/7/
Comments
Post a Comment