如何使用JQuery从JSON数组动态添加数据到HTML表

时间:2011-12-13 11:45:25

标签: javascript jquery html json

我创建了一个HTML表格

<table id="top_five_table">
 <tr>
 <td> </th>
 <th>URL</th>
 <th width="90">Total Hits</th>
 <th width="380">Percentage of all Hits</th>
 </tr>

 <tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>              
</table>

这是我的json对象数组

json_object = None
json_object = {'url_name': url_name, 'total_count': entity.total,\
'url_id': url_id,
'percentage': percentage, 'facebook_count': entity.facebook_count,\
'twitter_count': entity.twitter_count, \
'buzz_count': entity.buzz_count, \
'linkedin_count': entity.linkedin_count, \
'digg_count': entity.digg_count,\
'delicious_count': entity.delicious_count,\
'reddit_count': entity.reddit_count}
json_array.append(json_object)

从java脚本中提取json对象,如下所示

var json_array = data.json_array;
var table = document.getElementById('top_five_table');
var rowCount = table.rows.length;
var colCount = table.rows[0].cells.length;

我不会使用Java脚本或JQuery动态填充我的HTML数据表,而且我对这两种技术都很新。我不知道如何动态填充表。任何人都可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

关于此的基础知识如下所示,您只需要将内容更改为数据。

    //EQ The row off the table
    var row = $("#top_five_table tr").eq(1);

var i=0;
while (i<=3){
    //EQThe col off the table
        var col = $(row).find("td").eq(i).html("content");
i++;
}