时间戳

首页 > 解决方案 > 如何使用 JS 将表单中的多个输入显示/打印为表格？

javascript - 如何使用 JS 将表单中的多个输入显示/打印为表格？

问题描述

背景：

我有以下表格。点击 [验证] 按钮后，我只能显示 1 个“名字”。当 [verify] 被按下为表格时，我想打印出所有输入字段（空或完整）。

研究：

问题：

  1. 如何将表单的输入打印为如下表格：

在此处输入图像描述

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        document.getElementById("verify").style.display = "none"; 
        document.getElementById("committed").style.display = "none"; 
    })
    function onVerify() {
        document.getElementById("verifyName").innerHTML = 'First Name: ' + document.getElementById("first_name").value

        document.getElementById("verify").style.display = "block"; 
    }
    function onCommit() {
        document.getElementById("form").style.display = "none"; 
        document.getElementById("verify").style.display = "none";
        document.getElementById("committed").style.display = "block"; 
    }
    function onCancel() {
        document.getElementById("form").style.display = "block";
        document.getElementById("verify").style.display = "none";
        document.getElementById("name").value = ""
    }
</script>


    <style>
        h3 {text-align: center;}
        .right {
            text-align: right;
            margin-right: 1em;
            }
        .center {
            display: flex;
            justify-content: center;
            align-items: center;
            }
    </style>

</head>

<h3>Personnel Details</h3>
<div class="center" id="form">
	<table>
    <tr>
      <td class="right">
	      <label>Salutation:</label>
      </td>
      <td>
        <select name="gender">
          <option value=""></option>
          <option value="male">Mr.</option>
          <option value="female">Ms.</option>                    
        </select>
      </td>
    </tr>
    <tr>
      <td class="right">
	      <label>First Name:</label>
      </td>
      <td>
    	  <input id="first_name">
      </td>
    </tr>
    <tr>
      <td class="right">
    	  <label>Middle Name:</label>
      </td>
      <td>
          <input id="middle_name">
      </td>    
	</tr>
    <tr>
      <td class="right">
    	  <label>Last Name:</label>
      </td>
      <td>
          <input id="last_name">
      </td>    
	</tr>
    <tr>
      <td class="right">
    	  <label>Email:</label>
      </td>
      <td>
          <input id="email">
      </td>    
	</tr>    <tr>
      <td class="right">
    	  <label>DOB:</label>
      </td>
      <td>
          <input type="date" name="issue_date" value="" min="1900-01-01" max="2100-12-31">
      </td>    
	</tr>         
    <tr>
      <td  colspan="2" style="text-align:center;">
        <div>
            <button onclick="onVerify()">Verify</button>
        </div>
      </td>
    </tr>
    
    
    
    </table>
</div>
<div id="verify">
    <br>
    <br>
    <div id="verifyName" class="center">
    </div>
    <div class="center">    
      <button  onclick="onCommit()">Commit</button>
      <button  onclick="onCancel()">Cancel</button>
   </div>

</div>
<div id="committed">
    Committed! :)
</div>
</html>

标签： javascripthtmlhtml-table

解决方案

我用javascript选择了每个输入。我在 Input 中取值并将它们作为 innerHtml 发送到我在 html 中创建的表中。这是您可以并且可以使用它的最简单的方法。我刚刚写的所有内容都在评论行中说明了。

我添加了一些 css 属性，以便两个表可以以相同的顺序排列。这样，即使它们是空的，它们也会站在同一行。

事实上，我已经添加了我所做的每一个更改和任务作为注释行。祝你好运！

h3 {
  text-align: center;
}

.right {
  text-align: right;
  padding-right: 1em;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* I added this because I want two paintings to come down.*/
}

tr> :nth-child(2) {
  /* with this, all the fields will now have a fixed width and will be sorted into two tables.*/
  min-width: 10rem;
}

.verify {
  /* I added this because the column is set to flex-direction for the center class.*/
  display: flex;
  justify-content: center;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>STACKOVERFLOW</title>
</head>


<body>

  <h3>Personnel Details</h3>
  <div class="center" id="form">
    <table>
      <tr>
        <td class="right">
          <label>Salutation:</label>
        </td>
        <td>
          <select name="gender" id="salutation">
            <option value=""></option>
            <option value="male">Mr.</option>
            <option value="female">Ms.</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>First Name:</label>
        </td>
        <td>
          <input id="first_name" type="text">
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>Middle Name:</label>
        </td>
        <td>
          <input id="middle_name" type="text">
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>Last Name:</label>
        </td>
        <td>
          <input id="last_name" type="text">
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>Email:</label>
        </td>
        <td>
          <input id="email" type="email">
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>DOB:</label>
        </td>
        <td>
          <input type="date" name="issue_date" value="" min="1900-01-01" max="2100-12-31" id="date">
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align:center;">
          <div>
            <button onclick="onVerify()">Verify</button>
          </div>
        </td>
      </tr>



    </table>
    <!-- Created -->
    <table id="table-output">
      <!-- Dynamicly Cretaed for javascript -->
    </table>
  </div>

  <div id="verify">
    <br>
    <br>
    <div id="verifyName" class="center">
    </div>
    <div class="verify">
      <!-- Changed center to verify  -->
      <button onclick="onCommit()">Commit</button>
      <button onclick="onCancel()">Cancel</button>
    </div>

  </div>
  <div id="committed">
    Committed! :)
  </div>




  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>



  <script>
    $(document).ready(function() {
      document.getElementById("verify").style.display = "none";
      document.getElementById("committed").style.display = "none";
    })

    function onVerify() {
      document.getElementById("verifyName").innerHTML = 'First Name: ' + document.getElementById("first_name").value

      document.getElementById("verify").style.display = "block";
      getAllValues(); //  I'm running this function here because I want to see the table after verify is done.

    }

    function onCommit() {
      document.getElementById("form").style.display = "none";
      document.getElementById("verify").style.display = "none";
      document.getElementById("committed").style.display = "block";
    }

    function onCancel() {
      document.getElementById("form").style.display = "block";
      document.getElementById("verify").style.display = "none";
      document.getElementById("name").value = ""
    }

    //  I take value from all the inputs in my table and send it to another function. I suggest you divide your operations into functions, so that you can be more comfortable when you want to modify them, since they're all in the clear.
    function getAllValues() {
      const salutation = document.getElementById("salutation").value;
      const firstName = document.getElementById("first_name").value;
      const lastName = document.getElementById("last_name").value;
      const middleName = document.getElementById("middle_name").value;
      const email = document.getElementById("email").value;
      const date = document.getElementById("date").value;
      // Formating DATE
      let newDate = date.split("-").reverse().join(".");
      showTable(salutation, firstName, lastName, middleName, email, newDate);
    }


    // this function will select the second table that we have defined on the html side and display on the screen, and place the value values that we have received according to what structure we want.
    function showTable(salutation, firstName, lastName, middleName, email, date)  {
      let table = document.getElementById("table-output");
      table.innerHTML = ` 
       
      <tr>
        <td class="right">
          <label>Salutation:</label>
        </td>
        <td>
            ${salutation}
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>First Name:</label>
        </td>
        <td>
          ${firstName}
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>Middle Name:</label>
        </td>
        <td>
          ${lastName}
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>Last Name:</label>
        </td>
        <td>
          ${middleName}
        </td>
      </tr>
      <tr>
        <td class="right">
          <label>Email:</label>
        </td>
        <td>
          ${email}

        </td>
      </tr>
      <tr>
        <td class="right">
          <label>DOB:</label>
        </td>
        <td>
          ${date}
        </td>
      </tr>
      
       
       `


    }
  </script>

  <!-- JAVASCRIPT -->

</body>

</html>

推荐阅读