我经常使用 PHP，并且一直有点害怕 javascript 和 jquery。但是两周前我跳到了 jquery，我必须说我真的很喜欢它:-) 我制作了几个工作脚本，也感谢我在 stackoverflow 上找到的信息。所以谢谢大家:-)
但是......我在这个似乎无法解决的问题上花了很多时间......我会尽力解释。
在 index.php 文件中，我使用 php 创建了一个表（从具有典型 SELECT * FROM ... 的 mysql 数据库中提取）。每个单元格都有一个唯一的 ID（例如 Cell_1_1 作为第一个，...）。使用 Jquery，我有一个脚本可以检测对单元格的点击，获取单元格的 id 并在其中放置一个包含单元格内容的文本输入字段。然后，我检测到一个“onchange”事件（如 enter）以使用 ajax 调用一个 php 脚本，该脚本更改实际 Mysql 数据库中这个单元格的值（使用 UPDATE ... WHERE id = cellid 语句）。
这一切都很好，我对 jquery 的强大功能感到非常满意 :-)
但是出于另一个原因，我想创建原始表，而不是使用 php，而是使用 jquery。这也很好用。如果将其与输出的 html 进行比较，则它与 php 脚本的相同。但是由于某种原因，当我单击（jquery 表的）单元格时，jquery 脚本无法检测到。当我将检测绑定到外部 div 时，在单元格中放置文本字段没有问题。
所以jquery'识别'单元格ID来改变单元格。但不能检测 onclick 事件。
有谁知道这怎么可能？
代码的某些部分需要澄清：
$(document).ready(function () {
makeclickable();
// script1: build the table when clicked on a div with the name of the table
$(".showtable_x").click(function() {
var idlastclick = $(this).attr("id"); //take tablename from click
$.ajax({ //let php return an array with the titles and the content of the table
url: 'inc/api/api.php',
data: '&table='+idlastclick,
dataType: 'json',
success: function(rows)
{
var table = $('<table></table>');
var numrow = rows.length; // take number of rows
var numcol = rows[0].length; // number of cols
for (i=0; i<numrow; i++){ // for every row
var row = rows[i]; // take row from array
var row2 = $('<tr></tr>'); //create html row
for (j=0; j<numcol; j++){ // for every cell
var cell = $('<td></td>').html(row[j]);//place content of array in cell
var cellcounter = "cell_"+i+"_"+j;
cell.attr('id', cellcounter); // asign meaningfull id to the cell
if (i==0) {
var cell = cell.addClass("bgcolor1");
} //the titles of the table
row2.append(cell); // append the cell to the row
}
table.append(row2); // append the row to the table
} // end for i
$('#firstplaceholder').html(table);
} // end function
}); // end ajax;
}); // end script 1
// script2: 确保单元格可点击并写入数据库。（在 php 创建的表上工作正常）
function makeclickable() {
$('td').click( function() { // when click on cell
if (!$("td.active")[0]){ // only execute when there is no other cell 'active'
var idlastclick = $(this).attr("id"); // take id of the cell
var content = $('#'+idlastclick).text(); // take the content of the cell
$('#'+idlastclick).html("<input type='text' id='textie' value='' />").addClass("active");
$('#textie').attr("value", content).focus();
// place a textfield, place the content of the cell, mark the cell as 'active', focus on it
$('#textie').on("keyup change", function() { // on type, remember the new value
var value = this.value;
$('#textie').on("change", function() { // on enter
$("td.active").empty().removeClass("active").addClass("exiting"); // clear cell, remove 'active' status, mark it (by class) as the cell to be written in
$("td.exiting").html(value); // place new value in cell
// call php script that writes the new value to the database
$.ajax({
url: 'inc/api/api2.php',
data: '&celid='+idlastclick+'&content='+value,
});
}); // end 'on enter' detection
}); // end 'on key-stroke' detection
$("td.exiting").removeClass("exiting"); // restore original class to cell
} // end if
});
}
});