如何打开模态 jquery 并从表中获取单元格值？

Posted 2023-03-16

【中文标题】如何打开模态 jquery 并从表中获取单元格值？

【英文标题】：How to open modal jquery and get cell value from table?

【发布时间】：2017-11-10 14:50:27

【问题描述】：

我有一个 html 表，其中包含使用 JS 函数动态绘制的数据，并且对于每一行，我都有一个打开模式引导程序的按钮，如何在模式打开时也根据按下按钮时选择的行？

我的模态html：

   <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
         <!-- Modal content-->
         <div class="modal-content">
             <div class="modal-header">

             </div>
              <div class="modal-body">
                        info content
              </div>
               <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
               </div>
    </div>
</div>

还有mi js函数：

successList: function(data) 

   var strHtml = '';       
   for(var i = 0; i<data.array.length; i++) 

      strHtml += '<tr>';
      strHtml += '  <td>'+data.array[i].idUser+'</td>';
      strHtml += '  <td>'+data.array[i].age+'</td>';
      strHtml += '  <td>'+data.array[i].email+'</td>';
      strHtml += '  <td> <button type="button" id="btnOpenModal" class="btn btn-warning" data-toggle="modal" data-target="#myModal">Process</button> </td>';
      strHtml += '</tr>'  
   

  $("#tblUsers").append(strHtml);

我想捕获 idUser

【问题讨论】：

包含数据行的表格的html在哪里？您可以在弹出模式时引用您的行。

【参考方案1】：

首先要让它更有效率。 您可以创建一个对象，该对象将包含每个表行的键值数组。 同时创建承包商。

 var demosData = ;
 function Demo(demoData) 
        this.id = demoData.id;
        this.status=demoData.status;
         //etc...
    

创建表时使用构造函数并传递所有数据 在open modal pass data-id的链接上。

            targets: 7, //number of column of link to modal
            data: function(row, type, val, meta) 
                var demo= new Demo(row);
                demosData[row.id] = demo;
                return (
                    '<a href="#" ' +                            
                        'type="button" data-id="' + row.id +'" data-toggle="modal" 
                          data-target="#Demo" onclick="openModal(this)"
                           aria-expanded="false">' +
                    '</a>'
                );
            ,

当您单击打开的模式时，您传递属性 id 以从您从一开始创建的键值数组中检索对象行。 获得正确的对象后，您可以在 HTML(Modal) 中呈现它的值

 function openModal(element) 
         var html = "";
        var demoId = element.getAttribute("data-id");

        var demoData = demosData[demoId];



        if (demoId ) 
            var id= controllerData.id;
            var status = controllerData.status;

            html = '<div class="row">' + id + </div> +
                   '<div class="row">' + status + </div>
                    //etc...

         


   

【参考方案2】：

您可以为单击按钮添加事件侦听器。并从事件侦听器中的事件获取数据。使用事件对象的 'target' 属性来获取被点击的按钮的实例。

【讨论】：

如果您将其添加为答案，请显示代码示例。完整的答案必须附带一个工作示例。就目前而言，您的答案如果作为评论会更好，并且可能会被低质量审查系统删除。