CSDNRGY 2015-08-01 06:15 采纳率: 87.5%
浏览 2131
已采纳

如何把页面Table的值传到jQuery里?

 <!doctype html>
<html>
    <head>
        <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
        <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
        <script type="text/javascript">
            $(function (){
                $('#container').highcharts({
                    title: {
                        text: '?',
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {

                        title: {
                            text: '数据'
                        },
                    },
                    series: [{
                        name: '?',
                        data: []
                    }]
                });
            });
        </script>
        <script type="text/javascript">
            $(function () {
                $('#container2').highcharts({
                    title: {
                        text: '链球菌毒素O',
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {

                        title: {
                            text: '数据'
                        },
                    },
                    series: [{
                        name: 'SBASO',
                        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    }]
                });
            });
        </script>
    </head>
    <body>
        <h1>曲线图</h1>
        <!-- 第一个空图 -->
        <div id="container" style="width:300px;height:300px;float:left;"></div>
        <!-- 第二个有数据的图 -->
        <div id="container2" style="width:300px;height:300px;float:left;"></div>
        <table border="1" align="left">
            <tr>
                <td>CName</td>
                <td>EName</td>
                <td>Time</td>
                <td>Date</td>               
            </tr>
            <tr>
                <td>血小板</td>
                <td>HPLT</td>
                <td>1</td>
                <td>7.0</td>                
            </tr>
            <tr>
                <td>血小板</td>
                <td>HPLT</td>
                <td>2</td>
                <td>6.9</td>                
            </tr>
            <tr>
                <td>血小板</td>
                <td>HPLT</td>
                <td>3</td>
                <td>9.5</td>                
            </tr>
        </table>
    </body>
</html>

大神们!直接把源码粘上就可以运行

  • 写回答

3条回答 默认 最新

  • danielinbiti 2015-08-01 09:32
    关注
     <!doctype html>
    <html>
        <head>
            <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
            <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
            <script type="text/javascript">
                   var chart ;
                $(function (){
                    chart = new Highcharts.Chart({
                        chart: {  
                            renderTo: 'container'
                        },
                        title: {
                            text: '?',
                        },
                        xAxis: {
                            categories: []
                        },
                        yAxis: {
                            title: {
                                text: '数据'
                            },
                        },
                        series: []
                    });
                });
                function show(){
                    var trs = $('table tr');
                    var datas=[];
                    var map={};
                    for(var i=1;i<trs.length;i++){
                         var nams = $('td:first',trs[i]).html();
                         var value = $('td:last',trs[i]).html();
                         if(typeof map[nams]=='undefined'){
                              var pos = datas.length;
                              map[nams] = pos;
                              datas[pos]={name:nams,data:[]};
                         }
                         datas[map[nams]]["data"].push(Number(value));
                    }
                    var series=chart.series;  
                    if(series.length > 0){
                       series[0].remove(false); 
                  }
                  var d = datas[0];
                  chart.addSeries(d);
                  chart.setTitle({text:d.name});
                  chart.redraw();
                }
            </script>
            <script type="text/javascript">
                $(function () {
                    new Highcharts.Chart({
                          chart: {  
                            renderTo: 'container2'
                        },
                        title: {
                            text: '链球菌毒素O',
                        },
                        xAxis: {
                            categories: []
                        },
                        yAxis: {
    
                            title: {
                                text: '数据'
                            },
                        },
                        series: [{
                            name: 'SBASO',
                            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                        }]
                    });
                });
            </script>
        </head>
        <body>
              <input type='button' onclick='show()' value='显示表格数据'/>
            <h1>曲线图</h1>
            <!-- 第一个空图 -->
            <div id="container" style="width:300px;height:300px;float:left;"></div>
            <!-- 第二个有数据的图 -->
            <div id="container2" style="width:300px;height:300px;float:left;"></div>
            <table border="1" align="left">
                <tr>
                    <td>CName</td>
                    <td>EName</td>
                    <td>Time</td>
                    <td>Date</td>               
                </tr>
                <tr>
                    <td>血小板</td>
                    <td>HPLT</td>
                    <td>1</td>
                    <td>7.0</td>                
                </tr>
                <tr>
                    <td>血小板</td>
                    <td>HPLT</td>
                    <td>2</td>
                    <td>6.9</td>                
                </tr>
                <tr>
                    <td>血小板</td>
                    <td>HPLT</td>
                    <td>3</td>
                    <td>9.5</td>                
                </tr>
            </table>
        </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?