如何让我的按钮更新正确的 table 行值
How Can I Make My Button To Update Correct table Row Values
我刚刚完成了 JavaScript DOM 操作，但我发现无论我要编辑哪一行，都只会更新最后一行。完整的代码托管在这里：https://github.com/Alekz19/ncdc-project
//Function that edit any row being clicked (Works well)
function edit() {
submit.style.display = "none";
update.style.display = "block";
for (let i = 0; i < rows.length; i++) {
rows[i].onclick = function editBtn() {
rIndex = this.rowIndex;
let name = this.cells[0].innerHTML,
fullName = name.split(" "),
fName = fullName[0],
lName = fullName[1],
f1 = document.getElementById('fname-2'),
f2 = document.getElementById('lname-2'),
f3 = document.getElementById('email-2'),
f4 = document.getElementById('gender-2');
f1.value = fName;
f2.value = lName;
f3.value = this.cells[1].innerHTML;
f4.value = this.cells[2].innerHTML;
};
//function that update form data in the table
(updating last rows only instead of the specific one)
update.onsubmit = function updateData() {
update.style.display = "none";
submit.style.display = "block";
rows[i].cells[0].innerHTML =
document.getElementById('fname-2').value + " " +
document.getElementById('lname-2').value;
rows[i].cells[1].innerHTML =
document.getElementById('email-2').value;
rows[i].cells[2].innerHTML =
document.getElementById('gender-2').value;
rows[i].cells[3].innerHTML =
document.getElementById('checkBox').value;
rows[i].cells[4].innerHTML = "<input type='button'
class='edit-button' value='Edit' onclick='edit(this)'>";
rows[i].cells[5].innerHTML = "<input type='button'
class='delete-button' value='Delete'
onclick='delBtn(this)'>";
return false;
};
};
}
当您调用编辑函数时，向其中传递一个事件：
function edit(event) {
click事件会被点击的按钮，然后找parent的parent得到被点击的行按钮：
event.parentElement.parentElement.
并使用它来更新正确的行：
update.onsubmit = function updateData() {
update.style.display = "none";
submit.style.display = "block";
event.parentElement.parentElement.cells[0].innerHTML = document.getElementById('fname-2').value + " " + document.getElementById('lname-2').value;
event.parentElement.parentElement.cells[1].innerHTML = document.getElementById('email-2').value;
event.parentElement.parentElement.cells[2].innerHTML = document.getElementById('gender-2').value;
event.parentElement.parentElement.cells[3].innerHTML = document.getElementById('checkBox').value;
return false;
};
请注意，更新时不需要此处的按钮。
编辑：
我不应该修复你的整个代码，我向你展示了如何获得正确的行，这是问题所在，而不是这个...
不要使用这个：
let status = document.getElementById("checkBox");
status.onchange = function checkBoxStatus() {
if (status.checked) {
document.getElementById("checkBox").value = "Yes";
} else {
document.getElementById("checkBox").value = "No";
}
使用这个：
function checkBoxStatus(event) {
if (event.checked) {
event.value = "Yes";
} else {
event.value = "No";
}
您正在使用内联 HTML on-change，不需要另一个。
在 HTML 中的两个复选框输入上，您有两个，checkbox 和 checkBox2 onchange="checkBoxStatus(this)" 并且仅针对事件设置单击事件的值。
而且 checkBoxStatus 和 checkboxStatus 不一样，请检查您的拼写错误！
您还必须根据来自 table 的值编辑设置您的 (OTHER) 复选框 checkBox2:
if (event.parentElement.parentElement.cells[3].innerHTML === "No") {
document.getElementById('checkBox2').checked = false;
} else {
document.getElementById('checkBox2').checked = true;
}
并在其编辑后（它将调用 function checkBoxStatus(event)）设置要提交的正确的：
event.parentElement.parentElement.cells[3].innerHTML = document.getElementById('checkBox2').value;
片段已更新，所有内容均已修复...
工作示例：
let rIndex;
const dataTable = document.getElementById('database'),
submit = document.getElementById("data"),
update = document.getElementById("data-2");
let rows = dataTable.children[1].getElementsByTagName('tr');
//function that activate the checkbox status
function checkBoxStatus(event) {
if (event.checked) {
event.value = "Yes";
} else {
event.value = "No";
}
}
//Page Date and Time Function
function currentDate() {
let showDate = document.getElementById('showDate'),
d = new Date(),
days = ["Sun,", "Mon,", "Tue,", "Wed,", "Thu,", "Fri,", "Sat,"],
today = days[d.getDay()],
months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
thisMonth = months[d.getMonth()],
date = d.getDate(),
year = d.getFullYear(),
hour = d.getHours(),
minute = d.getMinutes(),
second = d.getSeconds(),
meridian;
if (hour >= 12) {
meridian = "PM";
} else {
meridian = "AM";
}
if (hour === 0) {
hour = 12;
}
if (hour >= 13 && hour <= 21 || hour > 21) {
hour = (hour - 12);
}
if (hour < 10) {
hour = "0" + hour;
}
if (second < 10) {
second = "0" + second;
}
if (minute < 10) {
minute = "0" + minute;
}
showDate.textContent = today + " " + thisMonth + " " + date + " " + year + ". " + hour + ":" + minute + ":" + second + " " + meridian;
const t = setTimeout(function() {
currentDate();
}, 1000);
}
currentDate();
//function that shows the submit form data in the table
function showData() {
let tableRows = document.createElement('tr'),
td1 = document.createElement('td'),
td2 = document.createElement('td'),
td3 = document.createElement('td'),
td4 = document.createElement('td'),
td5 = document.createElement('td'),
td6 = document.createElement('td');
td1.innerHTML = document.getElementById('fname').value + " " + document.getElementById('lname').value;
td2.innerHTML = document.getElementById('email').value;
td3.innerHTML = document.getElementById('gender').value;
td4.innerHTML = document.getElementById("checkBox").value;
td5.innerHTML = "<input type='button' class='edit-button' value='Edit' onclick='edit(this)'>";
td6.innerHTML = "<input type='button' class='delete-button' value='Delete' onclick='delBtn(this)'>";
tableRows.appendChild(td1);
tableRows.appendChild(td2);
tableRows.appendChild(td3);
tableRows.appendChild(td4);
tableRows.appendChild(td5);
tableRows.appendChild(td6);
submit.reset();
dataTable.children[1].insertBefore(tableRows, dataTable.children[0].childNodes[tableRows.length]);
return false;
};
//Function that edit any row being clicked
function edit(event) {
if (event.parentElement.parentElement.cells[3].innerHTML === "No") {
document.getElementById('checkBox2').checked = false;
} else {
document.getElementById('checkBox2').checked = true;
}
submit.style.display = "none";
update.style.display = "block";
for (let i = 0; i < rows.length; i++) {
rows[i].onclick = function editBtn() {
rIndex = this.rowIndex;
let name = this.cells[0].innerHTML,
fullName = name.split(" "),
fName = fullName[0],
lName = fullName[1],
f1 = document.getElementById('fname-2'),
f2 = document.getElementById('lname-2'),
f3 = document.getElementById('email-2'),
f4 = document.getElementById('gender-2');
f1.value = fName;
f2.value = lName;
f3.value = this.cells[1].innerHTML;
f4.value = this.cells[2].innerHTML;
};
//function that update form data in the table
update.onsubmit = function updateData() {
update.style.display = "none";
submit.style.display = "block";
event.parentElement.parentElement.cells[0].innerHTML = document.getElementById('fname-2').value + " " + document.getElementById('lname-2').value;
event.parentElement.parentElement.cells[1].innerHTML = document.getElementById('email-2').value;
event.parentElement.parentElement.cells[2].innerHTML = document.getElementById('gender-2').value;
event.parentElement.parentElement.cells[3].innerHTML = document.getElementById('checkBox2').value;
return false;
};
};
}
//Function that delete any row being clicked
function delBtn(r) {
var del = r.parentNode.parentNode.rowIndex;
dataTable.deleteRow(del);
};
body {
min-height: 800px
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>NCDC Database</title>
<style>
body {
margin: 0;
}
fieldset {
background-image: url('corona.jpg');
width: 95%;
margin: 10px auto;
}
legend {
text-align: center;
border: 1px solid black;
}
#data {
margin: 10px 20px;
width: 95%;
padding: 15px;
border: 1px solid #ccc;
border-radius: 0.5em;
display: block;
}
#data-2 {
margin: 10px 20px;
width: 95%;
padding: 15px;
border: 1px solid #CCC;
border-radius: 0.5em;
display: none;
}
form div {
margin-top: 15px;
}
label {
display: inline-block;
margin-left: 20px;
width: 100px;
}
label.gender {
width: 80px;
margin-left: 20px;
}
input[type=text],
input[type=email] {
font: 16px sans-serif;
width: 250px;
padding-left: 10px;
margin-left: 20px;
height: 35px;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #999;
}
input[type=checkbox] {
height: 14px;
margin-left: 55px;
}
.checklabel {
font: 14px sans-serif;
display: inline;
margin-left: 5px;
}
input[type=button] {
width: 70px;
padding: 0 5px;
}
.submitbutton {
background-color: black;
border-radius: 10%;
color: white;
width: 100px;
margin: 10px 0 5px 100px;
}
input:focus {
border-color: #999;
}
#table-container {
width: 100%;
margin-left: 20px;
}
#edit-container {
display: block;
}
table {
border-spacing: 10px;
margin-top: 50px;
width: 98%;
border-collapse: collapse;
}
th {
background-color: #ccc;
margin: 0 -20px;
text-align: center;
padding: 10px;
}
tr:nth-child(even) {
background-color: #fdedec;
}
td {
padding: 8px;
text-align: center;
}
#showDate {
background-color: black;
margin-left: 50px;
word-spacing: 2px;
color: white;
padding: 0 5px;
font-style: italic;
font-weight: bolder;
}
</style>
</head>
<body>
<div id="form-container">
<form id="data" onsubmit="return showData()">
<fieldset>
<legend>Covid-19 Database<span id="showDate"></span>
</legend>
<div>
<label for "First Name">First Name: </label> <input id="fname" class="first_name" name="firstName" type="text" placeholder="Enter your first name here" required>
</div>
<div>
<label for "Last Name">Last Name: </label> <input id="lname" class="last_name" name="lastName" type="text" placeholder="Enter your last name here" required>
</div>
<div>
<label for "Email">Email: </label> <input id="email" class="mail" name="email" type="email" placeholder=" Enter your email address here" required>
</div>
<div>
<label for "Gender" class="gender">Gender: </label>
<select id="gender" required>
<option value="" disabled selected>Select your Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div>
<input type="checkbox" name="check" id="checkBox" class="check_box" checked value="Yes" onchange="checkBoxStatus(this)">
<label for="checkBox" class="checklabel"> Recently came into Nigeria within the last 14 days?</label>
</div>
<div>
<input type="submit" class="submitbutton" value="Submit">
</div>
</fieldset>
</form>
<form id="data-2" onsubmit="return updateData()">
<fieldset>
<legend>Covid-19 Database</legend>
<div>
<label for "First Name">First Name: </label> <input id="fname-2" class="first_name" name="firstName" type="text" placeholder="Enter your first name here" required>
</div>
<div>
<label for "Last Name">Last Name: </label> <input id="lname-2" class="last_name" name="lastName" type="text" placeholder="Enter your last name here" required>
</div>
<div>
<label for "Email">Email: </label> <input id="email-2" class="mail" name="email" type="email" placeholder=" Enter your email address here" required>
</div>
<div>
<label for "Gender" class="gender">Gender: </label>
<select id="gender-2" required>
<option value="" disabled selected>Select your Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div>
<input type="checkbox" name="check" id="checkBox2" class="check_box" checked value="Yes" onchange="checkBoxStatus(this)">
<label for="checkBox-2" class="checklabel"> Recently came into Nigeria within the last 14 days?</label>
</div>
<div>
<input type="submit" class="submitbutton" value="Update">
</div>
</fieldset>
</form>
</div>
<div id="table-container">
<table id="database" border="1">
<thead>
<tr>
<th width="20%">Name</th>
<th>Email Address</th>
<th>Gender</th>
<th>Came to Nigeria within the last 14 days?</th>
<th colspan='2'>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
我刚刚完成了 JavaScript DOM 操作，但我发现无论我要编辑哪一行，都只会更新最后一行。完整的代码托管在这里：https://github.com/Alekz19/ncdc-project
//Function that edit any row being clicked (Works well)
function edit() {
submit.style.display = "none";
update.style.display = "block";
for (let i = 0; i < rows.length; i++) {
rows[i].onclick = function editBtn() {
rIndex = this.rowIndex;
let name = this.cells[0].innerHTML,
fullName = name.split(" "),
fName = fullName[0],
lName = fullName[1],
f1 = document.getElementById('fname-2'),
f2 = document.getElementById('lname-2'),
f3 = document.getElementById('email-2'),
f4 = document.getElementById('gender-2');
f1.value = fName;
f2.value = lName;
f3.value = this.cells[1].innerHTML;
f4.value = this.cells[2].innerHTML;
};
//function that update form data in the table
(updating last rows only instead of the specific one)
update.onsubmit = function updateData() {
update.style.display = "none";
submit.style.display = "block";
rows[i].cells[0].innerHTML =
document.getElementById('fname-2').value + " " +
document.getElementById('lname-2').value;
rows[i].cells[1].innerHTML =
document.getElementById('email-2').value;
rows[i].cells[2].innerHTML =
document.getElementById('gender-2').value;
rows[i].cells[3].innerHTML =
document.getElementById('checkBox').value;
rows[i].cells[4].innerHTML = "<input type='button'
class='edit-button' value='Edit' onclick='edit(this)'>";
rows[i].cells[5].innerHTML = "<input type='button'
class='delete-button' value='Delete'
onclick='delBtn(this)'>";
return false;
};
};
}
当您调用编辑函数时，向其中传递一个事件：
function edit(event) {
click事件会被点击的按钮，然后找parent的parent得到被点击的行按钮：
event.parentElement.parentElement.
并使用它来更新正确的行：
update.onsubmit = function updateData() {
update.style.display = "none";
submit.style.display = "block";
event.parentElement.parentElement.cells[0].innerHTML = document.getElementById('fname-2').value + " " + document.getElementById('lname-2').value;
event.parentElement.parentElement.cells[1].innerHTML = document.getElementById('email-2').value;
event.parentElement.parentElement.cells[2].innerHTML = document.getElementById('gender-2').value;
event.parentElement.parentElement.cells[3].innerHTML = document.getElementById('checkBox').value;
return false;
};
请注意，更新时不需要此处的按钮。
编辑： 我不应该修复你的整个代码，我向你展示了如何获得正确的行，这是问题所在，而不是这个...
不要使用这个：
let status = document.getElementById("checkBox");
status.onchange = function checkBoxStatus() {
if (status.checked) {
document.getElementById("checkBox").value = "Yes";
} else {
document.getElementById("checkBox").value = "No";
}
使用这个：
function checkBoxStatus(event) {
if (event.checked) {
event.value = "Yes";
} else {
event.value = "No";
}
您正在使用内联 HTML on-change，不需要另一个。
在 HTML 中的两个复选框输入上，您有两个，checkbox 和 checkBox2 onchange="checkBoxStatus(this)" 并且仅针对事件设置单击事件的值。
而且 checkBoxStatus 和 checkboxStatus 不一样，请检查您的拼写错误！
您还必须根据来自 table 的值编辑设置您的 (OTHER) 复选框 checkBox2:
if (event.parentElement.parentElement.cells[3].innerHTML === "No") {
document.getElementById('checkBox2').checked = false;
} else {
document.getElementById('checkBox2').checked = true;
}
并在其编辑后（它将调用 function checkBoxStatus(event)）设置要提交的正确的：
event.parentElement.parentElement.cells[3].innerHTML = document.getElementById('checkBox2').value;
片段已更新，所有内容均已修复...
工作示例：
let rIndex;
const dataTable = document.getElementById('database'),
submit = document.getElementById("data"),
update = document.getElementById("data-2");
let rows = dataTable.children[1].getElementsByTagName('tr');
//function that activate the checkbox status
function checkBoxStatus(event) {
if (event.checked) {
event.value = "Yes";
} else {
event.value = "No";
}
}
//Page Date and Time Function
function currentDate() {
let showDate = document.getElementById('showDate'),
d = new Date(),
days = ["Sun,", "Mon,", "Tue,", "Wed,", "Thu,", "Fri,", "Sat,"],
today = days[d.getDay()],
months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
thisMonth = months[d.getMonth()],
date = d.getDate(),
year = d.getFullYear(),
hour = d.getHours(),
minute = d.getMinutes(),
second = d.getSeconds(),
meridian;
if (hour >= 12) {
meridian = "PM";
} else {
meridian = "AM";
}
if (hour === 0) {
hour = 12;
}
if (hour >= 13 && hour <= 21 || hour > 21) {
hour = (hour - 12);
}
if (hour < 10) {
hour = "0" + hour;
}
if (second < 10) {
second = "0" + second;
}
if (minute < 10) {
minute = "0" + minute;
}
showDate.textContent = today + " " + thisMonth + " " + date + " " + year + ". " + hour + ":" + minute + ":" + second + " " + meridian;
const t = setTimeout(function() {
currentDate();
}, 1000);
}
currentDate();
//function that shows the submit form data in the table
function showData() {
let tableRows = document.createElement('tr'),
td1 = document.createElement('td'),
td2 = document.createElement('td'),
td3 = document.createElement('td'),
td4 = document.createElement('td'),
td5 = document.createElement('td'),
td6 = document.createElement('td');
td1.innerHTML = document.getElementById('fname').value + " " + document.getElementById('lname').value;
td2.innerHTML = document.getElementById('email').value;
td3.innerHTML = document.getElementById('gender').value;
td4.innerHTML = document.getElementById("checkBox").value;
td5.innerHTML = "<input type='button' class='edit-button' value='Edit' onclick='edit(this)'>";
td6.innerHTML = "<input type='button' class='delete-button' value='Delete' onclick='delBtn(this)'>";
tableRows.appendChild(td1);
tableRows.appendChild(td2);
tableRows.appendChild(td3);
tableRows.appendChild(td4);
tableRows.appendChild(td5);
tableRows.appendChild(td6);
submit.reset();
dataTable.children[1].insertBefore(tableRows, dataTable.children[0].childNodes[tableRows.length]);
return false;
};
//Function that edit any row being clicked
function edit(event) {
if (event.parentElement.parentElement.cells[3].innerHTML === "No") {
document.getElementById('checkBox2').checked = false;
} else {
document.getElementById('checkBox2').checked = true;
}
submit.style.display = "none";
update.style.display = "block";
for (let i = 0; i < rows.length; i++) {
rows[i].onclick = function editBtn() {
rIndex = this.rowIndex;
let name = this.cells[0].innerHTML,
fullName = name.split(" "),
fName = fullName[0],
lName = fullName[1],
f1 = document.getElementById('fname-2'),
f2 = document.getElementById('lname-2'),
f3 = document.getElementById('email-2'),
f4 = document.getElementById('gender-2');
f1.value = fName;
f2.value = lName;
f3.value = this.cells[1].innerHTML;
f4.value = this.cells[2].innerHTML;
};
//function that update form data in the table
update.onsubmit = function updateData() {
update.style.display = "none";
submit.style.display = "block";
event.parentElement.parentElement.cells[0].innerHTML = document.getElementById('fname-2').value + " " + document.getElementById('lname-2').value;
event.parentElement.parentElement.cells[1].innerHTML = document.getElementById('email-2').value;
event.parentElement.parentElement.cells[2].innerHTML = document.getElementById('gender-2').value;
event.parentElement.parentElement.cells[3].innerHTML = document.getElementById('checkBox2').value;
return false;
};
};
}
//Function that delete any row being clicked
function delBtn(r) {
var del = r.parentNode.parentNode.rowIndex;
dataTable.deleteRow(del);
};
body {
min-height: 800px
}
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>NCDC Database</title>
<style>
body {
margin: 0;
}
fieldset {
background-image: url('corona.jpg');
width: 95%;
margin: 10px auto;
}
legend {
text-align: center;
border: 1px solid black;
}
#data {
margin: 10px 20px;
width: 95%;
padding: 15px;
border: 1px solid #ccc;
border-radius: 0.5em;
display: block;
}
#data-2 {
margin: 10px 20px;
width: 95%;
padding: 15px;
border: 1px solid #CCC;
border-radius: 0.5em;
display: none;
}
form div {
margin-top: 15px;
}
label {
display: inline-block;
margin-left: 20px;
width: 100px;
}
label.gender {
width: 80px;
margin-left: 20px;
}
input[type=text],
input[type=email] {
font: 16px sans-serif;
width: 250px;
padding-left: 10px;
margin-left: 20px;
height: 35px;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #999;
}
input[type=checkbox] {
height: 14px;
margin-left: 55px;
}
.checklabel {
font: 14px sans-serif;
display: inline;
margin-left: 5px;
}
input[type=button] {
width: 70px;
padding: 0 5px;
}
.submitbutton {
background-color: black;
border-radius: 10%;
color: white;
width: 100px;
margin: 10px 0 5px 100px;
}
input:focus {
border-color: #999;
}
#table-container {
width: 100%;
margin-left: 20px;
}
#edit-container {
display: block;
}
table {
border-spacing: 10px;
margin-top: 50px;
width: 98%;
border-collapse: collapse;
}
th {
background-color: #ccc;
margin: 0 -20px;
text-align: center;
padding: 10px;
}
tr:nth-child(even) {
background-color: #fdedec;
}
td {
padding: 8px;
text-align: center;
}
#showDate {
background-color: black;
margin-left: 50px;
word-spacing: 2px;
color: white;
padding: 0 5px;
font-style: italic;
font-weight: bolder;
}
</style>
</head>
<body>
<div id="form-container">
<form id="data" onsubmit="return showData()">
<fieldset>
<legend>Covid-19 Database<span id="showDate"></span>
</legend>
<div>
<label for "First Name">First Name: </label> <input id="fname" class="first_name" name="firstName" type="text" placeholder="Enter your first name here" required>
</div>
<div>
<label for "Last Name">Last Name: </label> <input id="lname" class="last_name" name="lastName" type="text" placeholder="Enter your last name here" required>
</div>
<div>
<label for "Email">Email: </label> <input id="email" class="mail" name="email" type="email" placeholder=" Enter your email address here" required>
</div>
<div>
<label for "Gender" class="gender">Gender: </label>
<select id="gender" required>
<option value="" disabled selected>Select your Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div>
<input type="checkbox" name="check" id="checkBox" class="check_box" checked value="Yes" onchange="checkBoxStatus(this)">
<label for="checkBox" class="checklabel"> Recently came into Nigeria within the last 14 days?</label>
</div>
<div>
<input type="submit" class="submitbutton" value="Submit">
</div>
</fieldset>
</form>
<form id="data-2" onsubmit="return updateData()">
<fieldset>
<legend>Covid-19 Database</legend>
<div>
<label for "First Name">First Name: </label> <input id="fname-2" class="first_name" name="firstName" type="text" placeholder="Enter your first name here" required>
</div>
<div>
<label for "Last Name">Last Name: </label> <input id="lname-2" class="last_name" name="lastName" type="text" placeholder="Enter your last name here" required>
</div>
<div>
<label for "Email">Email: </label> <input id="email-2" class="mail" name="email" type="email" placeholder=" Enter your email address here" required>
</div>
<div>
<label for "Gender" class="gender">Gender: </label>
<select id="gender-2" required>
<option value="" disabled selected>Select your Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div>
<input type="checkbox" name="check" id="checkBox2" class="check_box" checked value="Yes" onchange="checkBoxStatus(this)">
<label for="checkBox-2" class="checklabel"> Recently came into Nigeria within the last 14 days?</label>
</div>
<div>
<input type="submit" class="submitbutton" value="Update">
</div>
</fieldset>
</form>
</div>
<div id="table-container">
<table id="database" border="1">
<thead>
<tr>
<th width="20%">Name</th>
<th>Email Address</th>
<th>Gender</th>
<th>Came to Nigeria within the last 14 days?</th>
<th colspan='2'>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>