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

Question

我有一个 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

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

         }


   }

Answer 2

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