Javascript td中的增量var

我试图在添加新tr时增加var

表格

1.
添加

脚本

var行=1；
函数addfield（）{
document.getElementById（“count”）.innerHTML=行；
$（“#myTable”）.find（'tbody'）.append（$（''）.append（$（''）.append（$（''）.append（$（'1'））；
行++；
}

所发生的情况是，在添加新的“tr”标记时，脚本正在递增第一个“td id=“count””-标记，而不是递增下一个“td”标记。此外，它不会在新生成的“td”标记中显示计数。

---

我遗漏了什么？

好的，首先让我继续说，我破坏了你的HTML结构，因为在我看来，你正在使用一个表来做一些非表格的事情，所以我将结构更改为divs。我还从脚本中提取了增量，并使用CSS计数器来获得相同的效果。如果使用表格保存数据毕竟是至关重要的，那么我猜您不会选择这个答案。 HTML

JS

函数addfield（）{
$（“#myTable”）.append（$（''）.append（$（'1'））；
}

在html元素中不应多次使用同一id。 像这样改变：

$("#myTable").find('tbody').append($('<tr>').append($('<td><select><option value="1">1</option></select>')));

$（“#myTable”）.find（'tbody'）.append（$（''）.append（$（'1'））；

它增加了前一行，因为您调用了

document.getElementById（“count”）

，它将获得DOM中当时id为“count”的最后一个元素。因为您还没有附加新的，所以它会增加现有的。

<script>
var row = 1;

function addfield() {       
    document.getElementById("count").innerHTML = row;
    $("#myTable").find('tbody').append($('<tr>').append($('<td id="count">')).append($('<td><select><option value="1">1</option></select>')));
    row++;
}
</script>

<div id="myTable">
  <div class="row">
    <div class="cellish"><select><option value="1">1</option></select>
    </div>
  </div>
</div>
<button onclick="addfield()">Add</button>

body {
  counter-reset: count;
}
.cellish {
  display: inline-block;
}
.cellish::before {
  content: counter(count) " ";
  counter-increment: count;
}

function addfield() {       
    $("#myTable").append($('<div class="row">')).append($('<div class="cellish"><select><option value="1">1</option></select>'));
}

$("#myTable").find('tbody').append($('<tr>').append($('<td><select><option value="1">1</option></select>')));