表内容的换行符（引导程序）

Question

这里是 javascript 初学者，我在更改表格内容的位置（或实际上是换行符）时遇到了困难，在下面的代码中，有什么简单的方法可以让“emp future”归于其他人（“emp mygoals”和“emp id”）无论是换行还是定位（如果可以同时使用两种方式以便人们可以学习）。 我尝试使用换行符和位置，但 json 数据消失了。 这是我的代码：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <style> </style> </head> <body> <div class="container"> <table class="table table-stripped"> <thead> <tr> <th> emp id</th> <th> emp mygoals</th> <th> emp future</th> </tr> </thead> <tbody id="data" > </tbody> </table> </div> <script> fetch("https://asdasd.free.beeceptor.com/a", { method: "GET", headers: { "x-api-key": "p*****w" } } ).then(res =>{ res.json().then( data=> { console.log(data); var temp =""; temp +="<tr>"; temp += "<td>"+data.id+"</td>"; temp += "<td>"+data.mygoals+"</td>"; temp += "<td>"+data.future+"</td></tr>"; document.getElementById("data").innerHTML = temp } ) } ) .catch(err => { console.log("ERROR: " + err); }); </script> </body> </html>

Answer 1

如果我正确理解了您的问题，您是否尝试通过连续调用为您获取新结果的 javascript 函数将值附加到表中？

<script>
fetch("https://asdasd.free.beeceptor.com/a", {
    method: "GET",
    headers: {
        "x-api-key": "p*****w"
    }
}).then(res => { 
    res.json().then(data => {
        //Here assuming that data is an array of objects
        //var data = : { "id": "145127236", "mygoals": "success", "future": "high", "dole": { "Key": "fhd699f" } },

        ids = document.getElementById("ids")
        goals = document.getElementById("goals")
        futures = document.getElementById("futures")

        ids.insertAdjacentHTML("afterend", "<td>" + data.id + "</td>");
        goals.insertAdjacentHTML("afterend", "<td>" + data.mygoals + "</td>");
        futures.insertAdjacentHTML("afterend", "<td>" + data.futures + "</td>");

    }
  )
}).catch(err => {
      console.log("ERROR: " + err);
});
</script>

请注意，我已经更改了innerHtml = temp .insertAdjacentHTML("beforeend", temp);的innerHtml = temp . 这会附加 temp 变量的内容，而不是用 temp 的值替换 #data 的 html。

编辑：根据 Bootstrap 4 中的响应表更改表的布局。

<div class="table-responsive">
    <table class="table table-stripped">
      <tbody>
        <tr>
          <th id="ids">emp id</th>
        </tr>
        <tr>
          <th id="goals">emp goals</th>
        </tr>
        <tr>
          <th id="futures">emp futures</th>
        </tr>
      </tbody>
    </table>
</div>

在这里，我设置了一个带有简单演示的小提琴，没有引导程序基础演示

表内容的换行符（引导程序）

问题描述

1 个解决方案

解决方案1
0 2020-04-02 16:34:37

表内容的换行符（引导程序）

问题描述

1 个解决方案

解决方案1 0 2020-04-02 16:34:37

解决方案1
0 2020-04-02 16:34:37