2017-04-03 12 views
-1

jsonデータから、私はhtmlのテーブルに値を表示しようとしていますが、同じことをすることはできません。私は次のように使用error.I'veを認識することはできませんが、私は答えを見つけることができません:私は、HTMLのテーブル内の値を表示しようとしているJSONデータからスクリプトを使用してテーブル本体に行を追加する方法

<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> 

をが、同じことをすることができません。エラーを認識できません。私に誤りがありました

+0

'posts [i] .leng'は問題になるかもしれません - あなたが' length'でなければならない配列の項目の数を取得しようとしていると仮定します。あなたはまた、不必要な文字列の連結をたくさんやっている、例えば。文字列を '''で区切って内側の' ''をエスケープする必要がないようにすることもできます " –

+0

htmlコードを追加できますか? – Alok

+0

何を手に入れましたか?どのように動作していないのですか? –

答えて

0

をテーブルの行を追加することができますが

"TD onclickの= \" のgetRow( "+ f.begin +" と書かれている必要があり、 "+ f.phose +"、 "+ f.buggy +"、 "+ f.words +"、 "+ f.negative +"、 "+ f.comma +"、 "+ f.loose +"、 "+ f.leng + ">

ここでも、文字列として指定する必要があります。

-1

あなたは、以下のように

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); 
} 
} 
} 
+0

を詳しく説明しようとするでしょうコードスニペットが問題を解決する可能性があります。[説明を含む](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers)は本当にあなたの投稿の質を向上させるのに役立ちます。将来読者の質問に答えていることを覚えておいてください。そうした人々はあなたのコード提案の理由を知らないかもしれません。あなたのコードに説明的なコメントを詰め込まないようにしてください。これは、コードと説明の両方の可読性を低下させます! –

+0

@Rory McCrossan、あなたの説明に感謝します。彼は行を追加する方法を尋ねたので、私はコードを修正して –

+1

を与えただけです。あなたが変更したように思えるのは、 'appendTo()'から 'append()'です。前者が動作しない場合、私はなぜ後者が –

関連する問題