时间戳

首页 > 解决方案 > 表格内容的换行符（引导程序）

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

问题描述

初学者 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>

标签： javascripthtmlcsshtml-tablefetch

解决方案

如果我正确理解您的问题，您是否尝试通过连续调用为您获取新结果的 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 = tempfor .insertAdjacentHTML("beforeend", temp);。这会附加 temp 变量的内容，而不是将 #data 的 html 替换为 temp 的值。

编辑：根据 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>

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

推荐阅读