Question

我正在尝试做这个简单的事情，但我需要避免使用除html，css和普通javaScript之外的任何东西。

我有名字文本框和一个下拉菜单的模态。在主页面上，我有一个包含3列的html表：创建日期，名称和测试。

当我单击页面顶部的“添加新项”按钮时，弹出模式，我希望能够在表单控件中输入值，单击“保存”按钮并在表格中显示这些值。

我知道如何使用jQuery或其他更现代的技术来做到这一点，但不允许这样做。所以我需要帮助回到基础。

这是我的代码：

<html>
<head>
    <title>Battery Test App</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button id="btnAddNew">Add new</button>
<br>
<br>
<table border="1">
  <tr>
    <th>Date Created</th>
    <th>Name</th>
    <th>Tests</th>
  </tr>
</table>
<div id="modalAddNewTest" class="modal">
  <div class="modal-content">
    <span class="close">x</span>
    <form name="formTestInfo" method="post">
      Name:<br>
        <input type="text" name="tbName">
        <p id="nameVal"></p>
        <br>
        <br>
      Test:<br>
        <select>
          <option value="belbin">Belbin</option>
          <option value="raven">Raven</option>
          <option value="ppa">PPA</option>
          <option value="ppaPlus">PPA+</option>
          <option value="basicKnowledge">Basic Knowledge</option>
          <option value="pct">PCT</option>
        </select>
        <br>
        <br>
        <button id="btnCancel">Cancel</button>
        <button id="btnSave" onclick="validateForm()">Save</button>
    </form>
  </div>
</div>

<script>
  var nameValidation;
  var modal = document.getElementById('modalAddNewTest');
  var btn = document.getElementById("btnAddNew");
  var span = document.getElementsByClassName("close")[0];

  btn.onclick = function() {
      modal.style.display = "block";
  }

  span.onclick = function() {
      modal.style.display = "none";
  }

  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }

  function validateForm() {
    var x = document.forms["formTestInfo"]["tbName"].value;
    if (x == null || x == "") {
        nameValidation = "Name must be filled out";
        document.getElementById("nameVal").innerHTML = nameValidation;
        return false;
    }
}
</script>
</body>
</html>

Answer 1

为表格分配ID

<table border="1" id="myTable">
  <tr>
    <th>Date Created</th>
    <th>Name</th>
    <th>Tests</th>
  </tr>
</table>

现在在您的validateForm函数中，您正在检查表单是否有效。一旦表单有效，将表单输入中输入的值分配给表，如下所示。

     function validateForm() {
        var x = document.forms["formTestInfo"]["tbName"].value;
        if (x == null || x == "") {
            nameValidation = "Name must be filled out";
            document.getElementById("nameVal").innerHTML = nameValidation;
            return false;
        }
        else
        {
            var table = document.getElementById("myTable");

         //In the first step using InsertRow function you are creating a first row i.e tr 
        var row = table.insertRow(table.rows.length);

        //In the second step you create a cell i.e td dynamically
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);

        // Here in step 3 you can add data to your cells from the modal popup inputs(According to your logic)
        cell1.innerHTML = "Your Date Created";
        cell2.innerHTML = "Your name data from modal";
        cell3.innerHTML = "Your Test data from modal";
        }
    }

为了避免回发，请将按钮类型设为按钮，如下所示

<button type="button" id="btnSave" onclick="validateForm()">Save</button>

Answer 2

在表单中定义一个包含所需列数的表。在使用表id单击保存时，您可以插入行

var table = document.getElementById("myTable");


var row = table.insertRow(0);


var col1 = row.insertCell(0);
var col2 = row.insertCell(1);


col1.innerHTML = "Content to be added";
col2.innerHTML = "Content to be added";

从模式中获取表单中的值，并使用javaScript

2 个答案: