如何將值動態插入表中？

Question

如何在表中動態插入值。

以下是我的桌子的鏈接

https://ibb.co/mUMOrQ

下面是我的表代碼

   <div class="table-title">
                <h3>CUF Table</h3>
                </div>
                <table class="table-fill" id="tabid">
                <thead>
            </div>

    <div class="modal-body">
        <tr>
        <th class="text-left">TimeStamp</th>
        <th class="text-left">CUF</th>
        </tr>
        </thead>
        <tbody class="table-hover">
        <!--tr>
        <td class="text-left">January</td>
        <td class="text-left">$ 50,000.00</td>
        </tr-->
        </tbody>
        </table>
    </div>

     <div class="modal-footer">
                <div class="btn-group">
                    <button id="change-chart"  class="btn btn-primary"><span class="glyphicon glyphicon-check"></span>Save</button>
                  </div>
      </div>

以下是我在表格內插入值的JavaScript代碼

     function drawTable(data){
var arr1 = data;
var table = document.getElementById("tabid");
    var dataArray = [];
    for(i=0;i<arr1.length;i++) {
        var implicitArray = [];
        implicitArray.push(arr1[i].timestamp);
        implicitArray.push(arr1[i].cuf);
        dataArray.push(implicitArray);
    }   
var row = table.insertRow(0);
var cell1 = row.insertCell(dataArray);
var cell2 = row.insertCell(dataArray);  
}

以下是如何將數據發送到javascript函數

 [{"timestamp":"2017-02-14 08:00:00","cuf":0.055777588813303},{"timestamp":"2017-02-14 09:00:00","cuf":0.045343600403124}]

如何在td標簽中將時間分配給一行，並將cuf分配給另一行？

Answer 1

 function drawTable(data){ obj = JSON.parse(data); var arr1 = data; var table = document.getElementById("tabid"); var dataArray = []; var implicitArray = []; for(i=0;i<obj.length;i++) { implicitArray.push(obj[i]["timestamp"]); implicitArray.push(obj[i]["cuf"]); dataArray.push(implicitArray); table.insertAdjacentHTML( 'afterbegin', "<tr><td>" + obj[i]["timestamp"] + "</td><td>" + obj[i]["cuf"] + "</td> </tr>" ); } var row = table.insertRow(0); for(i=0;i<implicitArray.length;i++) { row.insertCell(implicitArray[0]); row.insertCell(implicitArray[1]); }} drawTable('[{"timestamp":"2017-02-14 08:00:00","cuf":0.055777588813303},{"timestamp":"2017-02-14 09:00:00","cuf":0.045343600403124}]') 

 <div class="table-title"> <h3>CUF Table</h3> </div> <table class="table-fill" id="tabid"> <thead> </div> <div class="modal-body"> <tr> <th class="text-left">TimeStamp</th> <th class="text-left">CUF</th> </tr> </thead> <tbody class="table-hover"> <!--tr> <td class="text-left">January</td> <td class="text-left">$ 50,000.00</td> </tr--> </tbody> </table> </div> <div class="modal-footer"> <div class="btn-group"> <button id="change-chart" class="btn btn-primary"><span class="glyphicon glyphicon-check"></span>Save</button> </div> </div> 

您需要使用JSON數據進行解析。

function drawTable(data){ 
obj = JSON.parse(data);  
         var arr1 = data;
        var table = document.getElementById("tabid");  
            var dataArray = []; 
                var implicitArray = [];
            for(i=0;i<obj.length;i++) {

                implicitArray.push(obj[i]["timestamp"]);
                implicitArray.push(obj[i]["cuf"]);
            //  table.append('<tr><td>'+obj[i]["timestamp"]+'</td><td>'+obj[i]["cuf"]+'</td></tr>');
                dataArray.push(implicitArray);


            }  
    }   
var row = table.insertRow(0);
var cell1 = row.insertCell(dataArray);
var cell2 = row.insertCell(dataArray);  
}

這是解析代碼段，不知道您想如何使用數組，但它會構建數組。

編輯：如果您只想將行插入表中，則幾乎可以正常工作

function drawTable(data){ 
     obj = JSON.parse(data);

  var arr1 = data;
var table = document.getElementById("tabid");  
    var dataArray = []; 
        var implicitArray = [];

     for(i=0;i<obj.length;i++) {

        implicitArray.push(obj[i]["timestamp"]);
        implicitArray.push(obj[i]["cuf"]);
          dataArray.push(implicitArray);
          table.insertAdjacentHTML( 'afterbegin',  "<tr><td>" + obj[i]["timestamp"] + "</td><td>" + obj[i]["cuf"] + "</td> </tr>"  );
  }

Answer 2

您發布的答案需要稍作修改，以下是答案：

       function drawTable(data){
        var arr1 = data;
        var table = document.getElementById("tabid");  
       var dataArray = []; 
       var implicitArray = [];

 for(i=0;i<arr1.length;i++) {

    implicitArray.push(arr1[i].timestamp);
        implicitArray.push(arr1[i].cuf);
      dataArray.push(implicitArray);
      table.insertAdjacentHTML('afterbegin',"<tr><td>" + arr1[i]["timestamp"] + "</td><td>" + arr1[i]["cuf"] + "</td> </tr>"  ); 
}