json数据:var data=[{"a":"1","b":"2","c":"3"},{"a":"4","b":"5","c":"6","}]；
怎么在html中输出
<tr><td id="a"></td><td id="b"></td><td id="c"></td></tr>
<tr><td id="a"></td><td id="b"></td><td id="c"></td></tr>
上面输出123 下面输出456
在JS中将JSON的字符串解析成JSON数据格式，一般有两种方式：
1.一种为使用eval()函数。
2. 使用Function对象来进行返回解析。
用eval函数来解析，并且使用jquery的each方法来遍历
用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器 返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。
这里首先给出JSON字符串集，字符串集如下：
var data="
{
root:
[
{name:'1',value:'0'},
{name:'6101',value:'北京市'},
{name:'6102',value:'天津市'},
{name:'6103',value:'上海市'},
{name:'6104',value:'重庆市'},
{name:'6105',value:'渭南市'},
{name:'6106',value:'延安市'},
{name:'6107',value:'汉中市'},
{name:'6108',value:'榆林市'},
{name:'6109',value:'安康市'},
{name:'6110',value:'商洛市'}
]
}";
var dataObj=eval("("+data+")");//转换为json对象
alert(dataObj.root.length+"个对象");
for(var i=0;i<dataObj.root.length;i++){
var obj=dataObj.root[i];
alert(obj.Name+"--"+obj.value);
}
由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语 句（statement）来执行。
第二种解析方式就是使用Function对象来完成，它的典型应用就是在JQUERY中的AJAX方法下的success等对于返回数据data的解析
var json='{"name":"CJ","age":18}';data =(new Function("","return "+json))();
此时的data就是一个会解析成一个 json对象了.
温馨提示：答案为网友推荐，仅供参考
第1个回答 推荐于2018-02-27
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr id="tr_0">
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
</tr>
<tr id="tr_1">
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
</tr>
<tr id="tr_2">
<td class="a">f</td>
<td class="b">f</td>
<td class="c">f</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript" language="JavaScript">
var data = [{"a":"1","b":"2","c":"3"},{"a":"4","b":"5","c":"6"}],
i = 0,
len = data.length;
for(; i < len; i++) {
var d = data[i],
id = 'tr_' + i,
$tr = document.getElementById(id);
for(var k in d) {
$tr.getElementsByClassName(k)[0].innerHTML = d[k];
}
}
</script>
</html>
document.getElementsByClassName=function(cls){
var els=this.getElementsByTagName('*');
var ell=els.length;
var elements=[];
for(var n=0;n<ell;n++){
var oCls=els[n].className||'';
if(oCls.indexOf(cls)<0) {
continue;
} oCls=oCls.split(/\s+/);
var oCll=oCls.length;
for(var j=0;j<oCll;j++){
if(cls==oCls[j]){
elements.push(els[n]);
break;
}
}
}
return elements;
}//兼容ie8-不支持getElementsByClassName方法本回答被提问者和网友采纳
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr id="tr_0">
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
</tr>
<tr id="tr_1">
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
</tr>
<tr id="tr_2">
<td class="a">f</td>
<td class="b">f</td>
<td class="c">f</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript" language="JavaScript">
var data = [{"a":"1","b":"2","c":"3"},{"a":"4","b":"5","c":"6"}],
i = 0,
len = data.length;
for(; i < len; i++) {
var d = data[i],
id = 'tr_' + i,
$tr = document.getElementById(id);
for(var k in d) {
$tr.getElementsByClassName(k)[0].innerHTML = d[k];
}
}
</script>
</html>
如需要兼容IE8-版本，附加下面这段代码就行
if(!document.getElementsByClassName) {document.getElementsByClassName=function(cls){
var els=this.getElementsByTagName('*');
var ell=els.length;
var elements=[];
for(var n=0;n<ell;n++){
var oCls=els[n].className||'';
if(oCls.indexOf(cls)<0) {
continue;
} oCls=oCls.split(/\s+/);
var oCll=oCls.length;
for(var j=0;j<oCll;j++){
if(cls==oCls[j]){
elements.push(els[n]);
break;
}
}
}
return elements;
}//兼容ie8-不支持getElementsByClassName方法本回答被提问者和网友采纳
第2个回答 2015-06-04
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
var data=[{"a":"1","b":"2","c":"3"},{"a":"4","b":"5","c":"6"}];
var createEl = function(tag,id,text,parent){
var el = document.createElement(tag);
id && el.setAttribute('id',id);
text && el.appendChild(document.createTextNode(text));
parent && parent.appendChild(el);
return el;
};
var tb = createEl('tbody',null,null,createEl('table',null,null,document.body));
for(var i=0,len=data.length;i<len;i++){
(function(item){
var tr = createEl('tr',null,null,tb);
for(var name in item){
createEl('td',name,item[name],tr);
};
})(data[i]);
};
};
</script>
</head>
<body>
</body>
</html>追问
var data=[{"a":"1","b":"2","c":"3"},{"a":"4","b":"5","c":"6"}];
for(var i=0,len=data.length;i<len;i++){
(function(item){
var row = '';
for(var name in item){
row+=item[name];
};
document.body.appendChild(document.createTextNode(row));
document.body.appendChild(document.createElement('br'));
})(data[i]);
};
};
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
var data=[{"a":"1","b":"2","c":"3"},{"a":"4","b":"5","c":"6"}];
var createEl = function(tag,id,text,parent){
var el = document.createElement(tag);
id && el.setAttribute('id',id);
text && el.appendChild(document.createTextNode(text));
parent && parent.appendChild(el);
return el;
};
var tb = createEl('tbody',null,null,createEl('table',null,null,document.body));
for(var i=0,len=data.length;i<len;i++){
(function(item){
var tr = createEl('tr',null,null,tb);
for(var name in item){
createEl('td',name,item[name],tr);
};
})(data[i]);
};
};
</script>
</head>
<body>
</body>
</html>追问
谢谢你的回答 html的内容不用改 怎么直接把td里面的值输出出来
追答 window.onload = function(){var data=[{"a":"1","b":"2","c":"3"},{"a":"4","b":"5","c":"6"}];
for(var i=0,len=data.length;i<len;i++){
(function(item){
var row = '';
for(var name in item){
row+=item[name];
};
document.body.appendChild(document.createTextNode(row));
document.body.appendChild(document.createElement('br'));
})(data[i]);
};
};
第3个回答 2018-12-12
var data = [{ "a": "1", "b": "2", "c": "3" }, { "a": "4", "b": "5", "c": "6" }];
if (data.length > 0) {
var html = "";
for (var i = 0; i < data.length; i++) {
var item = data[i];
html += "<tr><td>" + item.a + "</td><td>" + item.b + "</td><td>" + item.c + "</td></tr>";
}
$("table").html(html);
}
if (data.length > 0) {
var html = "";
for (var i = 0; i < data.length; i++) {
var item = data[i];
html += "<tr><td>" + item.a + "</td><td>" + item.b + "</td><td>" + item.c + "</td></tr>";
}
$("table").html(html);
}
