В настоящее время я работаю над созданием таблицы на моем html веб-сайте. Мой код html:
<div class="table-responsive">
<table id="defect_data" border="2" cellpadding="10" class="table table-striped table-bordered">
<thead>
<tr>
<td width="5%" style="text-align: center; background-color: white">ID</td>
<td width="20%" style="text-align: center; background-color: white">First name</td>
<td width="20%" style="text-align: center; background-color: white">Last name</td>
<td width="20%" style="text-align: center; background-color: white">RFID id</td>
<td width="10%" style="text-align: center; background-color: white">Bus</td>
<td width="10%" style="text-align: center; background-color: white">Status</td>
<td width="5%" style="text-align: center; background-color:transparent">Detail</td>
</tr>
</thead>
<tr>
<td>1</td>
<td>Amy</td>
<td>Lee</td>
<td>123qwwe</td>
<td>4</td>
<td>Empty</td>
<td><form class="example" action="studentdetail.html">
<button type="submit" class="btn review">Detail</button>
</form></td>
</tr>
<td>2</td>
<td>John</td>
<td>Love</td>
<td>1xr285exca923u63</td>
<td>3</td>
<td>Empty</td>
<td><form class="example" action="studentdetail.html">
<button type="submit" class="btn review">Detail</button>
</form></td>
</tr>
</table>
</div>
Результат получился неплохо
Но когда я начинаю получать данные из хранилища, таблица не соответствует формату. Это мой javascript код
var firebaseConfig = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "...",
appId: "...",
measurementId: "..."
};
firebase.initializeApp(firebaseConfig);
var firestore = firebase.firestore();
const s = firestore.collection("Student");
s.get().then((snapshot) => {
snapshot.docs.forEach(doc => {
renderAccount(doc);
});
});
const accountList = document.querySelector('#defect_data') ;
function renderAccount(doc){
let tr = document.createElement('tr');
let td_id = document.createElement('td');
let td_first_name = document.createElement('td');
let td_last_name = document.createElement('td');
let td_rfid_id = document.createElement('td');
let td_bus = document.createElement('td');
let td_status = document.createElement('td');
td_id.textContent = doc.data().ID;
td_first_name.textContent = doc.data().firstName;
td_last_name.textContent = doc.data().lastName;
td_rfid_id.textContent = doc.data().tagID;
td_bus.textContent = doc.data().busID;
td_status.textContent = doc.data().status;
tr.appendChild(td_id);
tr.appendChild(td_first_name);
tr.appendChild(td_last_name);
tr.appendChild(td_rfid_id);
tr.appendChild(td_bus);
tr.appendChild(td_status);
accountList.appendChild(tr);
}
$('#defect_data').DataTable({
dom: 'lBfrtip',
buttons: [
],
});
И результат как ......
пожалуйста, помогите мне получить результат, как пи c 1. Большое спасибо