问题：

如何将值从动态表传递到bootstrap模式

苏洛城

2023-03-14

我已经通过使用PHP从SQL获取数据创建了一个动态表。每一行都有一个链接到模态的编辑按钮。我想把值从表传递到模态，这样我就可以编辑它了。

我已经尝试过循环槽表行，并能够获得不同列的值。但是，每次单击任何编辑按钮时，只有一行的最后一个被传递给Modal上的输入。

这是我的标记：Modal

<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-sm" role="document">
                                    <form role="form" method="POST" action="php/add_category.php">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Category</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <input type="hidden" class="form-control" name="categoryID" id="categoryID">
                                                    <label for="category">Category</label>
                                                    <input type="text" class="form-control" name="category" required id="category">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

表

<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
                                    <thead>
                                        <tr>
                                            <th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
                                            <th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
                                            <th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php foreach($categories as $category){ ?>  
                                        <tr class="footable-even" style="">
                                            <td class="footable-visible footable-first-column" id="tdCategoryID"><span class="footable-toggle"></span>
                                                <?php echo $category['categoryID']; ?>
                                            </td>
                                            <td class="footable-visible" id="tdCategory">
                                            <?php echo $cakeOrdering->escape($category['category']); ?>
                                            </td> 
                                            <td class="text-right footable-visible footable-last-column">
                                                <div class="btn-group">
                                                    <button class="btn-white btn btn-xs">Delete</button>
                                                    <button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
                                                </div>
                                            </td>
                                        </tr>
                                    <?php } ?>
                                    </tbody>
                                </table>

脚本

<script  type="text/javascript">
   $(document).ready(function () {
        var table = document.getElementById("main-table");
        $('#main-table tr').each(function(i, row){
            var $row = $(row);

            var category = $row.find('td:nth-child(2)').text().trim();
            console.log(category);
            $('#category').val(category);
        });   
    });
</script>

这是输出输出

当我试图将值打印到控制台时。控制台.日志

共有2个答案

申嘉慕

2023-03-14

为了实现所需的功能，您可以挂钩show.bs.modal事件。在事件处理程序中，您可以获得对单击的按钮的引用。您可以使用该引用遍历DOM以查找相关的td，该td保存了类别的名称。最后，您可以使用该类别名称在模式中设置input的值。

另外，我强烈建议您从PHP循环中创建的HTML内容中删除id属性，因为id需要在DOM中是唯一的。类似地，删除内联style属性，因为样式应该放在外部样式表中。

说完这些，试试这个：

null

$('#modalCategory').on('show.bs.modal', e => {
  var $button = $(e.relatedTarget);
  $('#category').val($button.closest('td').prev().text().trim());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <form role="form" method="POST" action="php/add_category.php">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Category</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <input type="hidden" class="form-control" name="categoryID" id="categoryID">
            <label for="category">Category</label>
            <input type="text" class="form-control" name="category" required id="category">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
        </div>
      </div>
    </form>
  </div>
</div>

<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
  <thead>
    <tr>
      <th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
      <th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
      <th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr class="footable-even">
      <td class="footable-visible footable-first-column">
        <span class="footable-toggle"></span>
        CategoryID_1
      </td>
      <td class="footable-visible">
        Category 1
      </td>
      <td class="text-right footable-visible footable-last-column">
        <div class="btn-group">
          <button class="btn-white btn btn-xs">Delete</button>
          <button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
        </div>
      </td>
    </tr>
    <tr class="footable-even">
      <td class="footable-visible footable-first-column">
        <span class="footable-toggle"></span>
        CategoryID_2
      </td>
      <td class="footable-visible">
        Category 2
      </td>
      <td class="text-right footable-visible footable-last-column">
        <div class="btn-group">
          <button class="btn-white btn btn-xs">Delete</button>
          <button class="btn-white btn btn-xs" data-toggle="modal" data-target="#modalCategory" id="editCategory">Edit</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

霍弘厚

2023-03-14

您正在每个循环内的输入框中设置类别的值，这就是设置最后一个值的原因。相反，您可以在编辑按钮上编写click事件，因此单击该按钮时，获取类别名称并将其放入模态输入框中。

演示代码：

null

$(document).ready(function() {
  //on click modal buton
  $(".editCategory").on("click", function() {
    var category = $(this).closest("tr").find('td:nth-child(2)').text().trim(); //get cat name
    $('#category').val(category); //set value

  })
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="modalCategory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <form role="form" method="POST" action="php/add_category.php">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Category</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                                </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <input type="hidden" class="form-control" name="categoryID" id="categoryID">
            <label for="category">Category</label>
            <input type="text" class="form-control" name="category" required id="category">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary" name="submitCategory" id="submitCategory">Save</button>
        </div>
      </div>
    </form>
  </div>
</div>
Table

<table id="main-table" class="footable table table-stripped toggle-arrow-tiny default breakpoint footable-loaded" data-page-size="15">
  <thead>
    <tr>
      <th data-toggle="true" class="footable-visible footable-first-column footable-sortable">ID<span class="footable-sort-indicator"></span></th>
      <th data-hide="phone" class="footable-visible footable-sortable">Category Name<span class="footable-sort-indicator"></span></th>
      <th class="text-right footable-visible footable-last-column" data-sort-ignore="true">Action</th>
    </tr>
  </thead>
  <tbody>

    <tr class="footable-even" style="">
      <td class="footable-visible footable-first-column"><span class="footable-toggle"></span> 1
      </td>
      <td class="footable-visible">
        abc
      </td>
      <td class="text-right footable-visible footable-last-column">
        <div class="btn-group">
          <button class="btn-white btn btn-xs">Delete</button>
          <!--use class here-->
          <button class="btn-white btn btn-xs editCategory" data-toggle="modal" data-target="#modalCategory">Edit</button>
        </div>
      </td>
    </tr>

    <tr class="footable-even" style="">
      <td class="footable-visible footable-first-column"><span class="footable-toggle"></span> 2
      </td>
      <td class="footable-visible">
        abcd
      </td>
      <td class="text-right footable-visible footable-last-column">
        <div class="btn-group">
          <button class="btn-white btn btn-xs">Delete</button>
          <!--use class here-->
          <button class="btn-white btn btn-xs editCategory" data-toggle="modal" data-target="#modalCategory">Edit</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

类似资料：

如何将动态值动态传递到SAP ABAP中的CDS

本文向大家介绍如何将动态值动态传递到SAP ABAP中的CDS，包括了如何将动态值动态传递到SAP ABAP中的CDS的使用技巧和注意事项，需要的朋友参考一下我认为不存在将动态值传递给CDS的方法。为了使DCL能够完成其分配的活动，您需要声明和定义权限对象。假设您无法执行此操作。然后，您可以获得所有结果，然后使用ABAP在网关层过滤结果。
如何将值从适配器传递到活动

特别是，当我使用这些行获取错误时：我尝试了下面的代码：并且获取常数大于0，并且显示Cart中的项数为1，但是每当我在代码获取问题中使用这一行时，从适配器到活动获取值是正确的方法吗？ cartAdapter.java： logcat：
如何在selenium、java中将动态值传递到xpath？

我有一个网站，在那里我打开合同，得到唯一的合同。然后，我需要转到另一个页面，在带有分页的表中搜索此id。我编写了一段代码，如果找不到这个请求ID（它是一个链接），则转到下一页，如果它存在，则只打开这个请求ID。但webelement的初始化有一个问题，我正在尝试添加动态值。Selenium给出以下错误，我不知道如何解决 org.openqa.selenium.NoSuchElementExcept
如何将动态值传递给java serlvet？[重复]

（更新）我正在使用java servlet和oracle sql构建酒店管理<我从数据库打印一个html表，如果我更改了传递给另一个servlet的值，我需要更新一行<这是我的第一个servlet 这是html表的示例表格样本现在，我需要更新行值并将其发送到数据库，这是第二个servlet打印表我像这样更新了我的代码，但只有第一个按钮有效。有什么想法吗？提前谢谢你。（更新）最后，我的程
如何将值从ajax传递到portlet页面

我已经创建了liferay portlet，在其中，我只需从Api获取天气数据，并通过ajax获取数据，如下所示，现在我想将这些json数据从ajax传递到portlet页面，并将其保存在portlet文件中。我是liferay的新手，请任何人指导如何做到这一点。这是portlet文件
将值从Servlet传递到JSP

我正在尝试将某些值从servlet传递到JSP页面，并添加已传递到标记的值，阅读了许多文章，我得到了以下代码。使用输入页面选择文件验证上传的文件调用上传。java将上传的文件保存在WEB-INF中在上载的文件中，选定的文件保存为“我的”。txt 使用缓冲区读取文件内容并将其保存到变量将其传递到JSP页面上载JAVA 上传文件后， mypage.jsp 现在，当我点击上传按钮完成所有这些

如何将值从动态表传递到bootstrap模式

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档