Ziel war es, über die Zeilennummer einer HTML-Tabelle zu berichten, auf die ein Benutzer in dieser Tabelle klickt - Frage ist, auf welches tr-Element der Benutzer geklickt hat?Verwenden von jQuery zum Ermitteln des Tabellenzeilenbenutzers beim Klicken auf - wenn Tabelle dynamisch über javaScript geladen wird -?
Ich konnte dies tun, wenn die Informationen in der Tabelle durch den HTML-Code fest einprogrammiert wurden, wurde eine frühere Veröffentlichung How to tell which row number is clicked in a table?
Mein Herausforderung mit, dass, da die Tabelle dynamisch über Javascript geladen wurde, dass ich wasn‘ in der Lage, Dinge zwischen dem HTML, dem Javascript und jQuery richtig zu verbinden. Als ich auf eine Zeile in der dynamisch generierten Tabelle geklickt habe, konnte ich nicht kommunizieren.
Ich arbeite an einer jQuery-Klasse und freue mich darauf, besser zu verstehen, wie man solche Probleme durchdenkt. Aber es ist schön, Hilfe mit den Dingen zu bekommen, so dass ich einige gute Beispiele habe, mit denen ich während meines Lernens arbeiten kann.
Unten ist der Code , der jetzt funktioniert, mit dem Code, den Ozan vorgeschlagen hat.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Make Table</button>
<div id="container"></div>
<title>Board A</title>
<script type="text/javascript" charset="utf-8"></script>
<script src="mainTest.js"></script>
</head>
<center>
<img src="MarmotNapping.jpg" alt="Marmot"
height="150" width="400"
>
</center>
<body>
<p> Click in this line </p>
<script>
/*
// First Stackoverflow question I used
How to tell which row number is clicked in a table?
https://stackoverflow.com/questions/4524661/how-to-tell-which-row-number-is-clicked-in-a-table
You can achieve this with delegated event handling.
Use jQuery's .on(eventName, selector, handler) method to attach the handler to an element you know will always be present, e.g. document.
*/
//https://stackoverflow.com/questions/38820078/using-jquery-to-determine-table-row-user-clicking-on-when-table-loaded-dynamic
// begin new
$(document).on("click", "tr", function(e) {
var index = $(this).index(); //this is event.target, which is the clicked tr element in this case
console.log(index);
alert('0.You clicked row '+ ($(this).index()+1));
});
$("button").on("click", function() {
$("table").remove();
var table = $("<table>").appendTo("#container");
for (i = 0; i < 10; i++) {
$("<tr>").append($("<td>").text("This is " + i + ". row.")).appendTo(table);
}
});
// end new
$(document).ready(function(){
$("p").click(function(){
alert("The paragraph was clicked.");
});
});
$('#QuestionsAnswersTable').find('tr').click(function(){
alert('1.You clicked row '+ ($(this).index()+1));
});
$('#QuestionsAnswersTable').find('tr').click(function(){
var row = $(this).find('td:first').text();
alert('2.You clicked ' + row);
});
</script>
</body>
</html>
Ozan - Danke, dass ich weiß, dass meine Frage unklar war. Jetzt werde ich versuchen, was Sie vorgeschlagen haben. Egal was, ich werde versuchen, die Frage zu bearbeiten, um sie klarer zu machen. – LaurelS
Kein Problem. Ich hoffe es hilft. Das Formatieren des Codes, das klare Erklären des erwarteten Verhaltens und der Fehler und vor allem das Bereitstellen eines [MVCExample] (http://stackoverflow.com/help/mcve) mit Snippet, Jsfiddle oder Ähnlichem würde Ihre Chancen auf eine bessere Antwort erheblich verbessern . – Ozan
Was Sie vorgeschlagen haben, hat definitiv funktioniert. Vielen Dank. – LaurelS