LaurelS LaurelS - 3 months ago 30
HTML Question

Using jQuery to determine table row user clicking on - when table loaded dynamically via javaScript -?

Goal has been to report on the row number of an html table, that a user clicks on within that table - question is which tr element did the user click on?

I was able to do this when the information was hardcoded in the table by the html, using a previous posting How to tell which row number is clicked in a table?

My challenge was that because the table was loaded dynamically via javascript, that I wasn't able to link things up properly between the html, the javascript and jQuery. When I clicked on a row in the dynamically generated table, I was not able to communicate I was doing that.

I'm working on a jQuery class and looking forward to understanding better how to think problems like this through. But it sure is nice to get help with things so that I have some good examples to work with during my learning.

Below is the code, now working, using the code that Ozan suggested.

<!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?
http://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.
*/

//http://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>

Answer

The question is not really clear. From what I understand you want to know which tr element was clicked and your table is loaded dynamically. Correct me in the comments if this was not what you mean.

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.

jQuery Delegated Events on SO Documentation

$(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);
});

$("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);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Make Table</button>
<div id="container"></div>

Comments