Javascript 如何将值从动态表传递到引导模式

我通过使用PHP从SQL获取数据创建了一个动态表。每行都有一个链接到modal的编辑按钮。我想将值从表传递到模式，以便编辑它

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

这是我的标记： 模态

类别
&时代；
类别
接近
拯救

桌子

身份证件
类别名称
行动
删除
编辑

剧本

<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>

$（文档）.ready（函数（）{
var table=document.getElementById（“主表”）；
$（'#主表tr'）。每个（函数（i，行）{
var$行=$（行）；
var category=$row.find（'td:nth child（2）'）.text（）.trim（）；
控制台日志（类别）；
$（'类别'）.val（类别）；
});   
});

这是输出

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

---

您正在每个循环内的输入框中设置类别值，这是设置最后一个值的原因。相反，您可以在编辑按钮上写入

单击

事件，以便单击此按钮获取类别名称并将其放入模式输入框中

演示代码：

$（文档）.ready（函数（）{
//点击模态按钮
$（“.editCategory”）。在（“单击”，函数（）{
var category=$（this）.closest（“tr”）.find（'td:nth child（2）'）.text（）.trim（）；//获取猫名
$（'#category'）.val（category）；//设置值
})
});

类别
&时代；
类别
接近
拯救
桌子
身份证件
类别名称
行动
1.
abc
删除
编辑
2.
abcd
删除
编辑
要实现所需功能，您可以挂接到
show.bs.modal
事件。在事件处理程序中，您可以获得对单击的按钮的引用。您可以使用该引用遍历DOM，以找到包含类别名称的相关
td
。最后，您可以使用该类别名称在模式中设置
输入的值

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

说了这么多，试试这个：


$（'modalCategory'）。on（'show.bs.modal'，e=>{
变量$button=$（e.relatedTarget）；
$（'#category'）.val（$button.closest（'td'）.prev（）.text（）.trim（））；
});

类别
&时代；
类别
接近
拯救
身份证件
类别名称
行动
类别1
第一类
删除
编辑
类别2
第2类
删除
编辑
这很有效！Tha
<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>