Display a table using HTML
Question
I'm trying to create a program but I'm having trouble creating a button that displays everything that copies to clipboard, also I'm having some trouble formatting .
I currently have 2 buttons , 1 displays the information and the other deletes the information.
Currently the code works and display the information but it displays the information horizontal , also the button for deleting works (somewhat). how can I make so it display the information horizontal ? Also how could i add a function button that copies all the information to the clipboard.
Current it displays the info as following :
Gender: First Name: Last name: Age:
how would I make it so it display the information as following:
Gender:
First Name:
Last Name:
Age:
also how could I implement a button so when I click Copy it will copy to the clipboard with the same format ?
I currently have the following Code
<!DOCTYPE html>
<html>
<body>
Gender:
<!-- Approval Request -->
<select id="mySelect">
<option value="Male">M
<option value="Female">F
</select>
<br/> First Name:
<input type="text" name="FirstName" id="FirstName" />
<br/> Last Name:
<input type="text" name="LastName" id="LastName" />
<br/> Age :
<input type="text" name="Age" id="Age" />
<button onclick="myFunction()">Clear</button>
<script>
function myFunction() {
document.getElementById("table-body").deleteRow(0);
}
</script>
<br /><br />
<input type="button" value="Add Notes +" onClick="addRow()" id="add">
<br /><br />
<table id="table" border="1">
<thead id="table-head">
<tr>
<th>Gender</th>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
<script>
function addRow() {
var tableBody = document.getElementById("table-body");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
var row = document.createElement("tr");
td1.innerHTML = document.getElementById("mySelect").value;
td2.innerHTML = document.getElementById("FirstName").value;
td3.innerHTML = document.getElementById("LastName").value;
td4.innerHTML = document.getElementById("Age").value;
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
tableBody.appendChild(row);
}
</script>
</body>
</html>
1 answers
solution1
1 2018-11-03 20:12:32
If I understood you correctly, you want the 4 data items to be in 4 different Table Rows ( <tr> ). That can be achieved by somehing like this:
<!-- ... -->
<table id="table" border="1">
<tr id="gender">
<th>Gender</th>
</tr>
<tr id="fname">
<th>First Name</th>
</tr>
<tr id="lname">
<th>Last Name</th>
</tr>
<tr id="age">
<th>Age</th>
</tr>
</table>
<script>
function addRow() {
var genderRow = document.getElementById("gender");
var fnRow = document.getElementById("fname");
var lnRow = document.getElementById("lname");
var ageRow = document.getElementById("age");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
td1.innerHTML = document.getElementById("mySelect").value;
td2.innerHTML = document.getElementById("FirstName").value;
td3.innerHTML = document.getElementById("LastName").value;
td4.innerHTML = document.getElementById("Age").value;
genderRow.appendChild(td1);
fnRow.appendChild(td2);
lnRow.appendChild(td3);
ageRow.appendChild(td4);
}
</script>
<!-- ... -->
Please note that you will need to re-write the clear function, because to my knowledge, there's no table.deleteColumn() in JavaScript (I would store td1 , td2 etc. in a global array, and delete them one-by-one in myFunction() , but there are more valid solutions to choose from)
As for the clipboard copying, I've never done anythng like that, but this answer seems useful.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.