无法使用javascript在标记中创建标记

Question

我正在尝试创建一个表，该表显示上传后成员的文件信息。但是，由于某些原因，该标签会导致布局发生偏移。

当我打开F12窗口时，代码如下所示：

问题出在标签和标签连在一起。

现在，我只是通过添加空格标记或一行来对其进行编辑定界符：

它立即创建另一个标签，并在其中包含整个标签。恢复了界面，没有更多错误！

这是我的全部源代码：

<table id="files" class="files table table-striped" width="100%"></table>
var isSuccess = true;
if(data['result'][0]['error'] != null)
{
 isSuccess = false;
}
var html = ''; // I tried adding the <tbody></tbody> tag here but 
               // it still needs a space or line break -> not working!

html += '<tr class="template-download';
if(isSuccess == false)
{
    html += ' errorText';
}
html += '" ';
if(isSuccess == true)
{
    html += 'onClick="return showAdditionalInformation(this);"';
}
html += '>';

if(isSuccess == true)
{
    html += data['result'][0]['success_result_html'];
}
else
{
    html += data['result'][0]['error_result_html'];
}
html += '</tr>';

function handleUrlUploadSuccess(data)
{
    isSuccess = true;
    if(data.error != null)
    {
        isSuccess = false;
    }
    html = '';
    html += '<tr class="template-download';
    if(isSuccess == false)
    {
        html += ' errorText';
    }
    html += '" onClick="return showAdditionalInformation(this);">'
    if(isSuccess == false)
    {
        // add result html
        html += data.error_result_html;
    }
    else
    {
        // add result html
        html += data.success_result_html;
        // keep a copy of the urls globally
        fileUrls.push(data.url);
        fileDeleteHashes.push(data.delete_hash);
        fileShortUrls.push(data.short_url);
    }
    html += '</tr>';
    $('#rowId'+data.rowId).replaceWith(html);
    if(data.rowId == urlList.length-1)
    {
        // show footer
        $('#urlUpload .urlFileListingWrapper .processing-button').addClass('hidden');
        $('#urlUpload .fileSectionFooterText').removeClass('hidden');
        // set additional options
        sendAdditionalOptions();
        // setup copy link
        setupCopyAllLink();
    }
}

Answer 1

循环或javascript的开始应该只是打开标记，而不是结束标记。在循环/ javascript的结尾，您应该具有close标记。他们应该包装所有正在创建的表行标签。

Answer 2

我会考虑使用单个字符串作为行模板，然后使用replace对其进行更新

var html = ''; 
//Template for our row
var row = "<tr class='template-download{{additionalClasses}} {{onClick}}>{{data}}</tr>"

//Dummy Data
var isSuccess = true;
var data = {
  result : [{
      success_result_html: "<td>Success</td>",
      error_result_html: "<td>Fail</td>"
  }]
};

//Populate row depending on condition
if(isSuccess)
{
  html = row.replace("{{additionalClasses}}","")
            .replace("{{onClick}}", "onClick='return showAdditionalInformation(this);'")
            .replace("{{data}}", data['result'][0]['success_result_html']);
}
else
{
  html = row.replace("{{additionalClasses}}"," errorText")
            .replace("{{onClick}}", "")
            .replace("{{data}}", data['result'][0]['error_result_html']);
}
//Add the row to the tbody
document.querySelector("#files tbody").innerHTML = html;

<table id="files" class="files table table-striped" width="100%">
  <!-- Add tbody here-->
  <tbody>
  </tbody>
</table>