Return value of specific table element through javascript

Question

<table border=0>
  <tr>
    <td>
      <table  id="table1" width="300" border="2" align="right" cellpadding="1" cellspacing="1">
          <tr class="tb1">
          <td>station</td>
          <td>wind</td>
          </tr>
      </table>
    </td>
  </tr>
</table>

I hope to return the value of element through javascript which I expect to alert with the string "station" and "wind". I had tried the following javascript code

var data=$("tr.tb1").find("td").value;
alert(data);

And further more to change the font color of the content. Hoping to get some help about how to improve my code.

tds don't have value, they have textContent and innerHTML. Notice, that find returns a jQuery object, though. — Teemu
– Teemu, Commented Jul 3, 2018 at 10:07

Tareq · Accepted Answer · 2018-07-03 10:07:29Z

1

You can use .text() to get the text content of a dom element

.val() works on input elements and .text() will not work on input elements. more here

var data=$("tr.tb1").find("td").text();
alert(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=0>
  <tr>
    <td>
      <table  id="table1" width="300" border="2" align="right" cellpadding="1" cellspacing="1">
          <tr class="tb1">
          <td>station</td>
          <td>wind</td>
          </tr>
      </table>
    </td>
  </tr>
</table>

answered Jul 3, 2018 at 10:07

Tareq

5,3732 gold badges18 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mamun · Accepted Answer · 2018-07-03 10:19:11Z

0

.find()

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

You can use each() to get all td's returned by .find(). There is no value attribute in td, you can use textContent instead. Try the following:

$(".tb1").find("td").each(function(){ 
  var data = this.textContent;
  alert(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=0>
  <tr>
    <td>
      <table  id="table1" width="300" border="2" align="right" cellpadding="1" cellspacing="1">
          <tr class="tb1">
            <td>station</td>
            <td>wind</td>
          </tr>
      </table>
    </td>
  </tr>
</table>

edited Jul 3, 2018 at 10:19

answered Jul 3, 2018 at 10:12

Mamun

69k9 gold badges51 silver badges62 bronze badges

Comments

Sowdhanya · Accepted Answer · 2018-07-03 10:12:00Z

0

Try this

$('.tb1').find("td").each(function()
{
   alert($(this).html());
});

answered Jul 3, 2018 at 10:12

Sowdhanya

634 bronze badges

Comments

Yosvel Quintero · Accepted Answer · 2018-07-03 10:28:35Z

0

You can use Document.querySelectorAll() and Function.prototype.call(): Array.prototype.map() and Array.prototype.join().

Code:

const elems = document.querySelectorAll('tr.tb1 td');
const result = Array.prototype.map.call(elems, el => el.innerHTML).join(' ');

alert(result);

<table border=0>
  <tr>
    <td>
      <table  id="table1" width="300" border="2" align="right" cellpadding="1" cellspacing="1">
          <tr class="tb1">
            <td>station</td>
            <td>wind</td>
          </tr>
      </table>
    </td>
  </tr>
</table>

edited Jul 3, 2018 at 10:28

answered Jul 3, 2018 at 10:23

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

Comments

4b0 · Accepted Answer · 2018-07-11 01:13:02Z

0

You can use jquery text method .text(); or .html() like this:

var data=$("#table1 .tb1").find("td");

alert(data.html());
alert(data.text());

And for css styling

data.css({"color": "blue"});

edited Jul 11, 2018 at 1:13

4b0

22.4k30 gold badges97 silver badges143 bronze badges

answered Jul 3, 2018 at 10:42

Patrick Kamau

11 bronze badge

Collectives™ on Stack Overflow

Return value of specific table element through javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related