javascript - 将数组中的宽度值附加到 td

Question

我有一个如下所示的数组，我希望它们的宽度为 <td>我喜欢附加。

<table>
  <tr class="table_row">
  </tr>
</table>

<script>
var arr = [40, 60, 80, 100]
var table_row = $('.table_row');
for(var i=0; i<arr.length  i++){
  table_row.append('<td style="width:arr[i]></td>')
}
</script>

我想我需要连接 arr[i] ？

Answer 1

您在 for 中忘记了一个分号:

for(var i=0; i<arr.length  i++){
//-----------------------^ here

此外，当您定义要追加的 td 时:

table_row.append('<td style="width:arr[i]"></td>');

您正在放置文本 arr[i] 而不是数组值。 width 单位也丢失了，例如您可以将其设置为 px。

要解决数组值问题，您可以连接:

table_row.append('<td style="width:' + arr[i] + '"></td>');

或者使用String interpolation :

table_row.append(`<td style="width:${arr[i]}"></td>`);

请注意，通过插值，外部刻度从 ' 更改为 `。

修复一切:

var arr = [40, 60, 80, 100];
var table_row = $('.table_row');
for(var i=0; i<arr.length; i++){
  table_row.append(`<td style="width:${arr[i]}px;">&nbsp;</td>`);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr class="table_row">
  </tr>
</table>

请注意，我在 td 中添加了一个  ，在 table 中添加了一个 border，以便您可以在实时片段中更好地查看结果