如何从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