有某种方法可以使用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"];
最佳答案
您可以使用JS的.map()
检索每个值,并使用模板文字``
将值包装在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老式的方式:
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方式-会错过某种
.map
,return
和$ Element构造,例如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>
关于javascript - 创建HTML结构并在附录中使用函数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46163780/