在這里，表的值在 Ajax 的幫助下來自資料庫。如何使用 jquery 或 Javascript 將多個值存盤到表行
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table id='company-details'>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>--</td>
<td>---</td>
<td>---</td>
</tr>
</table>
</body>
</html>
值來自ajax
0:
Company: 'Alfreds Futterkiste'
Contact: 'Maria Anders'
Country: 'Germany'
1:
Company: 'Centro Comercial Moctezuma'
Contact: 'Francisco Chang'
Country: 'Mexico'
2:
Company: 'Ernst Handel'
Contact: 'Roland Mendel'
Country: 'Austria'
如何使用 Jquery 向表中添加多個值。如何向表中添加值
uj5u.com熱心網友回復：
你必須做這樣的事情：
$.each(datafromAjax,function() {
$('#company-details tbody').append(`<tr><td>${this.Company}</td><td>${this.Contact}</td><td>${this.Country}</td></tr>`)
})
這將遍歷您的 ajax 成功資料，并將資料附加到您的表中
演示
顯示代碼片段
var datafromAjax = [{
Company: 'Alfreds Futterkiste',
Contact: 'Maria Anders',
Country: 'Germany',
}, {
Company: 'Centro Comercial Moctezuma',
Contact: 'Francisco Chang',
Country: 'Mexico',
}, {
Company: 'Ernst Handel',
Contact: 'Roland Mendel',
Country: 'Austria',
}]
$.each(datafromAjax,function() {
$('#company-details tbody').append(`<tr><td>${this.Company}</td><td>${this.Contact}</td><td>${this.Country}</td></tr>`)
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='company-details'>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>--</td>
<td>---</td>
<td>---</td>
</tr>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/434877.html
標籤：javascript jQuery 阿贾克斯 拉拉维尔