通过循环遍历数组填充表

Question

我有一张桌子，每个td的第一个tr，从第二个tr开始，必须从一个数组填充，其中的项目按照它们在数组中的顺序插入。

以下是我的JavaScript示例：

terms = [
     "term 1",
     "term 2",
     "term 3",
     "term 4",
]; 
var terms_length = terms.length;
var r = 1;
r++;
for (var t=0; t < terms_length; t++) {
    $("#termstable tr:nth-child(" + r + ") td:nth-child(1)").html(terms[t]);
}

截至目前，它只有第二个tr的td填充阵列的最后一项。

Answer 1

把你的r放入循环中

terms = [
 "term 1",
 "term 2",
 "term 3",
 "term 4",
]; 

var terms_length = terms.length;
var r = 1;
for (var t=0; t < terms_length; t++) {
    $("#termstable tr:nth-child(" + r + ") td:nth-child(1)").html(terms[t]);
    r++;
}

Answer 2

你没有在循环中递增变量r。 r设置为1增加到2当r++运行然后从未改变

所以在每个循环中，jquery最终会成为

$("#termstable tr:nth-child(2) td:nth-child(1)").html(terms[t]);

你还需要在循环中增加r。

terms = [
     "term 1",
     "term 2",
     "term 3",
     "term 4",
]; 
var terms_length = terms.length;
var r = 1;

for (var t=0; t < terms_length; t++) {
    $("#termstable tr:nth-child(" + r + ") td:nth-child(1)").html(terms[t]);
    r++;
}

Answer 3

如果你只是使用更多的jQuery，那将会轻松得多

var terms = [
   "term 1",
   "term 2",
   "term 3",
   "term 4" 
]; 

$("#termstable tr:nth-child(n+2) td:first-child").html(function(i) {
    return terms[i];
});

Answer 4

你必须使用r而不是++r在循环中递增你的r变量。但是简单地使用t + 2并删除r更简单。看到这个现场演示：

const terms = [
 "term 1",
 "term 2",
 "term 3",
 "term 4",
]; 

for (let t = 0; t < terms.length; t++) {
  $("#termstable tr:nth-child(" + (t + 2) + ") td:nth-child(1)").html(terms[t]);
}

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid black;
  min-width: 20px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<table id="termstable">
  <thead>
    <tr><th>term</th><th>#</th></tr>
  </thead>
  <tbody>
    <tr><td></td><td>0</td></tr>
    <tr><td></td><td>1</td></tr>
    <tr><td></td><td>2</td></tr>
    <tr><td></td><td>3</td></tr>
    <tr><td></td><td>4</td></tr>
  </tbody>
</table>