、ときにも​​

Question

の内側に、私も同じで、ボタンをクリックすると、内部テーブルにスパン id値ともスパンテキストを取る方法を理解カントクリックボタン行

私のhtmlコードは、私が2BD行、第二列の値を取るときにしようとしています、jqueryのを使用して

<div> 
<table id="t1" style="border:1px solid">  
    <tr><td><span id="city">Chikago</span></td><td><span>USA</span></td><td><button class="show">Show me</button></td></tr> 
    <tr><td><span id="city">London</span></td><td><span>UK</span></td><td><button class="show">Show me</button></td></tr> 
    <tr><td><span id="city">Delhi</span></td><td><span>INDIA</span></td><td><button class="show">Show me</button></td></tr> 

</table> 

です2行目のボタンをクリックしてくださいが、私はカレンダーの列、データを選択する方法を理解できません。

thatsなぜ私はj​​queryコードを書くことができません。

この問題の適切なjqueryコードを入力してください。

Answer 1

あなたは、同じ行のスパンを得るためにclosest()とfind()を使用する必要があります。また、HTML要素にidを再利用しないでください。

$(".show").on("click", function() { 
 
    var spans = $(this).closest("tr").find("span"); 
 
    var city = spans.eq(0).text(); 
 
    var country = spans.eq(1).text(); 
 
    console.log(city, country); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="t1" style="border:1px solid">  
 
    <tr><td><span>Chikago</span></td><td><span>USA</span></td><td><button type="button" class="show">Show me</button></td></tr> 
 
    <tr><td><span>London</span></td><td><span>UK</span></td><td><button type="button" class="show">Show me</button></td></tr> 
 
    <tr><td><span>Delhi</span></td><td><span>INDIA</span></td><td><button type="button" class="show">Show me</button></td></tr> 
 
</table>

Answer 2

これらのスパンはすべて同一のIDを持ち、問題を引き起こす可能性があります。次のように都市名と同じ名前のデータ属性を使用することをおすすめします：

<td data-id="city">Chikago</td> 

ボタンをクリックすると、1つのデータ属性とテキストを取得する必要があります。

Answer 3

文書ごとにIDが1つしかないことに注意してください。それをこのよう

classesを考える：その特性

idsに基づいて要素を分類：要素の一意の識別バッジです。 「こんにちは、私は要素番号158493で、私はそれに誇りを持っています！

と分類された要素のclickイベントを待ち受けます。実際の都市名を検索するには、DOMをトラバースする必要があります。最初に親を取得し、次に兄のprev()を取得します。これにより、以前のtd要素が得られます。今度は、スパン要素である子に向かって横断します。

これが役に立ちます。

$(".show").on("click", function() { 
 
    var cityValue = $(this).parent().prev().find("span").html(); 
 
    $("#city-value").html(cityValue); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <table id="t1" style="border:1px solid">  
 
    <tr> 
 
     <td> 
 
     <span class="city">Chikago</span> 
 
     </td> 
 
     <td> 
 
     <span>USA</span> 
 
     </td> 
 
     <td> 
 
     <button class="show">Show me</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <span class="city">London</span> 
 
     </td> 
 
     <td> 
 
     <span>UK</span> 
 
     </td> 
 
     <td> 
 
     <button class="show">Show me</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <span class="city">Delhi</span> 
 
     </td> 
 
     <td> 
 
     <span>INDIA</span> 
 
     </td> 
 
     <td> 
 
     <button class="show">Show me</button> 
 
     </td> 
 
    </tr> 
 

 
</table> 
 
    
 
<p id="city-value"></p>