html JS.JSON.FetchingData.PopulateTable.ex4

Posted 2021-05-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html JS.JSON.FetchingData.PopulateTable.ex4相关的知识，希望对你有一定的参考价值。

function search() {

	// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open
	// Send an XhR2 query. See HTML5 games and Apps MOOC at W3Cx
	// for detailed explanation about XhR2.
	// var queryURL = "http://jsonplaceholder.typicode.com/users";
	var queryURL = "https://gist.githubusercontent.com/heiswayi/7fde241975ed8a80535a/raw/ff1caaeaf62bd6740ab7cafcd61f1215de173379/datatables-data.json";
	var xhr = new XMLHttpRequest();

	// XMLHttpRequest.open(method, url, async)
	xhr.open('GET', queryURL, true);

	xhr.onload = function (e) {

		var users = JSON.parse(xhr.response);
		displayUsersAsATable(users);
	}

	xhr.send();
}

//------------------------------
function displayUsersAsATable(users) {
	// users is a JavaScript object with a property named data
	//users = {data: [ [ ] ] }
	var data = users.data;//could have used users=users.data

	// empty the div that contains the results
	var dataDiv = document.querySelector('#data');
	dataDiv.innerHTML = "";

	//  creates the table
	var table = document.createElement('table');

	// create table header
	var header = table.insertRow();
	header.innerHTML = "<th> Name </th><th> Profession </th><th> City </th><th> Age  </th><th> Start Date </th><th> Salary </th>";

	// iterate over elements in data: single users
	data.forEach(function (currentUser) {
		
		//create row
		var row = table.insertRow();

		//nested loop / iterate over user's elements: details
		//insert cells in row
		currentUser.forEach(function (usrDetail) {
			var cell = row.insertCell();
			cell.innerHTML = usrDetail;
		});
	});

	dataDiv.appendChild(table);//append table to div
}

table {
  width:98%;
  margin:0 auto;
  border-bottom:3px #eee solid;
  border-collapse:collapse;
  font-size:12px
}
th, td {
  padding:5px 10px
}
th{
  background:#ABC668;
  color:#fff;
  border-right:1px solid #fff
}
th:last-child {
  border-right:none
     width:10%
}
 tr:nth-child(even) {
  background:#eee
}
tr:nth-child(even) th {
  background:#ddd
}
tr:hover {
  background:#F3F5BB
}
tr:hover th {
  background:#F2F684; 
  color:#1BA6B2
}
tr {
  border-top:6px solid #E9F7F6; 
  color:purple
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
table {
  width:98%;
  margin:0 auto;
  border-bottom:3px #eee solid;
  border-collapse:collapse;
  font-size:12px
}
th, td {
  padding:5px 10px
}
th{
  background:#ABC668;
  color:#fff;
  border-right:1px solid #fff
}
th:last-child {
  border-right:none
     width:10%
}
 tr:nth-child(even) {
  background:#eee
}
tr:nth-child(even) th {
  background:#ddd
}
tr:hover {
  background:#F3F5BB
}
tr:hover th {
  background:#F2F684; 
  color:#1BA6B2
}
tr {
  border-top:6px solid #E9F7F6; 
  color:purple
}


</style>
</head>
<body>
<button onclick="search();">Get remote list of data using xhr2</button>
  <div id="data"></div>
<script id="jsbin-javascript">
function search() {

	// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open
	// Send an XhR2 query. See HTML5 games and Apps MOOC at W3Cx
	// for detailed explanation about XhR2.
	// var queryURL = "http://jsonplaceholder.typicode.com/users";
	var queryURL = "https://gist.githubusercontent.com/heiswayi/7fde241975ed8a80535a/raw/ff1caaeaf62bd6740ab7cafcd61f1215de173379/datatables-data.json";
	var xhr = new XMLHttpRequest();

	// XMLHttpRequest.open(method, url, async)
	xhr.open('GET', queryURL, true);

	xhr.onload = function (e) {

		var users = JSON.parse(xhr.response);
		displayUsersAsATable(users);
	}

	xhr.send();
}

//------------------------------
function displayUsersAsATable(users) {
	// users is a JavaScript object with a property named data
	//users = {data: [ [ ] ] }
	var data = users.data;//could have used users=users.data

	// empty the div that contains the results
	var dataDiv = document.querySelector('#data');
	dataDiv.innerHTML = "";

	//  creates the table
	var table = document.createElement('table');

	// create table header
	var header = table.insertRow();
	header.innerHTML = "<th> Name </th><th> Profession </th><th> City </th><th> Age  </th><th> Start Date </th><th> Salary </th>";

	// iterate over elements in data: single users
	data.forEach(function (currentUser) {
		
		//create row
		var row = table.insertRow();

		//nested loop / iterate over user's elements: details
		//insert cells in row
		currentUser.forEach(function (usrDetail) {
			var cell = row.insertCell();
			cell.innerHTML = usrDetail;
		});
	});

	dataDiv.appendChild(table);//append table to div
}
 
</script>


<script id="jsbin-source-css" type="text/css">table {
  width:98%;
  margin:0 auto;
  border-bottom:3px #eee solid;
  border-collapse:collapse;
  font-size:12px
}
th, td {
  padding:5px 10px
}
th{
  background:#ABC668;
  color:#fff;
  border-right:1px solid #fff
}
th:last-child {
  border-right:none
     width:10%
}
 tr:nth-child(even) {
  background:#eee
}
tr:nth-child(even) th {
  background:#ddd
}
tr:hover {
  background:#F3F5BB
}
tr:hover th {
  background:#F2F684; 
  color:#1BA6B2
}
tr {
  border-top:6px solid #E9F7F6; 
  color:purple
}

</script>

<script id="jsbin-source-javascript" type="text/javascript">function search() {

	// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open
	// Send an XhR2 query. See HTML5 games and Apps MOOC at W3Cx
	// for detailed explanation about XhR2.
	// var queryURL = "http://jsonplaceholder.typicode.com/users";
	var queryURL = "https://gist.githubusercontent.com/heiswayi/7fde241975ed8a80535a/raw/ff1caaeaf62bd6740ab7cafcd61f1215de173379/datatables-data.json";
	var xhr = new XMLHttpRequest();

	// XMLHttpRequest.open(method, url, async)
	xhr.open('GET', queryURL, true);

	xhr.onload = function (e) {

		var users = JSON.parse(xhr.response);
		displayUsersAsATable(users);
	}

	xhr.send();
}

//------------------------------
function displayUsersAsATable(users) {
	// users is a JavaScript object with a property named data
	//users = {data: [ [ ] ] }
	var data = users.data;//could have used users=users.data

	// empty the div that contains the results
	var dataDiv = document.querySelector('#data');
	dataDiv.innerHTML = "";

	//  creates the table
	var table = document.createElement('table');

	// create table header
	var header = table.insertRow();
	header.innerHTML = "<th> Name </th><th> Profession </th><th> City </th><th> Age  </th><th> Start Date </th><th> Salary </th>";

	// iterate over elements in data: single users
	data.forEach(function (currentUser) {
		
		//create row
		var row = table.insertRow();

		//nested loop / iterate over user's elements: details
		//insert cells in row
		currentUser.forEach(function (usrDetail) {
			var cell = row.insertCell();
			cell.innerHTML = usrDetail;
		});
	});

	dataDiv.appendChild(table);//append table to div
}
 </script></body>
</html>

以上是关于html JS.JSON.FetchingData.PopulateTable.ex4的主要内容，如果未能解决你的问题，请参考以下文章

html JS.JSON.FetchingData.PopulateTable.ex4

html JS.JSON.FetchingData.PopulateTable.ex9

html JS.JSON.FetchingData.PopulateTable.ex8

html JS.JSON.FetchingData.PopulateTable.ex7

html JS.JSON.FetchingData.PopulateTable.ex6

html JS.JSON.FetchingData.PopulateTable.ex5