は、HTMLレイアウトを作成し、JS

Question

私はいくつかのデータを持つテーブルがあるとそれを使用します。

  <table id="myTable"> 
      <thead> 
      <tr> 
       <th><h1>Name</h1></th> 
       <th><h1>Picture</h1></th> 
       <th><h1>Likes</h1></th> 
       <th><h1>Time</h1></th> 
      </tr> 
      </thead> 
      <tbody> 
        ***loop*** 
       <tr> 
        <td>{placeholder1}</td> 
        <td><img src="{placeholder2}" alt=""></td> 
        <td><a href="#">{placeholder3}</a></td> 
        <td>{placeholder4}</td> 
       </tr> 
        ***end loop*** 
      </tbody> 
     </table> 

私はPOSTリクエストにより、サーバから10分ごとにいくつかのデータを取得するJS機能を持っています。 <tr></tr>ブロックを数回繰り返す必要があります。 HTMLコードはますます複雑になり、レイアウトとプレースホルダを備えたソリューションが必要です。プレースホルダと

1. ストア<tr></tr>パターンは私のWebページに挿入するために：私は、私は必要なのです:) を検索する方向を必要としています。どのように私はjsでそれを達成することができますか？
2. データを挿入する必要がある場所をどのようにマークすることができますか？

Answer 1

オーケーあなたはこれがあなたのHTML

<table> 
    <tbody id="myTableBody"> 
    <!-- Your elements will be placed here --> 
    </tbody> 
</table> 

かもしれjQueryの、

を使用しているので、私は、コールバック関数のプロパティを追加し、あなたがそれらのいずれかで$アヤックスや$ .postを使用していると仮定しますsuccess

$.ajax({ 
    // ... your properties, 
    success: function(data) { 
    // basic template for of your "tr" 
    var trTemplate = [ 
     '<tr>', 
     '<td></td>', 
     '<td><img src="" alt=""></td>', 
     '<td><a href="#"></a></td>', 
     '<td></td>', 
     '</tr>' 
    ].join('') 

    // get the tbody elemen 
    var $myBody = $('#myTableBody') 

    // if you want to clean up the current content of $myBody, 
    // if it is not the case just remove the following line 
    $myBody.empty() 

    // assuming data is an array of elements/entities 
    data.forEach(function(element){ 
     var $tr = $(trTemplate) 

     $tr.find('td').eq(0).text(element.placeholder1) 
     $tr.find('img').attr('src', element.placeholder2) 
     $tr.find('td').eq(2).text(element.placeholder3) 
     $tr.find('td').eq(3).text(element.placeholder4) 

     $myBody.append($tr) 
    }) 

    } 
}) 

これは、あなたがそれを行うことができる方法の一例であるが、パフォーマンスのためにというように、これを改善するための多くの方法があります。参考としてのみご使用ください

Answer 2

jQueryを使用している場合は、これはかなり簡単です。要素を個別に参照できるように要素をidにする必要があります。あなたが開始すると言う：JavaScriptで

<tr id="tr-0" > 
    content... 
</tr> 

、その後..

var id = $('#tr-0').attr('id'); 
var num = parseInt(id.substring(3)); 
num++; 

$('#tr-0').after('<tr id='+num+'>content...</tr>'); 

明らかにあなたは、各行のコンテンツを取得しているが、うまくいけば、あなたはそれがないことを見ることができますどのように把握する必要があり各行にカスタムデータを入力するのは難しいでしょう。

Answer 3

jQueryを使用することはできますが、よりシンプルな方法があります。 jQueryでは、実際には不要な追加ステップを追加する必要があります。できるだけ少数のJavascriptパッケージを使用したい場合は、jQueryを参照してください。

しかし、私はLaravelプロジェクトにVue.jsを強くお勧めします。それを設定する方法についてはLaracastの指示があります。しかし、私はv-forディレクティブでVue.jsの作業セットでjsfiddleを作成しました。 Checkout the JSFiddle here.

ご不明な点がございましたら、できるだけお答えします。