如何将输入到Bootstrap模态（窗体）中的输入中的值传递到HTML表？

debugcn 发表于 Dev

第七战鹰

所以我目前有一个模态，提示用户选择一个图像（文件输入），输入他们的名字（文本输入）和他们的姓氏（文本输入）。这样做之后，他们单击模式中的“添加到表”按钮，这是假定将上述输入添加到HTML表中的相应数据单元格中。我不确定如何将这些输入值传递到表数据单元格？我需要使用特定的关键字吗？

表格（HTML）：

  <tr>
          <th scope="row">1</th>
          <td> ... image input here ... </td>
          <td> ... name input here ... </td>
          <td> ... surname input here ... </td>
        </tr>

模式（引导程序）：

  <div class="modal-body">
          <form class="" action="index.html" method="post">
            <form>
              <div class="form-group">
                <label for="insertImage">Insert Image</label>
                <input type="file" class="form-control-file" id="Insert Image" accept="image/x-png,image/gif,image/jpeg" aria-describedby="inputHelp">
              </div>
              <div class="form-group">
                <label for="addName">Name</label>
                <input type="text" class="form-control" id="addName">
              </div>
              <div class="form-group">
                <label for="addSurname">Surname</label>
                <input type="text" class="form-control" id="addSurname">
              </div>
            </form>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Add to Table</button>
        </div>

任何帮助将不胜感激！

绿色

这是一个快速入门，可帮助您使用基于@Maniraj Murugan代码的jquery（感谢我懒得创建一个新示例）。只需用以下代码替换JS代码：

$("#addtotable").on('click', function() {
    if($("#addName").val() !== '' && $("#addSurname").val() !== ''){
        let row = '<tr> <td>' + $("#addName").val() + '</td> <td>' + ("#addSurname").val() + '</td> </tr>'
        $('tbody').append(row)
    }
});

https://codepen.io/greenn_anbu/pen/qBdPxNe

希望能有所帮助

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。