How to loop throught table td and return a string in jquery?

Question

I have a simple table (larger than this example)

 <table cellpadding="0" cellspacing="0" id="chess_board">
  <tbody>
    <tr>
        <td id="A8"><a class="rook black" href="#"></a></td>
        <td id="B8"><a class="knight black" href="#">Cont1</a></td>
        <td id="C8"><a class="bishop black" href="#">Cont2</a></td>
    </tr>
    <tr>
        <td id="A7"><a class="pawn black" href="#">Cont3</a></td>
        <td id="B7"><a class="pawn black" href="#"></a></td>
        <td id="C7"><a class="pawn black" href="#">Cont4</a></td>
    </tr>
   </tbody>
  </table>

In jquery, how do i loop through all td and return a string containg not empty td id and text? In this case a string

 "B8 Cont1 C8 Cont2 A7 Cont3 C7 Cont4"

I know the existence of the 'each' function but it's a callback and i can't build my string during the loop (do i?).

Praveen Kumar Purushothaman · Accepted Answer · 2015-09-02 13:02:02Z

3

Guess you can do this way:

$(function () {
  var allString = "";
  $("#chess_board td[id]").each(function () {
    if ($(this).find(".black").html().trim().length > 0)
      allString += this.id + " " + $(this).find(".black").html().trim() + " ";
  });
  alert(allString);
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<table cellpadding="0" cellspacing="0" id="chess_board">
  <tbody>
    <tr>
      <td id="A8"><a class="rook black" href="#"></a></td>
      <td id="B8"><a class="knight black" href="#">Cont1</a></td>
      <td id="C8"><a class="bishop black" href="#">Cont2</a></td>
    </tr>
    <tr>
      <td id="A7"><a class="pawn black" href="#">Cont3</a></td>
      <td id="B7"><a class="pawn black" href="#"></a></td>
      <td id="C7"><a class="pawn black" href="#">Cont4</a></td>
    </tr>
  </tbody>
</table>

answered Sep 2, 2015 at 13:02

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

Comments

Reinstate Monica Cellio · Accepted Answer · 2015-09-02 13:01:34Z

2

This will do the trick...

var text = "";
$("#chess_board").find("td").each(function() {
    if (this.id !== "" && this.innerText !== "") {
        text += this.id + " " + this.innerText + " ";
    }
});
console.log(text);

You nearly had it. You just declare the string outside the each() function so it is available both during and afterwards.

answered Sep 2, 2015 at 13:01

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

2 Comments

Sasha Grievus Over a year ago

Works perfectly! Thank you!

Reinstate Monica Cellio Over a year ago

No problem - happy to help :)

Rory McCrossan · Accepted Answer · 2015-09-02 13:02:45Z

Instead of each(), you can use map() to create an array of the required values. From there you can join() the array to create the required string. Try this:

var values = $('#chess_board td').filter(function() {
  return $.trim($(this).text()) != '';
}).map(function() {
  return $.trim(this.id + ' ' + $(this).text());
}).get();

console.log(values.join(' '));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" id="chess_board">
  <tbody>
    <tr>
      <td id="A8">
        <a class="rook black" href="#"></a>
      </td>
      <td id="B8"><a class="knight black" href="#">Cont1</a>
      </td>
      <td id="C8"><a class="bishop black" href="#">Cont2</a>
      </td>
    </tr>
    <tr>
      <td id="A7"><a class="pawn black" href="#">Cont3</a>
      </td>
      <td id="B7">
        <a class="pawn black" href="#"></a>
      </td>
      <td id="C7"><a class="pawn black" href="#">Cont4</a>
      </td>
    </tr>
  </tbody>
</table>

suvroc · Accepted Answer · 2015-09-02 13:04:43Z

1

You should try:

var text = "";
$('td').each(function(index, elem) {
    if ($(elem).find('a').text() != '')
    {
        text += elem.id + ' ' + $(elem).find('a').text() + ' ';
    }
});
console.log(text);

https://jsfiddle.net/mgxa3k9g/

answered Sep 2, 2015 at 13:04

suvroc

3,0621 gold badge17 silver badges29 bronze badges

Comments

epascarello · Accepted Answer · 2015-09-02 13:06:11Z

You can use jQuery map()

var tds = $("td");
var txt = tds.map( function () {
    var x = $.trim($(this).text());
    return x.length ? x : null
} ).get().join(" ");
console.log(txt);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" id="chess_board">
  <tbody>
    <tr>
        <td id="A8"><a class="rook black" href="#"></a></td>
        <td id="B8"><a class="knight black" href="#">Cont1</a></td>
        <td id="C8"><a class="bishop black" href="#">Cont2</a></td>
    </tr>
    <tr>
        <td id="A7"><a class="pawn black" href="#">Cont3</a></td>
        <td id="B7"><a class="pawn black" href="#"></a></td>
        <td id="C7"><a class="pawn black" href="#">Cont4</a></td>
    </tr>
   </tbody>
  </table>

Walter Chapilliquen - wZVanG · Accepted Answer · 2015-09-02 13:10:27Z

0

Using arrays could be done in a more orderly way, an example:

var result = [];

$("#chess_board td").each(function(){
  var text = $(this).text();
  text.length && result.push($(this).attr("id") + " " + text);
});

console.log(result.join(" "))

Demo

edited Sep 2, 2015 at 13:10

answered Sep 2, 2015 at 13:03

Walter Chapilliquen - wZVanG

12.1k8 gold badges45 silver badges64 bronze badges

Comments

Vanojx1 · Accepted Answer · 2015-09-02 13:43:06Z

instead of use the each function u can use map like this:

    $(function () {
    	var allString = [];
    	allString = $("#chess_board td").map(function(){
    		return $(this).find("a").html() != "" ? $(this).attr("id")+" "+$(this).find("a").html() : "";
      	}).get();
      	allString = allString.join(" ").trim();
      	alert(allString);
    });

 <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <table cellpadding="0" cellspacing="0" id="chess_board">
      <tbody>
        <tr>
          <td id="A8"><a class="rook black" href="#"></a></td>
          <td id="B8"><a class="knight black" href="#">Cont1</a></td>
          <td id="C8"><a class="bishop black" href="#">Cont2</a></td>
        </tr>
        <tr>
          <td id="A7"><a class="pawn black" href="#">Cont3</a></td>
          <td id="B7"><a class="pawn black" href="#"></a></td>
          <td id="C7"><a class="pawn black" href="#">Cont4</a></td>
        </tr>
      </tbody>
    </table>

Collectives™ on Stack Overflow

How to loop throught table td and return a string in jquery?

7 Answers 7

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related