javascript - 使用 JavaScript 的 if/else 的innerHTML 在 if 语句之前关闭表格标签

Question

我正在使用 JavaScript 将一些表格形式的输出写入 div 标记，但我必须使用 if 语句来避免输出中出现空字段。但是当我在浏览器中查看它时，浏览器在 if 语句之前关闭表标记，并且忽略 if 语句内的 td 标记。我错过了什么？

这是我的 JavaScript 代码:

qdetails.innerHTML = "<h4 style='font-size:24px;padding:5px 0;margin:0 0 10px 0;color:#000;'>Order Details</h4>";
qdetails.innerHTML +="<table style='border: 1px solid #ddd;width:100%;' cellpadding='6'><tr><td><strong>Apparel Color Selected:</strong> "+ document.getElementById('colorselected').value + "</td></tr>";
if(getAdultQty().howmany_adult_s != 0){
  qdetails.innerHTML +="<tr><td><strong>Adult Small:</strong> "+ getAdultQty().howmany_adult_s + "</td></tr>";  
}
qdetails.innerHTML +="</table>";

和 HTML 输出:

<h4 style='font-size:24px;padding:5px 0;margin:0 0 10px 0;color:#000;'>Order Details</h4>
<table style='border: 1px solid #ddd;width:100%;' cellpadding='6'><tr><td><strong>Apparel Color Selected:</strong> Black</td></tr></table>
Adult Small: 20

如您所见，表标记在 if 语句之前关闭

我正在尝试将输出设为

<h4 style='font-size:24px;padding:5px 0;margin:0 0 10px 0;color:#000;'>Order Details</h4>
<table style='border: 1px solid #ddd;width:100%;' cellpadding='6'><tr><td><strong>Apparel Color Selected:</strong> Black</td></tr>
<tr><td><strong>Adult Small:</strong> 20</td></tr>
</table>

谢谢

Answer 1

设置innerHTML不是一个简单的操作，在内部它非常昂贵并且有副作用，所以只使用 innerHTML谨慎地(我认为 innerHTML 应该被定义为函数属性(例如 setInnerHTML(string) )而不是伪值属性) - 无论如何......

幸运的是，在您的情况下，很容易修复:改用中间变量:

var html = "<h4 style='font-size:24px;padding:5px 0;margin:0 0 10px 0;color:#000;'>Order Details</h4>";
html +="<table style='border: 1px solid #ddd;width:100%;' cellpadding='6'><tr><td><strong>Apparel Color Selected:</strong> "+ document.getElementById('colorselected').value + "</td></tr>";
if( getAdultQty().howmany_adult_s != 0 ) {
  html  +="<tr><td><strong>Adult Small:</strong> "+ getAdultQty().howmany_adult_s + "</td></tr>";  
}
html +="</table>";
qdetails.innerHTML = html;

您可以通过使用模板文字(“反引号字符串”)来改进这一点:

var html = `
<h4 style="font-size:24px;padding:5px 0;margin:0 0 10px 0;color:#000;">Order Details</h4>
<table style='border: 1px solid #ddd;width:100%;' cellpadding='6'>
    <tr>
        <td><strong>Apparel Color Selected:</strong> ${ document.getElementById('colorselected').value }</td>
    </tr>`;

if( getAdultQty().howmany_adult_s != 0 ) {
  html += `<tr><td><strong>Adult Small:</strong> ${ getAdultQty().howmany_adult_s }</td></tr>`;  
}
qdetails.innerHTML = html + `</table>`;

也就是说...您的标记可以通过使用样式表和正确使用 <thead> 来简化和<th> ，这将使您的 HTML 更易于阅读。

关于模板文字

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

ECMAScript 6 引入了特殊的字符串文字，这些文字用反引号(而不是引号)分隔，可以包含原始换行符，并且它们包含带有 ${ expr } 的嵌入表达式。语法作为字符串连接的替代方法。

所以这个:

var fooTemplateLiteral = `My name is ${ name }
and I can span ${ 2 } lines!`;

相当于:

var fooClassicString = "My name is " + name + "\
and I can span " + 2.toString() + " lines too, though with manual escapes.";