如何将输入到包含在 Bootstrap 模式（表单）中的输入中的值传递给 HTML 表？答案

【问题标题】：How to pass values entered into inputs contained within a Bootstrap modal (form) to an HTML table?如何将输入到包含在 Bootstrap 模式（表单）中的输入中的值传递给 HTML 表？
【发布时间】：2020-06-18 01:06:43
【问题描述】：

所以我目前有一个模式，提示用户选择图像（文件输入），输入他们的名字（文本输入）和他们的姓氏（文本输入）。这样做之后，他们单击模式中的“添加到表格”按钮，即假设将上述输入添加到 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>

任何帮助将不胜感激！

【问题讨论】：

您可以在输入中设置一个类名，当用户确认模式时，捕获它们并使用 jquery（引导程序使用它）插入到表中，就像这样 var name = $(".nameInput") .val(); $("td").html(名称);
你的预期输出是不是这样codepen.io/Maniraj_Murugan/pen/PoqJOrg??
是的，完全一样。但是在使用 jQuery 时。
@SeventhWarhawk，真的，我不熟悉 jquery，也不是它的忠实粉丝。我总是遵循让我们在 Vanilla 中进行操作而不是依赖库...无论如何如果它解决了您的问题，我会把它作为答案发布..如果你想要 jquery 解决方案，那么你可以等待..

标签： javascript jquery twitter-bootstrap bootstrap-4 bootstrap-modal

【解决方案1】：

这里是一个快速入门，让您可以使用基于 @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

希望对你有帮助

【讨论】：