将数据属性发送到模态

时间:2014-07-24 13:29:19

标签: javascript php jquery html

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

 <?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";
    }
   }
 ?>

正如您在上面的标签中所看到的,我使用数据属性来获取行数据,其中包括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),数据组的行数确实出现在警报窗口中。

我的模态窗口有一个带有输入标签的表单,我试图用数据属性填充。输入标记具有类,名称和ID,其名称与数据属性本身相同。

我知道我不需要使用console.log();但是我不确定如何将数据传递给警报窗口。

1 个答案:

答案 0 :(得分:1)

看起来你已经在使用jQuery,所以如果表单输入的id与数据属性名称匹配,我相信你应该能够在using the val() method中填充它们:

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

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

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

你可以使用

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