перевод строки на содержимое таблицы (bootstrap) - PullRequest
Новая
       38

перевод строки на содержимое таблицы (bootstrap)

0 голосов
/ 02 апреля 2020

начинающий 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>

1 Ответ

0 голосов
/ 02 апреля 2020

Если я правильно понимаю ваш вопрос, вы пытаетесь добавить значения в таблицу с помощью последовательных вызовов функции 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);. Это добавляет содержимое переменной temp вместо замены html of #data значением temp.

EDIT: изменение макета таблицы в соответствии с адаптивными таблицами в 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>

Здесь я настроил скрипку с простой демонстрацией без bootstrap базовой демонстрации

...