动态生成的表上的动画

时间:2014-01-21 08:25:27

标签: javascript php jquery html ajax

我想在通过php脚本动态生成的某个表上应用插件。这是插件:CLICK

现在我从评论中读到的内容应You first need some form of server side component, say a PHP script, which generates the html table from the data in the database. Then pass the URL of this PHP script into a jQuery ajax call. In the "success" callback, set the innerHTML of some holding div to the response of the ajax call, then select this newly created DOM table element and put it into the plugin. Hope that makes sense!

这是我到目前为止所得到的。

HTML

<div class="testin">
<script>
testin();
</script>
</div>

JS

function testin(){
    var load = $.get('functions.php',{gameNo:"1",function:"testin"});
    $(".testin").html('Refreshing');
    load.error(function() {
      console.log("Mlkia kaneis");
      $(".testin").html('failed to load');
      // do something here if request failed
    });
    load.success(function( res ) {
      console.log( "Success" );
      $(".testin").html(res);
    });
    load.done(function() {
      console.log( "Completed" );
    });
}

PHP

if($_GET['function']=="testin")
{

    echo '<table class="template" style="display:none"><thead><tr><th>Game Name</th><th>Round</th><th>Player Name</th><th>Target Name</th><th>Shot Number Now</th><th>Shot Score So Far</th><th>Rank</th></tr></thead><tbody></tbody></table>';
    $gamenumber = $_GET['gameNo'];
    echo'<table border="1" class="actualTable"><tr><th>Game Name</th><th>Round</th><th>Player Name</th><th>Target Name</th><th>Shot Number Now</th><th>Shot Score So Far</th><th>Rank</th></tr>';
    $sql = mysql_query("SELECT * FROM tbl_Round WHERE match_id='$gamenumber' ORDER BY round_name")
    or die(mysql_error());
    $i=1;   
    while($row = mysql_fetch_array($sql))
    {
        $tempSnumber = getcurrentshot($row['round_id'],$row['player_id']);
        echo'<tr>';
        echo'<td>'.$gamenumber.'</td>';
        echo'<td>'.$row['round_name'].'</td>';
        echo'<td>'.$row['player_id'].'</td>';
        echo'<td>'.$row['target_name'].'</td>';
        echo'<td>'.$tempSnumber.'</td>';
        echo'<td>'.$row['round_score'].'</td>';
        echo'<td>'.$i.'</td>';
        echo'</tr>';
        $i++;
    }


    echo'</table>';
}

该函数填充div就好了。我还在php脚本中创建了template表。

现在我的问题是如何调用插件以及我应该传递什么对象? 调用就像$(oldTableElement).rankingTableUpdate(newTableElement),但我很困惑,因为它是动态生成的。

我是JS的新手,所以任何帮助都会受到赞赏。

1 个答案:

答案 0 :(得分:0)

首先,我会将你的javascript放在div的“testin”类之外。 在JS函数下面,您可以添加jquery调用,如下面的代码所示。 有关详细信息,请参阅此链接:http://api.jquery.com/on/

$(document).ready(function(){   
   $("table tr").on( "click", function() {
     //your custom code goes here.
   });
});

这样做是确保任何匹配“table tr”的元素都会获得一个点击处理程序,无论它何时被创建。