2
ゴールは、ユーザーがそのテーブル内でクリックするhtmlテーブルの行番号を報告していました。質問には、どのtr要素がユーザーによってクリックされましたか？jQueryを使用してテーブル行のユーザーをクリックする - javaScriptを使用してテーブルを動的にロードする - ？
情報は前回掲載How to tell which row number is clicked in a table?
マイ挑戦は、テーブルは、私が「wasnことを、JavaScriptで動的にロードされたため、ということでした使用して、HTMLでテーブルにハードコードされたとき、私はこれを行うことができました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>
オザン - 私は私の質問は不明であったことを知っていただき、ありがとうござい。今あなたが提案したものを試してみる。何があっても、私は質問を編集してより明確にしようとします。 – LaurelS
問題ありません。それが役に立てば幸い。コードの書式を設定し、予想される動作とエラーを明確に説明し、そしてほとんどがスニペット、jsfiddleまたはそれと同等のもので[MVCExample]（http://stackoverflow.com/help/mcve）を提供すると、より良い回答を得るチャンスが大幅に向上します。 – Ozan
あなたは確かに働きました。ありがとうございました。 – LaurelS