配列の幅の値を持つ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でセミコロンを忘れて：あなたが追加するあなたのtdを定義する際にも

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

を：

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>`); 

注意を補間してoutterダニが 'を'から変更しました。

修正すべて：私はあなたがより良いライブスニペットの結果を見ることができるtd秒で のでtableでborderを追加

注

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>

Answer 2

<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]}px;"></td>`) 
} 
</script> 

これを使用してください。