Question

我正在尝试向表中添加与数据库中用户数量相同的行。我通过ajax请求从后端获取用户的信息，然后当响应（JSON）到达时，我的代码将其传递给使用underscore.js创建的愚蠢模板。

下划线呈现模板后，这就是我得到的：

<tr data-id="29">
    <td>email@themail.ma</td>

    <td>
        <ul style="display:inline-block; padding-left:0; margin-bottom:0">
            <li style="display:inline-block;"><a href="#"></a></li>
        </ul>
    </td>

    <td>Activo</td>

    <td>No caduca</td>

    <td>
        <span data-placement="left" data-toggle="tooltip" title="Eliminar usuario">
            <a class="icon-trash" href="#" role="button"
               data-toggle="modal"
               data-target="#js-confirm-modal"
               data-action="js-del-user"
               data-msg="Desea eliminar el usuario?"></a>
        </span>

        <span data-placement="left" data-toggle="tooltip" title="Cambiar contraseña">
            <a class="icon-key" href="#" role="button"
               data-toggle="modal"
               data-target="#js-confirm-modal"
               data-action="js-chg-pass"
               data-msg="Cambiar contraseña del usuario?"></a>
        </span>

        <span data-placement="left" data-toggle="tooltip" title="Bloquear usuario">
            <a class="icon-lock" href="#" role="button"
               data-toggle="modal"
               data-target="#js-confirm-modal"
               data-action="js-block-user"
               data-msg="Desea bloquear el usuario?"></a>
        </span>

        <span data-placement="left" data-toggle="tooltip" title="Desbloquear usuario">
            <a class="icon-lock-open" href="#" role="button"
               data-toggle="modal"
               data-target="#js-confirm-modal"
               data-action="js-unblock-user"
               data-msg="Desea desbloquear el usuario?"></a>
        </span>

    </td>
</tr>

到目前为止很好，但是当我做这样的事情时：

tbody.innerHTML = html;

// or 

let parseHTML = function(str) {
  var tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = str;
  return tmp.body.children;
};

parseHTML(html);  // and then adding the returned codes to my tbody

它只是松散了html表格式（td，tr标签等）

Answer 1

为此，我经常使用模板文字，使用+=运算符构造HTML长字符串，然后使用document.innerHTML将最终的HTML字符串附加到我的页面上。

一个简单的示例可能看起来像这样：

const helloWorlds = {
  spanish: '¡Hola Mundo!',
  polish: 'Witaj świecie!',
  french: 'Bonjour le monde!'
}

const helloWorldsKeys = Object.keys(helloWorlds);

let listMarkup = '';

for (let i = 0; i < helloWorldsKeys.length; i++) {
  listMarkup += '<li class="listItem">' + helloWorlds[helloWorldsKeys[i]] + '</li>';
}

const myList = document.getElementById("list");

myList.innerHTML = listMarkup;

<div>
  <h1>Hello World!</h1>
  <ul id="list"></ul>
</div>

当然，您也可以使用appendChild在客户端中一点一点地构造列表，而不是立即添加整个列表。可能看起来像：

const myList = document.getElementById("list");

const helloWorlds = {
  spanish: '¡Hola Mundo!',
  polish: 'Witaj świecie!',
  french: 'Bonjour le monde!'
}

const helloWorldsKeys = Object.keys(helloWorlds);

for (let i = 0; i < helloWorldsKeys.length; i++) {
  let listItem = document.createElement('li');
  listItem.classList.add('listItem');
  listItem.innerHTML = helloWorlds[helloWorldsKeys[i]];
  myList.appendChild(listItem);
  
}

<div>
  <h1>Hello World!</h1>
  <ul id="list"></ul>
</div>

以下是使用表格的示例：

const myTableBody = document.getElementById("my-table-body");

const helloWorlds = {
  spanish: '¡Hola Mundo!',
  polish: 'Witaj świecie!',
  french: 'Bonjour le monde!'
}

const helloWorldsKeys = Object.keys(helloWorlds);

for (let i = 0; i < helloWorldsKeys.length; i++) {

  // create a table row element
  let tableRow = document.createElement('tr');

  // create a table cell (td) element
  let listItem = document.createElement('td');
  listItem.classList.add('listItem');

  // add content to table cell element
  listItem.innerHTML = helloWorlds[helloWorldsKeys[i]];

  // append table cell to table row
  tableRow.appendChild(listItem);

  // append table row to table body
  myTableBody.appendChild(tableRow);
}

<table border="1">
  <thead>
    <td>Hello World!</td>
  </thead>
  <tbody id="my-table-body"></tbody>
</table>

关于您的特定应用程序，如果您想探索创建HTML文档并将其内容附加到其他HTMl文档中，请查看以下答案：Cannot append DOM element to DIV node: Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node'

Answer 2

我在这里看到的问题是，您使用的是if (!$this->save($newData,['atomic'=>false)) { throw new Exception('Error Storing new data'); }而不是tbody.innerHTML = html;，当您使用tbody.innerHTML += html;运算符时，如果使用+=，则会保留旧的HTML。您将旧的HTML替换为新的HTML

Answer 3

由于@jaredgorski，我意识到了为什么html代码丢失格式的原因，所以这是到目前为止最适合我的问题的解决方案。任何建议将不胜感激。

function convert2Element (strHTML) {
    let table = document.createElement('table');
    table.appendChild(document.createElement('tbody'));
    table.querySelector('tbody').innerHTML = strHTML;
    return table.querySelector('tbody tr');
}

然后，我可以将返回值附加为，并将其作为对象来对待。

使用Vanilla JS向表中动态添加内容

3 个答案: