javascript - 将数据属性发送到模态

Question

我正在使用以下代码尝试将行数据从页面发送到模式窗口:

 <?php
   $select = "SELECT * FROM table";
   $res = mysql_query($select) or die();
     echo "<div>"
     echo "<table>"
     echo "<tr><th>Edit/Delete</th>
               <th>Group</th>
               <th>Type</th>
               <th>Service</th>
               <th>Description</th>
           </tr>";
     while(($Row = mysql_fetch_assoc($res)) !== FALSE){
       echo "<tr><td>
       <a href='' class='open-EditRow btn btn-primary' value='Edit'
         data-des=\"{$Row[description]}\" 
         data-group=\"{$Row[resgroup]}\" 
         data-type=\"{$Row[restype]}\" 
         data-service=\"{$Row[service]}\">Edit</a>
       </td>";
       echo "<td>{$Row[resgroup]}</td>";
       echo "<td>{$Row[restype]}</td>";
       echo "<td>{$Row[service]}</td>";
       echo "<td>{$Row[description]}</td></tr>\n";
       };
     echo "</table>";
     echo "</div>";
    if(mysql_num_rows($res) == 0){
      echo "No Results";
    }
   }
 ?>

正如您在上面的 a 标记中看到的，我使用数据属性来获取行数据，其中包括 resgroup、restype、service 和 description。此时，我可以毫无问题地打开模态窗口。

我使用的 JavaScript 看起来像这样:

 <script type="text/javascript">
 $(function()
   {
     $('.open-EditRow').click(function(e){
     e.preventDefault();
     $group = $(this).attr('data-group');
     $type = $(this).attr('data-type');
     $service = $(this).attr('data-service');
     $descript = $(this).attr('data-description');
     console.log($group);
     console.log($type);
     console.log($service);
     console.log($descript);
    });
   });
 </script>

我可以执行警报($group)，并且 data-group 的行数据确实出现在警报窗口中。

我的模式窗口有一个带有输入标签的表单，我试图用数据属性填充该表单。输入标签具有与数据属性本身同名的类、名称和 id。

我知道我不需要使用console.log();但我不知道如何将数据传递到警报窗口以外的地方。

Answer 1

看起来您已经在使用 jQuery，因此如果表单输入的 id 与数据属性名称匹配，我相信您应该能够将它们填写为 using the val() method :

$('#group').val($group);

您还可以use the data() method检索数据属性。而不是

$group = $(this).attr('data-group');

你可以使用

$group = $(this).data('group');