如何從javascript中的對象數組添加表格行？

Question

我們如何使用 JavaScript 創建表格行

我試圖使用 map 函數從 javascript 中的對象數組創建表行，但不知何故其拋出錯誤

    const renderTableData = (result) => {
            return result.map((item, index) => {
                return (
                    <tr>
                        <td >item.Name</td>
                        <td >item.Date</td>
                        <td >item.state</td>
                    </tr>
                )
            })
        }


    const dataBinding = (result) => {
        let x = document.getElementById("tableSection");
        x.innerHTML = renderTableData(result);
    }

我的 html <table> <tbody id = "tableSection"> </tbody></table>

Answer 1

您應該使用模板字符串

 const renderTableData = (result) => { return result.map((item, index) => { return `<tr> <td >${item.Name}</td> <td >${item.Date}</td> <td >${item.state}</td> </tr>`; }).join(''); }; const dataBinding = (result) => { let x = document.getElementById("tableSection"); x.innerHTML = renderTableData(result); }; dataBinding([ { Name: "first", Date: "2020-09-21", state: "USA" }, { Name: "first", Date: "2020-09-21", state: "USA" }, { Name: "first", Date: "2020-09-21", state: "USA" }, ]);

 <table> <tr> <th>Name</th> <th>Date</th> <th>state</th> </tr> <tbody id="tableSection"></tbody> </table>

我使用模板字符串，因為我們需要為每個項目創建一個多行字符串。 我們可以用普通字符串獲得相同的結果，但可讀性會差很多。

             "<tr>\
                  <td >"+item.Name+"</td>\
                  <td >"+item.Date+"</td>\
                  <td >"+item.state+"</td>\
              </tr>"

在我們映射對象數組之后，我們最終得到一個字符串數組。 .join('')從該數組中創建一個字符串並刪除逗號（如果您將 innerHTML 設置為數組，則元素之間的逗號將被視為要解析的文本）。

當您設置元素的innerHTML 時，提供的字符串將被解析為HTML。 你可以在這里閱讀更多關於它的信息

您首先所做的不是有效的 javascript 代碼，您使用的是一種JSX