Question

目标是报告用户在该表中点击的html表的行号 - 问题是用户点击了哪个tr元素？

当html使用之前的帖子How to tell which row number is clicked in a table?

在表格中硬编码信息时，我能够做到这一点

我的挑战是因为该表是通过javascript动态加载的，我无法在html，javascript和jQuery之间正确链接。当我点击动态生成的表中的一行时，我无法进行通信，我正在这样做。

我正在研究一个jQuery类，并期待更好地理解如何通过这样思考这样的问题。但是确实很乐意得到帮助，以便在学习过程中有一些很好的例子。

以下是代码正在运行，使用Ozan建议的代码。

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

Answer 1

~~问题不是很清楚。根据我的理解，您想知道单击了哪个tr元素，并且您的表是动态加载的。如果这不是你的意思，请在评论中纠正我。~~

您可以使用delegated event handling实现此目的。

使用jQuery的.on(eventName, selector, handler)方法将处理程序附加到您知道将始终存在的元素，例如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>

使用jQuery确定表行用户点击 - 当表通过javaScript动态加载时 - ？

1 个答案: