js计数在html元素中作为Nan出现

Question

我遇到了一个问题，任何+ count +在我的js的这一部分，都回来作为Nan在第一个之外，这是一个<th scope="row" class="product-id">' + count + '</th>

var count = 1;
function new_link() {
count++;
var e = document.createElement("tr");
e.id = count, e.className = "product";
var t = '<tr><th scope="row" class="product-id">' + count + '</th><td class="text-start"><div class="mb-2"><input class="form-control bg-light border-0" type="text" name="productName-' + count + '" id="productName-' + count + '" placeholder="Product Name"></div><textarea class="form-control bg-light border-0" id="productDetails-' + count + '" rows="2" placeholder="Product Details"></textarea></div></td><td><input class="form-control bg-light border-0 product-price" type="number" id="productRate-' + count + '" step="0.01" placeholder="$0.00"></td><td><div class="input-step"><button type="button" class="minus">–</button><input type="number" class="product-quantity" id="product-qty-' + count + '" value="0" readonly><button type="button" class="plus">+</button></div></td><td class="text-end"><div><input type="text" class="form-control bg-light border-0 product-line-price" id="productPrice-' + count + '" value="$0.00" placeholder="$0.00" /></div></td><td class="product-removal"><a class="btn btn-success">Delete</a></td></tr>';
}

我需要所有+ counts +给出一个数值，以便稍后可以$_POST它们。大多数都在html元素中。我不知道从这里该去哪里。

Answer 1

这就是我的解决方案!

我还将var更改为const，并将撇号(')更改为反勾号(')!

let count = 1;
function new_link() {
count++;
const e = document.createElement("tr");
e.id = count;
e.className = "product";
const t = `
<th scope="row" class="product-id">${count}</th>
<td class="text-start">
<div class="mb-2">
<input class="form-control bg-light border-0" type="text" name="productName-${count}" id="productName-${count}" placeholder="Product Name" />
</div>
<textarea class="form-control bg-light border-0" id="productDetails-${count}" rows="2" placeholder="Product Details"></textarea>
</div>
</td>
<td>
<input class="form-control bg-light border-0 product-price" type="number" id="productRate-${count}" step="0.01" placeholder="$0.00">
</td>
<td>
<div class="input-step">
<button type="button" class="minus">-</button>
<input type="number" class="product-quantity" id="product-qty-${count}" value="0" readonly />
<button type="button" class="plus">+</button>
</div>
</td>
<td class="text-end">
<div>
<input type="text" class="form-control bg-light border-0 product-line-price" id="productPrice-${count}" value="$0.00" placeholder="$0.00" />
</div>
</td>
<td class="product-removal">
<a class="btn btn-success">Delete</a>
</td>
`;
e.innerHTML = t;
return e;
}
console.log(new_link());
console.log(new_link());
console.log(new_link());