Question

如何动态地在表中插入值.. ??

下面是我的表格的链接

以下是我的表格代码

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

如何将时间分配给一行，将cuf分配给td标记中的另一行.. ??

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>"  ); 
}

如何动态地将值插入表中？

2 个答案: