CODEWITHSUNDEEP
javascripthtml
lu555
lu555

Reputation: 43

Return value of specific table element through javascript

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

Upvotes: 0

Views: 95

Answers (5)

Patrick Kamau
Patrick Kamau

Reputation: 1

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"});

Upvotes: 0

Yosvel Quintero
Yosvel Quintero

Reputation: 19060

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>

Upvotes: 0

Mamun
Mamun

Reputation: 68933

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

Upvotes: 0

Sowdhanya
Sowdhanya

Reputation: 63

Try this

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

Upvotes: 0

Tareq
Tareq

Reputation: 5363

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>

Upvotes: 1

Related Questions