Question

好吧，我是一个网页设计菜鸟。我试图从模态中获取输入字段并将该值添加到主页上找到的表并努力这样做。我试图写一个脚本给这个失败，因为我没有看到结果。

这是尝试：我已经在我的模态中找到了这个输入字段（直接从bootstrap中获取）。我已经为它指定了id =“addHousemate”

<input type="text" class="form-control"  id="addHousemate" placeholder="Housemate's Name">

这是我希望提交的按钮。

<input type="button" class="btn btn-primary" name ="addHousemate">Submit</button>

最后，这就是我希望增加输入的地方。

<tbody>
   <div id="housemateTable"></div>
</tbody>

现在我尝试编写jquery函数如下：

jQuery(function($){
  $('input[name="add"]').click(function() {
    value = $('input[name="addHousemate"]').val();
            $('td tr:last').after("<tr><td>" + value + "</td></tr>");
            $('input[name="addHousemate"]').val("");
   });
});

然而我没有结果。我也查找了使用jquery追加但仍然没有让我到任何地方。请帮忙！

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript -->
  <script  language="javascript" type="text/JavaScript" src="js/jquery-1.11.0.min.js"></script>   
  <script  language="javascript" type="text/JavaScript" src="js/submit.js"></script>

<div class="container">
<div class="row">
  <div class="col-md-8">
    <div class="col-md-4">
      <div class= "table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>People of the House</th>
            </tr>
          </thead>
          <tbody>
             <div id="housemateTable"></div>
          </tbody>
        </table>
            <!-- Button trigger modal -->
            <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
              Add a Housemate
            </button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="addHousemate" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Add a Housemate</h4>
                  </div>
                  <div class="modal-body">
                    <form role ="form">
                      <div class="form-group">
                        <input type="text" class="form-control" id="addHousemate" name"addHousemate" placeholder="Housemate's Name">
                      </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <input type="button" class="btn btn-primary" name ="add" value="add">
                  </div>
                </div>
              </div>
            </div>             
      </div>
    </div>

Answer 1

首先要注意的是你使用选择器的方式输入元素有问题。您可能希望从实际保存输入文本的第一个输入元素中检索值，而不是从第二个输入元素中获取，这只是一个按钮。

所以，我会调整：

$('input[name="addHousemate"]').val();

到

$('input[id="addHousemate"]').val();

另外，您设置事件监听器的方式存在问题：

$('input[name="add"]').click(function() {

请注意，没有名为“add”的输入元素。我相信你的意思是：

$('button[name="addHousemate"]').click(function() {

通过查看第二个输入元素上的结束选项卡：

Submit</button>

，我假设您要使用的是第二个输入元素的'button'而不是'input'。

所以，最后，jQuery代码看起来像：

$('button[name="addHousemate"]').click(function() {
    var value = $('input[id="addHousemate"]').val();
    $('tr td:last').after("<tr><td>" + value + "</td></tr>");
    $('input[id="addHousemate"]').val('');
});

查看以下工作代码：

http://jsfiddle.net/yp9V6/

享受网页设计工作！

Answer 2

问题可能源于在选择器

中使用:last而不是:last-child

我会使用完整语法（.on()）来检测提交，并使用submit而不是click。然后从输入中获取值并使用.html将其添加到最后一行。

$(document).ready(function()
{

    $('input[name="addHousemate"]').on('submit',function()
    {
        var thisvalue = $('input#addHousemate').val();
        $('tr:last-child td').html(thisvalue);
    });

});

您提供的输出代码与您提供的代码有很大不同吗？

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

从模态输入字段中取出文本并放入表格中

3 个答案: