I have a table:

<table id="myTable">
    <tbody>
      <tr>
       <td><span data-mydata="data1">first value data1</span></td>
       <td><span data-mydata="data2">first value data2</span></td>
      </tr>
       <tr>
       <td><span data-mydata="data1">second value data1</span></td>
       <td><span data-mydata="data2">second value data2</span></td>
      </tr>
   </tbody>
 </table>

I want to change the span texts at the last tr with jquery, I got all the span in the row with:

$('#myTable tbody tr:last td span')

what I want is the span which attr data-mydata is equal to data2.

how can I do it?

I have a table:

<table id="myTable">
    <tbody>
      <tr>
       <td><span data-mydata="data1">first value data1</span></td>
       <td><span data-mydata="data2">first value data2</span></td>
      </tr>
       <tr>
       <td><span data-mydata="data1">second value data1</span></td>
       <td><span data-mydata="data2">second value data2</span></td>
      </tr>
   </tbody>
 </table>

I want to change the span texts at the last tr with jquery, I got all the span in the row with:

$('#myTable tbody tr:last td span')

what I want is the span which attr data-mydata is equal to data2.

how can I do it?

• javascript
• jquery
• html

• jQuery Learning Center: link Selecting Elements by Attribute – Andreas Commented Jan 23, 2017 at 17:12
• Do you want to set value of span attr or select the span with attr? Answer is relative to that. – Rahi Commented Jan 23, 2017 at 17:16

5 Answers 5

Use attribute equals selector to select the element based on the attribute value.

 $('#myTable tbody tr:last td span[data-mydata="data2"]')

Use :nth-child instead of jQuery :last for making it more faster.

$('#myTable tbody tr:last-child td span[data-mydata="data2"]')

You can try the following:

$('#myTable tbody tr:last span[data-mydata="data2"]').text('to whatever text you want.');

Use

$('#myTable').find('span[data-mydata="data2"]').text();

Use the last selector to get the last tr then use [attribute=value]

$("tr:last span[data-mydata='data2']").css({"background": "gold"})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="myTable">
    <tbody>
      <tr>
       <td><span data-mydata="data1">first value data1</span></td>
       <td><span data-mydata="data2">first value data2</span></td>
      </tr>
       <tr>
       <td><span data-mydata="data1">second value data1</span></td>
       <td><span data-mydata="data2">second value data2</span></td>
      </tr>
   </tbody>
 </table>

Try this:

$('#myTable tbody tr:last td span').attr('data-mydata','data2')