テーブルを自動リフレッシュすると、選択した行のセル値を取得する必要があります

Question

私は過去10秒以内に情報を更新するためにMySQLから引き出された自動リフレッシュテーブルを使用しています。そのテーブルはインクルードされたphpファイルに入っていますので、.load（）を使って呼び出すことができます。

インターネットで見つかったヘルプを使用して、クリックした行をハイライト表示して選択するjqueryスクリプトを正常に作成できました。テーブルが静的であったときに機能しましたが、ダイナミックではなくなりました（自動リフレッシュされています）。

JQueryのことはあまり知られていませんが、その番号に保持されているAKAでクリックされた行の値を保持するにはどうすればよいですか。

たとえば、 リストを見ると、「0008」と「0009」という2つのエントリがあります。 "0008"をクリックすると、テーブルがリフレッシュされ、0008がリストに表示されている場合と表示されない場合があります。しかし、それをクリックすると「0008」が保持されますので、「Confirm Selection」をクリックすると「0008」という値が渡されます。

今のところ、アラートがポップアップして「未定義」と表示されます。

<script src="java/jquery.js"></script> 
<script> 
function refreshInfoBox() { 
    $('#infobox').load('refreshtable.php'); 
    setTimeout(refreshInfoBox, 10000); 
} 
setTimeout(refreshInfoBox, 10000); 

$(document).ready(function() { 

    refreshInfoBox(); 

    $("#tableinfo tr").click(function(){ 
     $(this).addClass('selected').siblings().removeClass('selected');  
     var value=$(this).find('td:first').html(); 
     }); 

     $('.select').on('click', function(e){ 
      alert($("#tableinfo tr.selected td:first").html()); 
    }); 
}); 

</script> 
<div id="fixed"> 

    <?php 
     include("topmenu.php"); 
    ?> 

    <div id="backpanel"> 
     <div id="infobox"> 
      <?php 
       include("refreshtable.php"); 
      ?> 
     </div> 
    <input type="button" name="OK" class="select" value="Confirm Selection"/> 

    </div> 
</div> 

（私はおそらく追加する必要があり、私も（）の代わりに.htmlをの）（.textのを試してみました）ここ

<table id ="tableinfo"> 
<tr><th width="12%">ID#</th> 
<th width="8%">HEADER2</th> 
<th width="40%">HEADER3</th> 
<th width="40%">HEADER4</th> 
</tr> 

$query= $db->prepare("SELECT * FROM dbtable ORDER BY dbtime"); 
$query->execute(); 
$count = $query->rowCount(); 
if($count > 0) 
{ 
    while($info = $query->fetch()) 
    { 
     ?> 
     <tr> 
      <td><?php echo $info['id']; ?></td> 
      <td><?php echo $info['field2']; ?></td> 
      <td><?php echo $info['field3']; ?></td> 
      <td><?php echo $info['field4']; ?></td> 
     </tr> 
     <? 
    } 
}?></table> 

Answer 1

あなたのjQuery $("#tableinfo tr").click(function(){は内DOM要素に結合するrefreshtable.phpあなたのページ。そのidを持つDOM要素ではなく、その要素の明示的なインスタンス（その時点で存在するもの）。

リフレッシュスクリプトを実行すると、テーブルが新しいテーブルに置き換えられます。それは古いテーブルと同じIDを持つかもしれませんが、関数がバインドされたテーブルではないため、関数がそれを参照できません。

毎回新しいテーブルに関数を再バインドすることができますが、これを行うためのより良い方法は、実際に必要なデータだけをフェッチすることです。

テーブル全体をリロードするのではなく、サーバーをポーリングして更新を行い、最小JSONとして返し、新しい行としてajax呼び出しのsuccess関数を使用してテーブルに挿入できます。データオーバーヘッドが少なくなり、ユーザーエクスペリエンスが向上します。

jQueryについてはほとんど知りませんが、それはあまり意味をなさないかもしれません。 appendの機能を出発点として見てください。