Question

我正在使用jQuery插件将气球显示为工具提示。

我用PHP生成以下表格：

<?php
for($i = 1; $i < sizeof($consulta_id); $i++){
    $data = str_replace('-', '/', $consulta_data[$i]);
    $data =  date('d/m/Y', strtotime($data)); 
    echo "<tr>";
    echo "<td>" .$consulta_id[$i]."</td>";
    echo "<td>" .$data."</td>";
    echo "<td>" .$consulta_hora[$i]."</td>";
    echo "<td>" .$consulta_desc[$i]."</td>";
    echo "<td id=\"".$i."\">".$consulta_inst[$i]."</td>";
    echo "<td>" .$consulta_prof[$i]."</td>";
    echo "</tr>";
}
?>

下面的脚本会生成工具提示：

<script>
$(function() {
      //var id;
      $('#id').balloon({
        url: '../functions/retorna-dados-instituicao.php?idInstituicao=' + id,
        position: "bottom",
        offsetX: -30,
     });
  }
});
</script>

我需要动态地将每个“$ consulta_inst”id传递给这个脚本，为每个“consulta”生成一个不同的工具提示，根据这个id，有一种方法来迭代我的表并选择带有选择器“$”的元素？

Answer 1

为所有新元素添加公共类，并使用$（this）.attr（“id”）获取每个元素的“id”，因为您在php请求中使用它。

所以你的PHP代码是：

<?php
for($i = 1; $i < sizeof($consulta_id); $i++){
    $data = str_replace('-', '/', $consulta_data[$i]);
    $data =  date('d/m/Y', strtotime($data)); 
    echo "<tr>";
    echo "<td>" .$consulta_id[$i]."</td>";
    echo "<td>" .$data."</td>";
    echo "<td>" .$consulta_hora[$i]."</td>";
    echo "<td>" .$consulta_desc[$i]."</td>";
    echo "<td class=\"balloon\" id=\"".$i."\">".$consulta_inst[$i]."</td>";
    echo "<td>" .$consulta_prof[$i]."</td>";
    echo "</tr>";
}
?>

jQuery代码：

$(function() {
  $('.balloon').each(function(){
      $(this).balloon({
        url: '../functions/retorna-dados-instituicao.php?idInstituicao=' + $(this).attr('id'),
        position: "bottom",
        offsetX: -30,
     });
   }); 
});

Answer 2

如果您使用不同的方法（类而不是ID），您可以让您的生活更轻松。请参阅jQuery UI工具提示中的示例，使用类可以将工具提示添加到无限数量的元素。

＆＃13;

step

＆＃13;

Answer 3

这是一个有效的jsfiddle演示。

<?php

for（$ i = 1; $ i＆lt; sizeof（$ consulta_id）; $ i ++）{ $ data = str_replace（' - '，'/'，$ consulta_data [$ i]）; $ data = date（'d / m / Y'，strtotime（$ data））; echo“”; echo“”。$ consulta_id [$ i]。“”; echo“”。$ data。“”; echo“”。$ consulta_hora [$ i]。“”; echo“”。$ consulta_desc [$ i]。“”; echo“”。$ consulta_inst [$ i]。“”; echo“”。$ consulta_prof [$ i]。“”; echo“”; } ？＆GT;

$(document).ready(function () {
    $('table tr').each(function () {
        $(this).hover(function () {
           var id = $(this).attr('id');
           alert(id);
       });
    });
});

http://jsfiddle.net/mdamia/3q0hj5ya/6/

Answer 4

在桌子上.each()

<tr>

在行的第一个<td>列
使用您已经

像这样：

    $('#table').children('tr').each(function(){
        var tr = $(this);
        var id = tr.find('td').first().text();
        tr.balloon({
            url: '../functions/retorna-dados-instituicao.php?idInstituicao=' + id,
            position: "bottom",
            offsetX: -30,
        });

    });

使用jQuery用PHP显示动态工具提示

4 个答案: