js 应用，根据DIV Data 属性，生成表格，详细请看内容

Question

下面的html的片段，根据他们的属性，用脚本实现对应的要求,可用第三方类库(如jQ)
   <div data=’[{C:“中国”,”B”:20},{C: “英国”,B:30},{C:“美国”,B:40},{C:“日本”,B:50}]’ id=”chart”></div>
   
   依据data属性，生成下面并显示出来。
     <table>
           <tr><td>中国</td><td>20</td></tr> 
           <tr><td>英国</td><td>30</td></tr>
           <tr><td>美国</td><td>40</td></tr>
           <tr><td>日本</td><td>50</td></tr>
     </table>   同样 <div data=’{“中国”:”20”,“英国”,”30”,“美国”,”40”,“日本”,”50”}’ id=”chart”></div>
   
   依据data属性，生成下面并显示出来。
     <table>
           <tr><td>中国</td><td>20</td></tr> 
           <tr><td>英国</td><td>30</td></tr>
           <tr><td>美国</td><td>40</td></tr>
           <tr><td>日本</td><td>50</td></tr>
     </table>下面的改变CSS 
通过样式，控制第四行的底色为蓝色。
     <table>
           <tr><td>中国</td><td>20</td></tr> 
           <tr><td>英国</td><td>30</td></tr>
           <tr><td>美国</td><td>40</td></tr>
           <tr><td>日本</td><td>50</td></tr>
           <tr><td>德国</td><td>60</td></tr>
     </table>

Answer 1

你确定你这个data写的正确？

Answer 2

<div data='[{C:"中国","B":20},{C:"英国",B:30},{C:"美国",B:40},{C:"日本",B:50}]' id="chart"></div>
<script>    var data=document.getElementById('chart').getAttribute('data');
    data=eval('('+data+')');
    data=data.map(item=>`<tr><td>${item.C}</td><td>${item.B}</td></tr>`).join('');
    document.body.insertAdjacentHTML('beforeend',`<table>${data}</table>`);
</script>

Answer 3

我看你这个data有点乱，而且你两个div的data写的也不一样啊
我猜测应该是个JSON串，那样就可以获取data的值，然后JSON.parse()解析一下，遍历解析出来的对象，然后新建table就行了
如果确定data就是这种乱糟糟的格式的话，那只能截取字符串了（想想都恶心）

Answer 4

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script>
<div data='[{C:"中国","B":20},{C: "英国",B:30},{C:"美国",B:40},{C:"日本",B:50}]' id="chart"></div>
<div data='{"中国":"20","英国":"30","美国":"40","日本":"50"}' id="chart"></div>
<script>
    function createTable(el) {
        var data = eval('(' + el.getAttribute('data') + ')'), isArray = ({}).toString.call(data).indexOf('Array') != -1, attr,i=0;
        s = '';
        if (isArray) for (; i < data.length; i++) s += '<tr' + (i == 3 ? ' style="background:blue"' : '') + '><td>' + data[i].C + '</td><td>' + data[i].B + '</td></tr>';
        else for (attr in data) {
            s += '<tr' + (i == 3 ? ' style="background:blue"' : '') + '><td>' + attr + '</td><td>' + data[attr] + '</td></tr>'
            i++;
        }
        el.innerHTML ='<table border="1">'+ s+'</table>';
    }
    $('div[data]').each(function () { createTable(this,this.getAttribute('data')) });
</script>

Answer 5

不是已经生成表格了？如果没有生成你另外换个js的cdn，微软最近的不稳定，谷歌浏览器有些时候加载不了

Answer 6

这是json格式，取出json数据，遍历生成表格