很抱歉帶著這個問題來到這里，但作為一個初學者，我不知道為什么它會在<div>上面提到的下面建立表格。
表格應該首先出現，然后是 Notas、textarea 和 Recibido por 以及行，如下所示：
這是Fiddle，以防您想看一眼。
這是構建它的 JS 部分。發布 HTML 變得廣泛，您可能會通過查看以下內容來發現問題：
let result = "<div class='card' id='card'><table class='table table-hover table-vcenter' id='dtable'>"
"<thead>"
"<tr>"
"<th style='width:6%'>Prenda</th>"
"<th style='width:7%;'>ID</th>"
"<th style='width:10%;'>Cliente</th>"
"</tr>"
"</thead>"
result =
"</tbody>"
"<tfoot>";
let colSpan = origin == 'Corte' ? 16 :
origin == 'Print' || origin == 'Production' ? 15 :
origin == 'Trim' ? 7 :
origin == 'Fabric-Colombia' || origin == 'Fabric-Colombia Ad Hoc' ? 8 :
origin == 'Fabric-Asia' || origin == 'Fabric-Asia-Ad Hoc' ? 10 : 1;
result =
"<tr>"
"<td id='totalTitle' colspan='" colSpan "' align='right'><strong>Total:</strong></td>"
"<td id='totalValue' class='total'><strong></strong></td>"
"</tr>"
result = (origin == 'Production') ? "<tr style='display: none'>" : "<tr>";
result =
"<td id='termsRow' colspan='" (colSpan - 1) "' align='right'><strong>Deposit (%):</strong></td>"
"<td><input type='number' id='deposit_percentage' min='0' class='terms' name='numberInputs' value='' onchange='deposit(this)'></td>"
"<td id='termsTotal' class='total_terms'><strong></strong></td>"
"</tr>";
"</tfoot>"
"</table>"
"<div class='col'>"
result = (origin.indexOf('Asia') > -1) ? "<label for='notes'>Notes:</label>" : "<label for='notes'>Notas:</label>";
result = "<textarea oninput='auto_size(this)' id='notes' name='notes' class='notas' rows='4' cols='50'></textarea>"
"<br>"
"<div class='col recebido-por'>";
result = (origin.indexOf('Asia') > -1) ? "<span class = 'recibido-por'>Received by:</span>" : "<span class = 'recibido-por'>Recibido por:</span>";
result = "<span class ='line'></span>"
"</div>"
"</div>"
var div = document.getElementById('po-items');
div.innerHTML = result;感謝任何幫助。
uj5u.com熱心網友回復：
從我在您的代碼中看到的朋友，關閉 html 標記存在問題。
您沒有連接 tfoot 和 table 標記，因此它使 html 保持打開狀態。
開頭的 tbody 標簽也丟失了。
uj5u.com熱心網友回復：
下面的代碼可以正常作業。下次嘗試使用模板文字和縮進。
let colSpan =
origin == 'Corte'
? 16
: origin == 'Print' || origin == 'Production'
? 15
: origin == 'Trim'
? 7
: origin == 'Fabric-Colombia' || origin == 'Fabric-Colombia Ad Hoc'
? 8
: origin == 'Fabric-Asia' || origin == 'Fabric-Asia-Ad Hoc'
? 10
: 1;
let result = `
<div class='card' id='card'>
<table class='table table-hover table-vcenter' id='dtable'>
<thead>
<tr>
<th style='width:6%'> Prenda </th>
<th style='width:7%;'> ID </th>
<th style='width:10%;'> Cliente </th>
</tr>
</thead>
<tfoot>
<tr>
<td id='totalTitle' colspan='${colSpan} align='right'>
<strong> Total: </strong>
</td>
<td id='totalValue' class='total'>
<strong></strong>
</td>
</tr>
<tr ${origin == 'Production' ? "style='display: none'" : ''}>
<td id='termsRow' colspan= ${colSpan - 1}align='right'>
<strong>Deposit (%):</strong>
</td>
<td>
<input type='number' id='deposit_percentage' min='0' class='terms' name='numberInputs' value='' onchange='deposit(this)'>
</td>
<td id='termsTotal' class='total_terms'>
<strong></strong>
</td>
</tr>
</tfoot>
</table>
<div class='col'>
<label for='notes'>
${origin.indexOf('Asia') > -1 ? 'Notes:' : 'Notas:'}
</label>
<textarea oninput='auto_size(this)' id='notes' name='notes' class='notas' rows='4' cols='50'>
</textarea>
<br>
<div class='col recebido-por'>
<span class = 'recibido-por'>${
origin.indexOf('Asia') > -1 ? 'Received by:' : 'Recibido por:'
}</span>
<span class ='line'></span>
</div>
</div>
`;
var div = document.getElementById('po-items');
div.innerHTML = result;
uj5u.com熱心網友回復：
在這里，我修復了result它，以便可以輕松閱讀。
主要問題是單行 if-else 陳述句，您應該用括號將它們括起來。還缺少一些開始和結束標簽。
let colSpan = origin == 'Corte' ? 16 :
origin == 'Print' || origin == 'Production' ? 15 :
origin == 'Trim' ? 7 :
origin == 'Fabric-Colombia' || origin == 'Fabric-Colombia Ad Hoc' ? 8 :
origin == 'Fabric-Asia' || origin == 'Fabric-Asia-Ad Hoc' ? 10 : 1;
let result = ""
"<div class='card' id='card'>"
"<table class='table table-hover table-vcenter' id='dtable'>"
"<thead>"
"<tr>"
"<th style='width:6%'>Prenda</th>"
"<th style='width:7%;'>ID</th>"
"<th style='width:10%;'>Cliente</th>"
"</tr>"
"</thead>"
"<tbody>" // you missed <tbody> here, but your tbody is empty so why bother putting it
"</tbody>"
"<tfoot>"
"<tr>"
"<td id='totalTitle' colspan='" colSpan "' align='right'><strong>Total:</strong></td>"
"<td id='totalValue' class='total'><strong></strong></td>"
"</tr>"
((origin == 'Production') ? "<tr style='display: none'>" : "<tr>")
"<td id='termsRow' colspan='" (colSpan - 1) "' align='right'><strong>Deposit (%):</strong></td>"
"<td><input type='number' id='deposit_percentage' min='0' class='terms' name='numberInputs' value='' onchange='deposit(this)'></td>"
"<td id='termsTotal' class='total_terms'><strong></strong></td>"
"</tr>"
"</tfoot>"
"</table>"
""
"<div class='col'>"
((origin.indexOf('Asia') > -1) ? "<label for='notes'>Notes:</label>" : "<label for='notes'>Notas:</label>")
"<textarea oninput='auto_size(this)' id='notes' name='notes' class='notas' rows='4' cols='50'></textarea>"
"<br>"
"<div class='col recebido-por'>"
((origin.indexOf('Asia') > -1) ? "<span class = 'recibido-por'>Received by:</span>" : "<span class = 'recibido-por'>Recibido por:</span>")
"<span class ='line'></span>"
"</div>"
"</div>"
"</div>"
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/508164.html
標籤：javascript html