HTML構造の作成と追加での関数の使用

Question

何とかjQueryで関数を使用する方法はありますか.append？私はこのような何かが必要です。

$("<tbody>").append(function(){ 
    for (i = 0; i < Test1.length; i++){ 
     Test1[i] 
    } 
}) 

なぜこの場合

$("<tr>").append(
    $("<th>").append("#"), 
    $("<th>").append(THeaders[1]), 
    $("<th>").append("Tuesday"), 
    $("<th>").append("Wednesday"), 
    $("<th>").append("Thurdsday"), 
    $("<th>").append("Friday"), 
    $("<th>").append("Saturday") 
) 

で大丈夫すべてはあるがしかし、私は次のオプションで "> <番目の" なしの要素を受け取る：

$("<tr>").append(
    $.each(THeaders, function(i, d){ 
     $("<th>").append($('<th></th>').text(d)); 
    }) 
) 

var THeaders = ["#", "Monday", "Tuesday", "Wednesday", "Thurdsday", "Friday", "Saturday"]; 

Answer 1

：あなたは TRタグ

ES6

var THeaders = ["#", "Monday", "Tuesday", "Wednesday", "Thurdsday", "Friday", "Saturday"]; 
 

 
$('thead tr').append(THeaders.map(val => `<th>${val}</th>`));

th{border: 1px solid #ddd;}

<table> 
 
    <thead><tr></tr></thead> 
 
</table> 
 

 
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

またはJS昔ながらの方法で自分の価値観をラップするすべての値とテンプレートリテラル``を取得するために、JSの.map()を使用することができます

var THeaders = ["#", "Monday", "Tuesday", "Wednesday", "Thurdsday", "Friday", "Saturday"]; 
 

 
$('thead tr').append(THeaders.map(function(val) { return '<th>'+ val +'</th>'; }));

th{border: 1px solid #ddd;}

<table> 
 
    <thead><tr></tr></thead> 
 
</table> 
 

 
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

jQueryの方法あなたが使用しようとしていたが -

var THeaders = ["#", "Monday", "Tuesday", "Wednesday", "Thurdsday", "Friday", "Saturday"]; 
 

 
$("<tr/>", { 
 
    append: THeaders.map(function(val){ 
 
    return $('<th/>', {text: val}); 
 
    }), 
 
    appendTo: 'thead' 
 
})

th{border: 1px solid #ddd;}

<table> 
 
    <thead></thead> 
 
</table> 
 

 
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

Answer 2

のように、.mapのいくつかの並べ替えを欠場returnと$要素でしょう構造が見ています次のshoudlはどこに行くか考えていますか？

var THeaders = ["#", "Monday", "Tuesday", "Wednesday", "Thurdsday", "Friday", "Saturday"]; 
 

 
var trid = $('#list'); 
 
$.each(THeaders, function(i, d){ 
 
    trid.append('<th>' + d + '</th>'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table width="100%" cellpadding="1" cellspacing="1"> 
 
<tr id="list"> 
 

 
</tr> 
 
</table>