时间戳

首页 > 解决方案 > 当用户提交数据时，将用户输入的数据存储在 html 表中作为表的每一列的数组变量

javascript - 当用户提交数据时，将用户输入的数据存储在 html 表中作为表的每一列的数组变量

问题描述

我有一个包含多行的 html 表，用户可以在其中输入一些字段详细信息，例如 Sprint、Role、Project、Comments 和剩余字段 SID、当用户单击 getDetails 按钮时从后端检索项目代码...用户可以在所有字段中输入数据现有 7 行表格或只能输入几行并单击 getDetails 按钮。我想将用户为每一列输入的数据存储在一个单独的数组变量中，以便我可以将此数组传递给我的后端功能。

示例演示：https ://plnkr.co/edit/wqvUY58921gzSp1RpUqJ?p=preview

我已经看到了在表中显示数组值的示例，但我的要求是将用户输入的每列数据存储在单独的表中。示例代码：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>

        function submitData(){
          alert("submit");
        var sprintFieldArray = [];
        var roleFieldArray =[];
        var projectFieldArray = [];

        }
    </script>
</head> 
<body>

<table id="productTable" border="1">

    <tr>
        <th>Sprint <span style="color:red;">*</span></th>
        <th>Role<span style="color:red;">*</span></th>
        <th>Comments</th>
        <th>Project<span style="color:red;">*</span></th>
        <th>SID</th>
        <th>Proj Code</th>
    </tr>

    <tr>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="" required>
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
         <td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
         <td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>    
         </tr>

    <tr>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="" required>
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
         <td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
         <td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>    </tr>
        <tr>

    <tr>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="" required>
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
         <td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
         <td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>    </tr>
        <tr>

    <tr>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="" required>
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
         <td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
         <td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>    </tr>
        <tr>

    <tr>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="" required>
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
         <td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
         <td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>    </tr>
        <tr>

    <tr>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="" required>
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
         <td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
         <td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>    </tr>
        <tr>

    <tr>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="" required>
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
         <td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>
         <td><!--dynamic value is shown when user enter mandatory fields and click on getDetails button--></td>    </tr>
        <tr>

</table> <br>
<input type="submit" value="getDetails" onclick="submitData()">
</body>
</html>

如果用户仅在表中输入前 5 行信息，我想将字段 sprint、role 和 project 列的值存储在 5 行的 3 个不同变量中的数组中。

 var sprintFieldArray = [];
        var roleFieldArray =[];
        var projectFieldArray = [];

标签： javascriptjqueryhtmlarrays

解决方案

您的最终目标仍不清楚，为什么要将这些全部保存到单独的数组中，这会使值彼此分离，但是您可以。

document.getElementById('form').addEventListener(
  'submit',
  function(e){
    e.preventDefault();

    var sprintFieldArray = [];
    var roleFieldArray = [];
    var projectFieldArray = [];
    var sprints = this.getElementsByClassName('sprint');
    var roles = this.getElementsByClassName('role');
    var projects = this.getElementsByClassName('project');
    
    for (i = 0; i < sprints.length; i++) {
      var e = sprints[i];
      sprintFieldArray.push(e.options[e.selectedIndex].value)
    }

    for (i = 0; i < roles.length; i++) {
      var e = roles[i];
      roleFieldArray.push(e.value);
    }

    for (i = 0; i < projects.length; i++) {
     var e = projects[i];
      projectFieldArray.push(e.options[e.selectedIndex].value)
    }

    console.log('sprintFieldArray', sprintFieldArray);
    console.log('roleFieldArray', roleFieldArray);
    console.log('projectFieldArray', projectFieldArray);
  }
);
<form id="form">
  <section>
    <input type="text" class="role">
    <select class="sprint">
      <option value=""></option>
      <option value="121.1">121.1</option>
      <option value="121.2">121.2</option>
      <option value="121.3">121.3</option>
      <option value="122.1">122.1</option>
      <option value="122.2">122.2</option>
    </select>
    <select class="project" >
      <option value=""></option>
      <option value="ProA">ProA</option>
      <option value="ProB">ProB</option>
      <option value="ProC">ProC</option>
      <option value="ProD">ProD</option>
    </select>
  </section>
  <section>
    <input type="text" class="role">
    <select class="sprint" >
      <option value=""></option>
      <option value="121.1">121.1</option>
      <option value="121.2">121.2</option>
      <option value="121.3">121.3</option>
      <option value="122.1">122.1</option>
      <option value="122.2">122.2</option>
    </select>
    <select class="project" >
      <option value=""></option>
      <option value="ProA">ProA</option>
      <option value="ProB">ProB</option>
      <option value="ProC">ProC</option>
      <option value="ProD">ProD</option>
    </select>
  </section>
  <button type="submit">Submit</button>
</form>

推荐阅读