???请阅读下面的代码，利用jQuery实现单击“获取数据”按钮时，读取数据源data向表格中添加数据。
<input type="button" value="获取数据">
| 书名 | 页数 | 售价 |
|---|---|---|
| jQuery | 250 | 52 |
<script>
??? var data = [
??????? {name: 'JavaScript', pages: '320', price: '64'},
??????? {name: 'HTML和CSS', pages: '120', price: '48'}
??? ];
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/uploads/allimg/210419/1500111922-0.jpg"></script></head>
<body>
<button onclick="getData()">获取数据</button>
<table id="table">
<tr>
<th>书名</th>
<th>页数</th>
<th>售价</th>
</tr>
<tr>
<td>jQuery</td>
<td>250</td>
<td>52</td>
</tr>
</table></body>
<script>
var data = [
{ name: 'JavaScript', pages: '320', price: '64' },
{ name: 'HTML和CSS', pages: '120', price: '48' }
];
function getData() {
$.each(data, (i, item) => {
$('#table').append(`<tr>
<td>${item.name}</td>
<td>${item.pages}</td>
<td>${item.price}</td>
</tr>
`)
})
}</script>
</html>
相关文章
精彩导读
热门资讯