Question

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

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

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

当前它显示如下信息：

性别：名字：姓氏：年龄：

我将如何显示它，如下所示：

性别：

名字：

姓氏：

年龄：

我又如何实现按钮，所以当我单击复制时，它将以相同格式复制到剪贴板吗？

我目前有以下代码

<!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()中将其一一删除，但还有更多有效的解决方案可供选择）

对于剪贴板复制，我从来没有做过这样的事情，但是this answer似乎很有用。

使用HTML显示表格

1 个答案: