Question

从json数据我试图在html表中显示值，但它没有做同样的事情。我无法识别错误。我已按以下方式使用，但我无法找到答案：

<html>
<head>
<title>Check</title>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script>
function getRow(begin,phrase,buggy,words,negative,comma,loos,leng) {


jQuery('#donut').empty();

jQuery(document).ready(function () {
var nb = begin;
var bp = phrase;
var bw = buggy;
var uw = words;
var nt = negative;
var punc = comma;
var loose = loos;
Morris.Donut({
  element: 'donut',
  data: [
    {value: nb, label: 'Should not begin'},
    {value: bp, label: 'Buggy phrase'},
    {value: bw, label: 'Buggy word'},
    {value: uw, label: 'Useless word'},
    {value: nt, label: 'Negative term'},
    {value: punc, label: 'Punctuation mistake'},
    {value: loose, label: 'Loose sentence'},
    {value: 0, label: 'Tense'}
  ],
  formatter: function (x) { return x + "%"}
}).on('click', function(i, row){
  console.log(i, row);
});
});
} 
</script>

<script>

jQuery(document).ready(function () {

var tab1 = "";
var posts = [{"begin": 0, "loose": 1, "leng": 8, "buggy": 0, "negative": 1, "nam": "10.Conclusion and future ", "comma": 5, "words": 1, "date": "2017-04-03 16:08:40", "phrase": 0}, {"begin": 0, "loose": 1, "leng": 11, "buggy": 5, "negative": 1, "nam": "8.Chapter 5.docx", "comma": 5, "words": 0, "date": "2017-04-03 16:06:49", "phrase": 0}, {"begin": 10, "loose": 6, "leng": 280, "buggy": 16, "negative": 12, "nam": "7.Chapter 4.docx", "comma": 194, "words": 2, "date": "2017-04-03 12:11:23", "phrase": 0}, {"begin": 1, "loose": 2, "leng": 20, "buggy": 5, "negative": 6, "nam": "eunoia", "comma": 4, "words": 3, "date": "2016-12-20 12:33:40", "phrase": 4}];


jQuery(posts).each(function(i,f){
alert(f.leng);
   var dt = f.date.split(" ");
   var tblRow = "<tr role=\"row\">" + "<td onclick=\"getRow(" +f.begin,f.phrase,f.buggy,f.words,f.negative,f.comma,f.loose,f.leng+")\">" + f.nam +"<td>" + dt[0] + "</td>" + "<td>" + dt[1] + "</td>" + "</tr>";
       tab1 += tblRow;


     });     
            jQuery(tab1).appendTo("#example tbody");

});
</script>
</head>


<body>

            <table id="example" style="width: 100%; border: 1px solid black">
                <thead>
                    <tr role="row">
                        <th rowspan="1" colspan="1" style="width: 150px;">File Name</th>
                        <th rowspan="1" colspan="1" style="width: 109px;">Date</th>
                        <th rowspan="1" colspan="1" style="width: 82px;">Time</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

</body>
</html>

从json数据我试图在html表中显示值，但它没有做同样的事情。我无法识别错误。

Answer 1

我应该写一个错误

＆＃34; td onclick = \＆＃34; getRow（＆＃34; + f.begin +＆＃34;，＆＃34; + f.phrase +＆＃34;，＆＃34; + f.buggy +＆＃34;＆＃34 + + f.words＆＃34;＆＃34 + + f.negative＆＃34;＆＃34 + + f.comma＆＃34; ＆＃34 + + f.loose＆＃34;＆＃34 + + f.leng＆＃34）\＆＃34;＆GT;

这里也应该作为字符串进行处理。

Answer 2

您可以添加如下所示的表格行，

function table_element(posts) {
for (i = 0; i < posts.length; i++) {        
  if (i % 2 == 0) {
    var t1= "<tr class=\"even\" role=\"row\">" + "<td onclick=\"getRow("  + posts[i].begin, posts[i].leng + ")\" >" + "</td>" + "<td class=\"\">" + posts[i].nam + "</td>" + "<td class=\"\">" + posts[i].words + "</td>" + "<td class=\"sorting_1\">" + posts[i].date.split(" ")[0] + "</td>" + "<td>" + posts[i].date.split(" ")[1] + "</td>" + "</tr>"
    $("#example1").append(t1);
  } else {
    var t2 = "<tr class=\"odd\" role=\"row\">"+"<td onclick=\"getRow("+posts[i].begin, posts[i].leng+")\">"+"</td>"+"<td class=\"\">" +posts[i].nam+"</td>"+"<td class=\"\">" +posts[i].words+"</td>"+"<td class=\"sorting_1\">" +posts[i].date.split(" ")[0]+"</td>"+"<td>"+posts[i].date.split(" ")[1]+"</td>"+"</tr>"
    $("#example1").append(t2);
 }
 }   
}

如何使用脚本在表体中追加行

2 个答案: