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.

Might be similar to: https://stackoverflow.com/q/376081/7124761 — Prashant Pimpale, Jul 03 '18 at 10:07
`td`s don't have `value`, they have `textContent` and `innerHTML`. Notice, that `find` returns a jQuery object, though. — Teemu, Jul 03 '18 at 10:07

score 1 · Answer 1 · answered Jul 03 '18 at 10:07

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>

score 0 · Answer 2 · answered Jul 03 '18 at 10:12

0

Try this

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

answered Jul 03 '18 at 10:12

Sowdhanya

63
4

Mamun · Accepted Answer · 2018-07-03T10:19:11.283

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

Yosvel Quintero · Answer 4 · 2018-07-03T10:28:35.003

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>

score 0 · Answer 5 · edited Jul 11 '18 at 01:13

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 '18 at 01:13

4b0

21,981
30
95
142

answered Jul 03 '18 at 10:42

Patrick Kamau

1
1

Return value of specific table element through javascript

5 Answers5

Linked