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>

score 1 · Answer 1 · answered Nov 03 '18 at 20:12

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.

How would I changed it so I can store the content in an array and be able to remove the inputs ? — Cris, Nov 07 '18 at 02:47

Display a table using HTML

1 Answers1