使用HTML显示表格

Question

我正在尝试创建一个程序，但无法创建一个按钮，该按钮显示复制到剪贴板的所有内容，并且在格式化时遇到了麻烦。

我目前有2个按钮，1个显示信息，另一个按钮删除信息。

当前，该代码可以正常工作并显示信息，但是它水平显示信息，还显示删除工作的按钮（有点）。 如何使它水平显示信息？ 另外，我如何添加将所有信息复制到剪贴板的功能按钮。

当前它显示信息如下：

性别：名：姓：年龄：

我将如何使它显示如下信息：

性别：

名字：

姓：

年龄：

还应该如何实现一个按钮，以便当我单击“复制”时，它将以相同的格式复制到剪贴板？

我目前有以下代码

<!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>

Answer 1

如果我对您的理解正确，那么您希望这4个数据项位于4个不同的表行（ <tr> ）中。 可以通过以下方式实现：

        <!-- ... -->
        <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>
        <!-- ... -->

请注意，您将需要重新编写clear函数，因为据我所知，JavaScript中没有table.deleteColumn() （我会将td1 ， td2等存储在全局数组中，并逐个删除它们）在myFunction() ，但还有更多有效的解决方案可供选择）

至于剪贴板复制，我从来没有做过这样的事情，但是这个答案似乎很有用。

使用HTML显示表格

问题描述

1 个解决方案

解决方案1
1 2018-11-03 20:12:32

使用HTML显示表格

问题描述

1 个解决方案

解决方案1 1 2018-11-03 20:12:32

解决方案1
1 2018-11-03 20:12:32