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

Question

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?
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>

score 4 · Accepted Answer · edited Sep 26 '17 at 04:37

4

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

$(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>

edited Sep 26 '17 at 04:37

Graham

7,431
18
59
84

answered Aug 08 '16 at 01:35

Ozan

3,709
2
18
23

Ozan - Thanks for letting me know that my question was unclear. Now I will try what you suggested. No matter what, I will attempt to edit the question to make it more clear. – LaurelS Aug 08 '16 at 02:47
No problem. Hope it helps. Formatting the code, clearly explaining the expected behavior and errors, and most of all providing a [MVCExample](http://stackoverflow.com/help/mcve) with snippet, jsfiddle or equivalent would greatly improve your chances of getting a better answer. – Ozan Aug 08 '16 at 02:51
I replaced the code and attempted to rewrite the question. I hope that the question is clear enough that someone else will be able to benefit from it. Now I will follow the link, to figure out what an MVCExample is! – LaurelS Aug 08 '16 at 03:22
Glad to be of help :) Question is much more understandable now. – Ozan Aug 08 '16 at 03:25

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

1 Answers1