在javaScript中关闭模态后不添加表中的新行

New row in table is not added after closing modal in javaScript

本文关键字：添加 新行 模态 javaScript      更新时间：2023-09-26

我想让事情变得简单。我有一个页面与按钮在顶部，并在它下面的空html表。当我点击按钮模态弹出，我有额外的文本框和下拉两个按钮，取消和保存。当我单击Save按钮时，我想从文本框中显示数据，并下拉作为表中的新行。但实际上什么也没发生。模态消失，但表中没有添加新行。当我试图调试这个，一切似乎都是正确的，没有发现异常，所有的值都正确添加，但仍然没有。我猜问题是由模态引起的，有人知道如何解决这个问题吗?

下面是我的代码: 
<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 id="results" width="360">
    <thead>
      <tr>
        <th scope="col" width="120">Date Created</th>
        <th scope="col" width="120">Name</th>
        <th scope="col" width="120">Tests</th>
      </tr>
    </thead>
  </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" id="tbName" name="tbName">
        <p id="nameVal"></p>
        Test:<br>
        <select id="ddlTest">
          <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(return false;);">Save</button>
      </form>
    </div>
  </div>
  <script type="text/javascript">
      var nameValidation;
      var modal = document.getElementById('modalAddNewTest');
      var btn = document.getElementById("btnAddNew");
      var btnSave = document.getElementById("btnSave");
      var span = document.getElementsByClassName("close")[0];
      btn.onclick = function() {
          modal.style.display = "block";
      }
      span.onclick = function() {
          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;
        }
        else
        {
            var table = document.getElementById("results");
            var name = document.getElementById("tbName").value;
            var e = document.getElementById("ddlTest");
            var selectedTest = e.options[e.selectedIndex].value;
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth()+1; 
            var yyyy = today.getFullYear();
            if(dd<10) {
                dd='0'+dd
            } 
            if(mm<10) {
                mm='0'+mm
            } 
            today = mm+'/'+dd+'/'+yyyy;
            //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 = today;
            cell2.innerHTML = name;
            cell3.innerHTML = selectedTest;
        }
    }
</script>
</body>
</html>

我希望这对你有帮助。

添加到你的button role="button" type="button"。不确定，但一些浏览器处理按钮作为"提交"类型，如果插入根据我的经验，旧的maxthon浏览器

<button id="btnSave" role="button" type="button" onclick="validateForm(return false;);">Save</button>

，你需要修复你正在调用的内联js函数。你有打字错误，你在返回false和…你可以去掉"return false"

试着这样做:

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

太糟糕了!

最好的方法是从按钮中删除onclick属性，并使用下面的代码:

btnSave.onclick = function() {
    validateForm();
    return false;
}

工作得很好，你的代码中会少一些意大利面条。

你也可以使用addEventListener，如果你需要更多的功能。https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

相关文章：