使用Jquery find()编辑表，然后使用before()添加包含数组中数据的单元格

Question

我正试图插入一列包含数组数据的单元格。我尝试过使用for循环，但这只是将数组的所有数据放在每个新单元格中。我的目标是让新单元格分别显示row_header1、row_header2或row_headr3
有人能帮我解决这个问题吗？非常感谢。

-我试过了。

for (var i = 0, len = arr1.length; i < len; i++) {
$("tr").find("td:first").before('<td>' + arr1[i] + '</td>')

var arr1 = ["row_header1", "row_header2", "row_header3"];
$(document).ready(function() {
$("#btn").click(function() {
var i = 0,
len = arr1.length;
i < len;
i++;
$("tr").find("td:first").before('<td>' + arr1[i] + '</td>')
});
});

td,
th {
padding: 4px;
border: solid;
width: 50px;
height: 50px;
}
table {
border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn">+</button>
<table id='table'>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>

Answer 1

我认为每次当您想要分配值时，都需要选择正确的tr

var arr1 = ["row_header1", "row_header2", "row_header3"];
$(document).ready(function() {
$("#btn").click(function() {
var i = 0,
len = arr1.length;
while(i< len){
$("tr:eq("+i+")").find("td:first").before('<td>' + arr1[i] + '</td>');
i++;
}
});
});

td,
th {
padding: 4px;
border: solid;
width: 50px;
height: 50px;
}
table {
border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn">+</button>
<table id='table'>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>