データベースへの ajax 呼び出しを行って、データを返す状況があります。データはテーブル形式で div に入ります。行をクリックできるようにしたいと思います。これは、Web 上で毎日何十億回も行われている単純なプロセスです (姓の部分一致でデータベース内の人を見つけます)。
プロジェクトの他の 5 つのページでは、データベースから情報を読み取り、画面に投稿し、行をクリックして新しいページにリダイレクトすることに問題はありません。違いは、これらのページはページ上に PHP で記述されていることです。問題のこの特定のページは、ユーザーに姓から 1 文字または 2 文字を求め、ajax 呼び出しを実行して div を作成するため、javascript で記述する必要があります。
データを呼び出して書き込むためのコードは次のとおりです。
$.ajax({
type: "POST",
url: "findpatientbackend.php",
data: {letterslastname: lastname},
dataType : 'json',
success: function(result) {
$("#div1").html(""); //make the div blank
if(result.length >= 1)
{var output = "";
$("div1").html("<table id='findtable'>");
$.each(result, function(index, value) {
output += "<tr><td width='100px'></td><td id='localid' width='100px'>"
+ value.localid + "</td><td width='100px'>"
+ value.lastname + "</td><td width='100px'>"
+ value.firstname + "</td><td width='100px'>"
+ value.middlename + "</td><td width='100px'>"
+ value.dob + "</td></tr>";
});
$("#div1").html(output);
$("div1").html("</table>");
}
else
{$("#div1").html("No matches");}
},
error : function() { alert("error on return"); }
});
});
行を「クリック」するためのコードは次のとおりです (他の 5 つの状況では問題なく動作します)。
$("#findtable tr").click(function() {
var passthis = $(this).find("#localid").html();
$.post("php/setsessionvariable.php",
{sessionval: passthis},
function(e) {window.location.href = '../root.php'}
);
私はこれで遊んで遊んだ.click関数は「id = 'findtable''を見ることができないようだ.idからclass、一重引用符、二重引用符、場所の移動そして - 私が考えることができるすべて。IE で「ソースの表示」を実行すると、テーブルとデータ以外はすべて表示されますが、テーブルとデータは画面上に明確に表示されます。
これはプロジェクトを助けるために重要ですが、何が起こっているのかを理解する上で私にとってより重要です. たとえば、次のような基本的なものはありますか。
- いいえ、Javascript で書かれたテーブルはクリック可能にできません。PHP を使用してください。（奇妙に聞こえます）。
- ティム、Javascript でテーブルを書くときは、x、y、z をしなければなりません! （ありそう）。
- いいえ、Tim ではありません。".html" を使用して Javascript でデータを移動することはできません。"X" を使用する必要があります。
- 他の何か
昨日、jQuery dataTables ライブラリ (および他の多くのライブラリ) について学びました。おそらく、別の方法を提供してくれるでしょうが、このコードの問題について学びたいと思います。
（PSと.eachコマンドで私を助けてくれた@Shaddowに再び感謝します-とてもいいです！）
内訳は次のとおりです。
$(document).on(
"click",
"#findtable td",
(function() {
var passthis = $(this).find("#localid").html();
$.post("php/setsessionvariable.pphp",
{sessionval: passthis},
function(e) { window.location.href = '../root.php'; }
);
});
);
.click 関数を実際に動作させる純粋な Javascript テーブルのコードを次に示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<style>
#findtable {
width:200px;
background-color:#CFD3FE;
margin:10px auto;
text-align:center;}
</style>
<body>
<div id="puttablehere"></div>
<script>
$(document).ready(function () {
var output = "<table id='findtable'>";
for (var i = 0; i<38; i++)
{output += "<tr><td width='100px'>X</td><td id='localid' width='100px'>X</td></tr>";}
output += "</table>";
$("#puttablehere").html(output);
$("#findtable tr").click(function(e) { alert("it works!"); });
});
</script>
</body>
</html>