構建動態表絲毫的innerHTML

Question

我嘗試建立於JavaScript的innerHTML絲毫動態表。但是當webapp運行時，它僅打印console.log，但不會生成表格。

我試圖以兩種方式：

第一：

success: function (data, status, jqXHR) { 


     $.each(data, function (index, dati) { 

      console.log(dati) 


      var html = "<table width=\'450\' bgcolor=\'white\' border=\'2\' bordercolor=\'black\' cellpadding=\'10\' cellspacing=\'1\'>\n" + 
       " <tr style=min-width:850px>\n" + 
       "  <td>dati.codiceCOmmessa </td>\n" + 
       "  <td>dati.commessaMainSub</td>\n" + 
       "  <td>dati.settoreCliente</td>\n" + 
       "  <td>dati.nomeCliente</td>\n" + 
       "  <td>dati.titoloQuals</td>\n" + 
       "  <td>dati.keyWordsTopic</td>\n" + 
       "  <td>dati.keyWordsActivities</td>\n" + 
       "  <td>dati.anno</td>\n" + 
       "  <td>dati.dataInizio</td>\n" + 
       "  <td>dati.dataFine</td>\n" + 
       "  <td>dati.referente</td>\n" + 
       "  <td>dati.referenteDoc</td>\n" + 
       "  <td>dati.sviluppatore</td>\n" + 
       "  <td>dati.path</td>\n" + 
       " </tr>\n" + 
       "</table>" 

      html.innerHTML; 
     }) 
    }, 

和第二（絲毫body.innerHTML或node.innerHTML，該應用程序出錯）：

success: function (data, status, jqXHR) { 


     $.each(data, function (index, dati) { 

      console.log(dati) 

      innerHTML = "<table width=\'450\' bgcolor=\'white\' border=\'2\' bordercolor=\'black\' cellpadding=\'10\' cellspacing=\'1\'>\n" + 
       " <tr style=min-width:850px>\n" + 
       "  <td>dati.codiceCOmmessa </td>\n" + 
       "  <td>dati.commessaMainSub</td>\n" + 
       "  <td>dati.settoreCliente</td>\n" + 
       "  <td>dati.nomeCliente</td>\n" + 
       "  <td>dati.titoloQuals</td>\n" + 
       "  <td>dati.keyWordsTopic</td>\n" + 
       "  <td>dati.keyWordsActivities</td>\n" + 
       "  <td>dati.anno</td>\n" + 
       "  <td>dati.dataInizio</td>\n" + 
       "  <td>dati.dataFine</td>\n" + 
       "  <td>dati.referente</td>\n" + 
       "  <td>dati.referenteDoc</td>\n" + 
       "  <td>dati.sviluppatore</td>\n" + 
       "  <td>dati.path</td>\n" + 
       " </tr>\n" + 
       "</table>" 


     }) 
    } 

有人可以幫助我嗎？我錯了？

Answer 1

起初，循環可以使事情變得更容易（和字符串文字也是如此），所以可以簡單地顯示所有對象的值：

var html = 
`<table width='450' bgcolor='white' border='2'bordercolor='black' cellpadding='10' cellspacing='1'> 
    <tr style='min-width:850px'> 
     ${ 
      Object.values(dati) 
      .map(
       value => `<td>${value}</td>` 
      ).join("\n") 
      } 
     </tr> 
    </table>`; 

或者，如果你不喜歡的文字，同樣適用於串接：

var html =  
    "<table width='450' bgcolor='white' border='2'bordercolor='black' cellpadding='10' cellspacing='1'><tr style='min-width:850px'>" 
+ Object.values(dati) 
    .map(
     value => "<td>"+value+"</td>" 
    ).join("\n") 
+ "</tr></table>"; 

而you.may想做某事與HTML：

document.body.innerHTML += html; 

A small demo

Answer 2

您需要使用現有元素的.innerHTML方法來寫你的函數將文檔生成的HTML。這是一個非常簡單的例子，沒有真實的數據。

var success = function(data, status, jqXHR) { 
 

 

 
    $.each(data, function(index, dati) { 
 

 
    console.log(dati) 
 

 

 
    var html = "<table width=\'450\' bgcolor=\'white\' border=\'2\' bordercolor=\'black\' cellpadding=\'10\' cellspacing=\'1\'>\n" + 
 
     " <tr style=min-width:850px>\n" + 
 
     "  <td>dati.codiceCOmmessa </td>\n" + 
 
     "  <td>dati.commessaMainSub</td>\n" + 
 
     "  <td>dati.settoreCliente</td>\n" + 
 
     "  <td>dati.nomeCliente</td>\n" + 
 
     "  <td>dati.titoloQuals</td>\n" + 
 
     "  <td>dati.keyWordsTopic</td>\n" + 
 
     "  <td>dati.keyWordsActivities</td>\n" + 
 
     "  <td>dati.anno</td>\n" + 
 
     "  <td>dati.dataInizio</td>\n" + 
 
     "  <td>dati.dataFine</td>\n" + 
 
     "  <td>dati.referente</td>\n" + 
 
     "  <td>dati.referenteDoc</td>\n" + 
 
     "  <td>dati.sviluppatore</td>\n" + 
 
     "  <td>dati.path</td>\n" + 
 
     " </tr>\n" + 
 
     "</table>" 
 

 

 
    document.getElementById('wrapper').innerHTML = html; 
 
    }) 
 
}; 
 

 
success([0, 1], null, null);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"></div>

Answer 3

首先，你需要的dati.variables追加到字符串，而不是讓他們爲字符串本身喜歡的一部分：

innerHTML = "<table width=\'450\' bgcolor=\'white\' border=\'2\' bordercolor=\'black\' cellpadding=\'10\' cellspacing=\'1\'>\n" + 
       " <tr style=min-width:850px>\n" + 
       "  <td>" + dati.codiceCOmmessa + "</td>\n" + 
       "  <td>" + dati.commessaMainSub + "</td>\n" 

然後，你需要追加您創建的頁面，這取決於您要添加表的HTML。這將追加到身體：

$(innerHTML).appendTo($('body')); 

或身體設爲您的HTML：

$('body').html(innerHTML);