2 l350172123 l350172123 于 2016.09.06 15:42 提问

把json数组的数据引入table中

![![图片说明](http://img.ask.csdn.net/upload/201609/06/1473147736_902259.png)图片说明](http://img.ask.csdn.net/upload/201609/06/1473147728_688309.png)图片说明
如图,麻烦帮忙解答,谢谢

4个回答

qq_15434587
qq_15434587   2016.09.06 16:02
已采纳

你用jquery动态添加到table里边--
1、清除已添加的数据
2、追加当前选中的左侧对应的右侧表格数据
代码例子:

$(".divdate").remove();
$.each(TimeData[这里写你当前点击的帮和制药的id值].realdata,function(i,v){
var str = "

"
+""+v.Time+""
+""+v.pressure+""
+""+v.flow+""
+""+v.chlorine+""
+"";
$("#real").append(str);
})
qq_15434587
qq_15434587 $是 jquery,你们的项目应用jquery了吗
大约一年之前 回复
l350172123
l350172123 回复摇摆Maori: object.html:57 Uncaught ReferenceError: $ is not defined 报错这个了额
大约一年之前 回复
qq_15434587
qq_15434587 这会一直在
大约一年之前 回复
l350172123
l350172123 哦哦,谢谢,如果有不懂的,我可以私信你吗?
大约一年之前 回复
qq_15434587
qq_15434587 tr标签里边添加个 class=“divdata”,这样$(".divdate").remove();就会把以前的数据清掉
大约一年之前 回复
qq_15434587
qq_15434587   2016.09.06 15:47

用 json对象操作,数组一个元素是一行数据,里边的key:value对应就可以了,想具体,就把例子发过来我给你写

l350172123
l350172123 下边我补了2张图,谢谢
大约一年之前 回复
l350172123
l350172123   2016.09.06 15:48

图片说明
图片说明

qq_15434587
qq_15434587   2016.09.06 17:52

把下边的复制过去,引入jquery的包就能运行

 <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <script type="text/javascript" src="H:\jquery.min.js"></script>
 <body>

    <table id="tablel">
        <tr>
            <td>时间</td>
            <td>压力</td>
            <td>流量</td>
            <td>余氯</td>
        </tr>
    </table>
 </body>
</html>
<script type="text/javascript">
//你的数据
var Timedata=[{id:"1",company:"帮和制药",realdata:[{Time:"01:00:00",Pressure:"330",Flow:"120-帮和制药","Chlorine":"0.40"}]},
              {id:"1",company:"aa制药",realdata:[{Time:"01:00:00",Pressure:"330",Flow:"120-aa制药","Chlorine":"0.40"}]}
             ];

//切换显示表格内容
$.each(Timedata,function(i,v){
    $("body").prepend("<input type='button' value="+v.company+" index='"+i+"' onclick='tableTab("+i+")'/>")
})
function tableTab(i){
    $(".trd").remove();
    $.each(Timedata[i].realdata,function(i,v){
        $("#tablel").append("<tr class='trd'>"
            +"<td>"+v.Time+"</td>"
            +"<td>"+v.Pressure+"</td>"
            +"<td>"+v.Flow+"</td>"
            +"<td>"+v.Chlorine+"</td>"
        +"</tr>")
    })
}
</script>

图片说明

Csdn user default icon
上传中...
上传图片
插入图片