请阅读下面的代码，利用jQuery实现单击“获取数据”按钮时，读取数据源data向表格中添加数据？

发布于 2022-09-12 22:51:16 字数 430 浏览 8 评论 0

请阅读下面的代码，利用jQuery实现单击“获取数据”按钮时，读取数据源data向表格中添加数据。
<input type="button" value="获取数据">

书名	页数	售价
jQuery	250	52

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无法回应 2022-09-19 22:51:16

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></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>

回复收藏 0

~没有更多了~