i cant understand how to take inside table span id value and also span text when click a button that also in same row

my html code is

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

using jquery,i am trying to take 2bd row,2nd column value when click the button of 2nd row but i cant understand how to select tanle roes,columns data.

thats why i cant write jquery code.

please give a proper jquery code for this problem.

i cant understand how to take inside table span id value and also span text when click a button that also in same row

my html code is

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

using jquery,i am trying to take 2bd row,2nd column value when click the button of 2nd row but i cant understand how to select tanle roes,columns data.

thats why i cant write jquery code.

please give a proper jquery code for this problem.

• javascript
• jquery
• html
• dom
• html-table

• Have you already written the click event for the button? -- if so please share this. I dont think you can expect to good folks on SO to do all your work! – Phil Blackburn Commented Jun 20, 2016 at 21:50

3 Answers 3

You should use closest() and find() to get the spans in the same row. Also, don't reuse ids in your HTML elements.

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

you need to have each id as a unique value - all those spans have the same id and will cause problems - I would remend using data-attributes, which could be in the same td as the city name as in the following:

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

Then on the click of the button - you need to get the data attribute and text of the one td.

It's important to keep in mind that there can only be one id per document. Think of it this way

classes: Classify an element based on their characteristics

ids: Are a unique identification badge for the element. It can say "Hey, I'm element number 158493 and I take pride in that!"

Moving forward, listen for the click event on elements classified as show. To find the actual city name, you have to traverse up the DOM. First get the parent and then its older brother with prev(). This will get you the previous td element. Now traverse downward to its child which is the span element.

Hope this helps.

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

<script src="https://ajax.googleapis./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>