jquery - 在模态内部的表中选择值并填充模态外部的表单？-6ren

jquery - 在模态内部的表中选择值并填充模态外部的表单？

转载作者：搜寻专家更新时间：2023-10-31 08:23:46

这第一张图片显示了空窗体，有 3 个样本输入并有自己的名字。

在第二张图片上，您会看到里面有表格的模态，每个模态都有不同的名称/数据。

我想要的是，如果我在该表中选择 1 行，无论我过滤还是单击第二页，外部表单必须由我在表 <td> 上选择的数据填充。 .

这是我的示例代码: JSFIDDLE

   <!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>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
     
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
    </head>
    <body>
    
    <div class="container-fluid">
      <!-- Trigger the modal with a button -->
      <br>  <br>
    <button type="button" class="btn btn-info btn-sm pull-right" data-toggle="modal" data-target="#myModal">Show Record</button>  <br>  <br>
    <div class="panel panel-default">
      <div class="panel-heading"></div>
      <div class="panel-body">
        <form>
      <div class="form-group">
      <input type="Hidden" name="ID" class="form-control">
      </div>
      <div class="form-group">
        <label>Name</label>
      <input type="text" name="Name"  class="form-control">
       </div>
      <div class="form-group">
        <label>Bday</label>
      <input type="date" name="Bday"  class="form-control">
       </div>
      <div class="form-group">
        <label>Age</label>
      <input type="number" name="Age"  class="form-control">
       </div>
       <div class="form-group">
      <input type="submit" name="Submit"  class="btn btn-success">
       </div>
    </form>
    
      </div>
    </div>
    
    <!-- Modal -->
    <div id="myModal" class="modal fade" 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">
           <div class="table-responsive">
              <table class="table" id="example">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Bday</th>
                    <th>Age</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>Name1</td>
                    <td>10-1-1997</td>
                    <td>20</td>
                  </tr>
                  <tr>
                    <td>Name2</td>
                    <td>9-1-1997</td>
                    <td>20</td>
                  </tr>
                  <tr>
                    <td>Name3</td>
                    <td>8-1-1997</td>
                    <td>20</td>
                  </tr>
                  <tr>
                    <td>Name4</td>
                    <td>7-1-1997</td>
                    <td>20</td>
                  </tr>
                  <tr>
                    <td>Name5</td>
                    <td>6-1-1997</td>
                    <td>20</td>
                  </tr>
                  <tr>
                    <td>Name6</td>
                    <td>10-1-1997</td>
                    <td>20</td>
                  </tr>
                  <tr>
                    <td>Name7</td>
                    <td>9-1-1997</td>
                    <td>20</td>
                  </tr>
                  <tr>
                    <td>Name8</td>
                    <td>8-1-1997</td>
                    <td>20</td>
                  </tr>
                  <tr>
                    <td>Name9</td>
                    <td>7-1-1997</td>
                    <td>20</td>
                  </tr>
                  <tr>
                    <td>Name10</td>
                    <td>6-1-1997</td>
                    <td>20</td>
                  </tr>
                  <tr>
                    <td>Name11</td>
                    <td>6-1-1997</td>
                    <td>20</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    
      </div>
    </div>
     </div>
    
    </body>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#example').DataTable();
    } );
    </script>
    </html>

我不知道应该如何将模态上的点击值传递给表单。在此先感谢我希望有人能帮助我。

最佳答案

使用以下步骤来填充表单中的值:

1)捕获datatable创建的表对象

var table= $('#example').DataTable();

2) 现在捕获你的表的表体

var tableBody = '#example tbody';

3) 在tbody上添加点击事件处理程序

$(tableBody).on('click', 'tr', function () {
var cursor = table.row($(this).parents('tr'));//get the clicked row
var data=cursor.data();// this will give you the data in the current row.
});

4) 现在根据您捕获的数据在表单中设置数据值。例如。

$('form').find("input[name='name'][type='text']").val(data.name);

在找出键以获取值之前，请先对数据进行控制台操作。或检查这个 Fiddle工作结果

关于jquery - 在模态内部的表中选择值并填充模态外部的表单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49967863/

文章推荐： ios - Parse.com 崩溃报告 : stack trace is not symbolicated

文章推荐： java - 如何更改 Swing 标签中的间隙

文章推荐： Java - 实现接口(interface)

文章推荐： javascript - 如何使用 arcTo 制作眼睛

angularjs - 什么是 Angular 态？
我来自 Asp.Net 世界，试图理解 Angular State 的含义。什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？我听到很多人
javascript - 3 态 CSS 拨动开关
我一直在寻找 3 态拨动开关，但运气不佳。基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。有人

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 在模态内部的表中选择值并填充模态外部的表单？