wie Spannenwert zu nehmen, die innerhalb <td> (Tabellendaten), wenn Klick-Taste, die auch innerhalb <td>

Question

ich kann nicht verstehen, wie man innerhalb Tabelle in derselben nehmen Spanne id-Wert und auch Spanne Text, wenn Sie auf eine Schaltfläche, die auch

Reihe

meine hTML-Code ist

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

mit jquery, ich versuche 2bd Reihe, 2. Spalte Wert zu nehmen, wenn Klicken Sie auf den Knopf der 2. Reihe, aber ich kann nicht verstehen, wie man Tanle Rogen, Spalten Daten auswählt.

das ist, warum ich nicht jquery Code schreiben kann.

Bitte geben Sie einen richtigen jquery Code für dieses Problem.

Answer 1

Sie sollten closest() und find() um die Spannweiten in der gleichen Reihe zu bekommen verwenden. Verwende auch nicht id s in deinen HTML-Elementen.

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

Sie müssen jede ID als einen eindeutigen Wert haben - alle diese Bereiche haben die gleiche ID und werden Probleme verursachen - Ich würde empfehlen, Daten-Attribute zu verwenden, die im selben td sein können wie der Stadtname wie folgt :

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

Dann auf dem Klick auf den Button - müssen Sie das Datenattribut und Text des einen td zu erhalten.

Answer 3

Es ist wichtig zu beachten, dass es nur eine ID pro Dokument geben kann. Denken Sie daran, auf diese Weise

classes: ein Element Klassifizieren auf der Grundlage ihrer Eigenschaften

ids: Gibt eine eindeutige Identifikationsmarke für das Element. Es kann sagen "Hey, ich bin Element Nummer 158493 und ich bin stolz darauf!"

Wenn Sie weitergehen, achten Sie auf das Ereignis click für Elemente, die als show klassifiziert sind. Um den tatsächlichen Stadtnamen zu finden, müssen Sie das DOM durchlaufen. Holen Sie zuerst das Elternteil und dann seinen älteren Bruder mit prev(). Dadurch erhalten Sie das vorherige Element td. Gehe nun nach unten zu seinem Kind, welches das Spannelement ist.

Hoffe, das hilft.

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