對動態生成的表進行動畫處理

Question

我想在通過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! 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表。

現在我的問題是如何調用該插件，我應該如何傳遞ass對象？ 調用就像$(oldTableElement).rankingTableUpdate(newTableElement)但是由於它是動態生成的，所以我感到困惑。

我是JS的新手，所以將不勝感激。

Answer 1

首先，我將您的JavaScript放在類“ testin”的div之外。 在您的JS函數下方，您可以像下面的代碼一樣添加jquery調用。 有關更多信息，請參見此鏈接： http : //api.jquery.com/on/

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

這是為了確保與“ table tr”匹配的任何元素都將獲得單擊處理程序，無論何時創建。