如何使用帶有 foreach 循環的 javascript 渲染表

Question

我有一個表，它的 tr 需要通過渲染 td 中的值來重復。 td 的值來自使用 foreach 循環的 get api 調用。 我已經嘗試渲染，但我的 tbody 沒有進入桌子。 我希望它只使用 javascript 創建，沒有 jquery。這是下面的代碼

 var container = document.getElementById("container"); var url = "http://dummy.restapiexample.com/api/v1/employees"; fetch(url).then(function(response) { return response.json(); }).then(function(data) { container.innerHTML = '<div class="container"><h2>Basic Table</h2><p>The.table class adds basic styling (light padding and horizontal dividers) to a table:</p><table class="table"><thead><tr><th>ID</th><th>Firstname</th></tr></thead>' data.data.forEach(function(count) { console.log(count); container.innerHTML += '<tbody><tr><td>' + count.id + '</td><td>' + count.employee_name + '</td></tr></tbody>'; }) }).catch(function() { console.log("Booo"); }); container.innerHTML = '</table></div>'

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <div id="container"> <h2>Basic Table</h2> <p>The.table class adds basic styling (light padding and horizontal dividers) to a table:</p> </div>

Answer 1

從開始創建表格和 tbody 並使用 forEach 插入行

 var container = document.getElementById("container"); var url = "http://dummy.restapiexample.com/api/v1/employees"; fetch(url).then(function(response) { return response.json(); }).then(function(data) { data.data.forEach(function(count) { console.log(count); let tableBody = document.getElementById("tableBody"); tableBody.innerHTML += '<tr><td>' + count.id + '</td><td>' + count.employee_name + '</td></tr>'; }) }).catch(function() { console.log("Booo"); }); container.innerHTML = '</table></div>'

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div id="container"> <h2>Basic Table</h2> <p>The.table class adds basic styling (light padding and horizontal dividers) to a table:</p> <table class="table"> <thead> <tr> <th>ID</th><th>Firstname</th> </tr> </thead> <tbody id="tableBody"> </tbody> </table> </div>

如何使用帶有 foreach 循環的 javascript 渲染表

問題描述

1 個解決方案

解決方案1
0 已采納 2021-01-15 11:35:53

如何使用帶有 foreach 循環的 javascript 渲染表

問題描述

1 個解決方案

解決方案1 0 已采納 2021-01-15 11:35:53

解決方案1
0 已采納 2021-01-15 11:35:53