构建动态表丝毫的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);