[英]How to get ROW id from dynamic ajax generated table (PHP, JQuery, MySQL)
好吧，所以我一直在做這個小項目，之前已經做過。 在表行上單擊時使用jquery會提供ID /值，但不能使用php或ajax。 因此，我有點迷失了，在進行ajax查詢之前，該表具有一個包含信息的預設行。 當我單擊它時，一切正常，但是從下拉菜單中選擇一個源之后（源是一個名稱，用於搜索包含特定名稱的所有行），並將所有相關行加載到表中。 單擊行jquery對生成的數據沒有任何作用，但是當單擊thead時，它將啟動我已設置的測試警報。 我正在使用HotKeys打開隱藏的彈出窗口，以便用戶與表單/頁面進行交互。
jquery-1.7.1.js.js
jqueryhotkeys.js
外部JS文件 ： eval.js
var s,
Joe = {
settings: {
winWidth: $(window).width(),
winHeight: $(window).height(),
entriesPopW: $('#overlay_entries').width(),
entriesPopH: $('#overlay_entries').height()
},
init: function() {
s = this.settings;
this.bindUIActions();
},
bindUIActions: function() {
$(document).bind('keydown.f7',function (evt){
//View Previous Entries
$("#overlay_entries").fadeIn(1000);Joe.entries();Joe.loadEntries();
$("#assList").change(function(e){
assSelect = $("#assList").val();
Joe.entryTable(assSelect);
});
$("#table-2 tr").click(function() {
alert("You clicked ROW:\n\nID: " + $(this).attr('id'));
});
$(".f7button").click(function(x){$("#overlay_entries").fadeOut(500);return false;});
return false;
});
},
//shows or hides hidden window
entries: function(){if(!$("#overlay_entries").is(':visible')){return;} $("#overlay_entries").css({ left: (s.entriesPopW/2)+50 ,top: (s.entriesPopH/2)+50,position:'fixed' }); },
//populates table after drop down menu selection
entryTable: function(a){
var jac = a;
$.ajax({
type: "GET",
url: "joe_functions.php?select="+jac,
error: function() {alert('error');},
success: function (data) {
$("#table-2 tbody").ajaxComplete(function () {
$(this).html(data);
});
}
});
},
//this loads the dropdown menu with names
loadEntries: function(){
$.ajax({
type: "GET",
url: "joe_functions.php?content=dropdown",
error: function() {alert('error');},
success: function (data) {$("#assList").ajaxComplete(function () {$(this).html(data);});}
});
}
};
HTML文件
<head>
<title>The Eval Form</title>
<script src="jquery-1.7.1.js"></script>
<script src="jquery.hotkeys.js"></script>
<script type="text/javascript" src="eval.js"></script>
<script>
(function() {Joe.init();})();
</script>
<style>
</style>
</head>
<body>
<div id="overlay_entries" style="display:none">
<h2> Previous Entries:</h2>
<center>
<select name="" id="assList"></select><br/><br/>
<table id="table-2">
<thead>
<th class="entryColOne">Associate</th>
<th class="entryColTwo">Eval Date</th>
<th class="entryColThree">Score</th>
<th class="entryColFour">Overall</th>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>johnsmith@example.com</td>
<td>http://www.example.com</td>
</tr>
</tbody>
</table>
<br/>
<input type="submit" class="f7button" value=""/>
</center>
</div>
</body>
</html>
PHP文件： joe_functions.php
<?php
require 'db_connect.php';
if(isset($_GET['select']) && !empty($_GET['select'])){
$passed = $_GET['select'];
//$test = '<tr><td colspan=4">'.$passed.'</td></tr>';
$sqlb = 'SELECT * FROM joe_eval WHERE wmid ='.$passed.' ORDER BY id';
$queryb = mysql_query($sqlb);
$numb = mysql_num_rows($queryb);
$tableData = '';
$ib = 0;
if(!$queryb){
$query_error = '<tr><td colspan="4">MySQL Error: '.mysql_error().'</td></tr>';
$tableData .= $query_error;
}else{
while($ib <$numb){
$wmid = mysql_result($queryb,$ib,'wmid');
$person = mysql_result($queryb,$ib,'employee');
$id = mysql_result($queryb,$ib,'id');
$date = mysql_result($queryb,$ib,'date');
$score = (mysql_result($queryb,$ib,'dm1')+mysql_result($queryb,$ib,'dm2')+mysql_result($queryb,$ib,'dm3')+mysql_result($queryb,$ib,'dm4')+mysql_result($queryb,$ib,'dm5')+mysql_result($queryb,$ib,'dm6')+mysql_result($queryb,$ib,'dm7'))/7;
$numFormat = number_format($score, 2, '.', '');
$overall = '';
if ($numFormat >= 1 && $numFormat < 1.6) {$overall = 'Below Needs';
}else if ($numFormat >= 1.6 && $numFormat < 2.7) {$overall = 'Improvment Needed';
}else if ($numFormat >= 2.7 && $numFormat < 3.6) {$overall = 'Good Performer';
}else if ($numFormat >= 3.6 && $numFormat < 4.6) {$overall = 'Exceeds Expectations';
}else if ($numFormat >= 4.6 && $numFormat <= 5) {$overall = 'Top Dog';}
// HERE IS WERE THE ROW ID IS BEING INSERTED
// WHICH WILL LATER BE USED TO LOAD FORM
$tableData .= '<tr id="'.$id.'"><td>'.$person.'</td><td>'.$date.'</td><td class="score">'.$numFormat.'</td><td>'.$overall.'</td></tr>';
$ib++;
}
}
// Send back the tbody HTM
echo $tableData;
}else{
$tableData .= '<tr><td colspan="4"><b>YOU MUST SELECT A NAME FROM THE LIST ABOVE!</b></td></tr>';
}
?>
因此，我不確定JS文件中是否可能有錯誤，或者是否應該在PHP文件中添加一些內容以與發送給Ajax請求的數據一起生成。
您可以做的一件事是使用jquery .on（），它用於將事件處理程序綁定到動態生成的數據上，在這種情況下，是從ajax調用接收到的數據，
所以代替
$("#table-2 tr").click(function() {
alert("You clicked ROW:\n\nID: " + $(this).attr('id'));
});
你可以做這樣的事情
$("#table-2 tr").on("click", function() {
alert("You clicked ROW:\n\nID: " + $(this).attr('id'));
});
讓我知道是否有幫助。
感謝Mandeep Jain輕拍肩膀以朝另一個方向看，這是一種快速簡便的修復方法。
$("#table-2 tbody tr").click(function() {
alert("You clicked ROW:\n\nID: " + $(this).attr('id'));
});
$("#table-2 tbody tr").on("click", function() {
alert("You clicked ROW:\n\nID: " + $(this).attr('id'));
});
$("#table-2 tbody tr").live("click", function() {
alert("You clicked ROW:\n\nID: " + $(this).attr('id'));
});
jQuery文檔 ：
從jQuery 1.7開始，不推薦使用.live（）方法。 使用.on（）附加事件處理程序。 較舊版本的jQuery的用戶應優先使用.delegate（）而不是.live（）。
此方法提供了一種將委派事件處理程序附加到頁面的document元素的方法，從而可以在將內容動態添加到頁面時簡化事件處理程序的使用。
使用ID從表中刪除特定行，並使用Jquery Ajax php mysql在后台刷新同一表
[英]Delete A specific row from table using id and refresh the same table in background using Jquery Ajax php mysql
如何從通過使用jquery和ajax動態生成的表中獲取ID？
[英]how to get id from table which is generated dynamically using by using jquery and ajax?
如何使用jQuery（AJAX）從mysql表中逐行獲取數據，用php編碼的查詢？
[英]How to fetch data row by row from mysql table, queries coded in php, using jquery (AJAX)?
單擊時更新具有PHP生成的表行ID的AJAX請求變量
[英]Updating AJAX request variable with ID of PHP generated table row on click
如何使用PHP獲取MySql中表中最后一個插入行的ID
[英]How to get the ID of the last inserted row in the table in MySql with PHP
如何從生成的 php 表中獲取 id 的值並刪除具有該 id 的行
[英]How to take value of id from generated php table and delete row with that id
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.