我想通过搜索栏将JS数据放在桌子上
我已经尝试将数据放在桌子上或身体上，但这没用
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>A Pen by Augusto</title>
<link rel='stylesheet' href="jquery-ui.css">
<link rel="stylesheet" href="./style.css">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CodePen - A Pen by Augusto</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<link rel="stylesheet" href="style.css">
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<h1>Table Sorter Final</h1>
<input type="search" class="light-table-filter" data-table="search-table" placeholder="Search..">
<br/>
<br/>
<div id="combito">
<div id="separator"></div>
<div class="opt-combito" id="asc">
<!-- <img src="images/hmenu-asc.gif" alt="" /> --> <!-- non utiliser -->
<span>Sort Ascending</span>
</div>
<div class="opt-combito" id="desc">
<!-- <img src="images/hmenu-desc.gif" alt="" /> --> <!-- non utiliser -->
<span>Sort Descending</span>
</div>
</div>
<table class="filter-table" style="border-spacing: 0px;">
<thead>
<tr>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<div style="width:95%"> </div>
</th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width:95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
</tr>
</thead>
</table>
<table id="table" class="sortable search-table">
<thead>
<tr>
<th id="column-a" class="menu">ID</th>
<th data-field="Name" data-checkbox="true" class="menu">Name</th>
<th data-field="Phone" data-filter-control="input" data-sortable="true" class="menu">Phone</th>
<th data-field="Email" data-filter-control="select" data-sortable="true" class="menu">Email</th>
<th data-field="City" data-filter-control="select" data-sortable="true" class="menu">City</th>
<th data-field="State" data-sortable="true" class="menu">State</th>
<th data-field="Zipcode" data-sortable="true" class="menu">Zip Code</th>
<th data-field="Status" data-sortable="true" class="menu">Status</th>
<th data-field="Vehicle" data-sortable="true" class="menu">Vehicle</th>
</tr>
</thead>
<tbody id="tbody">
<div id="tabs1" class="tabs">
</div>
</tbody>
</table>
<script src='https://codepen.io/assets/libs/fullpage/jquery_and_jqueryui.js'></script> <!-- non utiliser -->
<script src="js/index.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="./script.js"></script>
<script src="tableau.js"></script>
</body>
</html>
我的JavaScript文件：
var utilisateur = [ // donnée du tableau
{
id = '1',
Name ='Kaseem Huber',
Phone ='(587) 117-5521',
Email = '.@samecore.org',
City = 'Burlington',
State = 'DE',
ZipCode = '81070',
Status = 'Aproved',
Vehicle = 'Toyota'
},
{
id = '2',
Name ='Oleg Michael',
Phone ='(539) 184-8550',
Email = 'pages@andit.edu',
City = 'Covina',
State = 'SC',
ZipCode = '48758',
Status = 'Aproved',
Vehicle = 'Toyota'
}
];
for (let i = 0; i < 100; i++) {
var row = document.createElement("tr"); // créer le tableau
var cell0 = document.createElement("td");
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
var cell3 = document.createElement("td");
var cell4 = document.createElement("td");
var cell5 = document.createElement("td");
var cell6 = document.createElement("td");
var cell7 = document.createElement("td");
var cell8 = document.createElement("td");
cell0.innerText = utilisateur[i].id;
cell1.innerText = utilisateur[i].Name;
cell2.innerText = utilisateur[i].Phone;
cell3.innerText = utilisateur[i].Email;
cell4.innerText = utilisateur[i].City;
cell5.innerText = utilisateur[i].State;
cell6.innerText = utilisateur[i].ZipCode;
cell7.innerText = utilisateur[i].Status;
cell8.innerText = utilisateur[i].Vehicle;
row.appendChild(cell0); // afficher dans le tableau la cellule
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);
row.appendChild(cell6);
row.appendChild(cell7);
row.appendChild(cell8);
// document.getElementsById("tbody")[0].appendChild(row);
// var elem = document.getElementsById("tabs1");
// var mychild = document.getElementById("")
// elem.insertBefore(mypara, mychild);
// elem.appendChild(row);
var element = document.getElementById("tbody"); // afficher le tableau
element.appendChild(row); // afficher le tableau
}
如您所见，我使用了大量数据，但是它们不会放在我的桌子上，也不会显示在任何地方。 我已经在Internet上进行了检查，但是没有找到解决我问题的方法，也尝试了很多方法，但是没有任何改变。 如何将数据放在桌子上？