JQuery display concatenated list of text from visible HTML table cells

Question

I have a simple table. In the first td in each row, there is a farmer's name (eg, "farmer1", "farmer2", etc.). So, each row represents information on a different farmer. Suppose that for some valid reason some of the rows are hidden. At any given time, I want to be able to show a list of the farmers that are visible in the table.

For example, if the state of my table looks like this

Farmer #  | apple | orange | pear
farmer2   |   0   |   1    |  1 
farmer3   |   0   |   1    |  0
farmer4   |   0   |   1    |  0

I want to have a link that, when clicked, will toggle the visibility of the following string (text) on an area of the page:

farmer2 farmer3 farmer4

Here is an almost fully functional solution: jsfiddle.net/8aszmfkq/2/

The part I can't figure out is how to extract the text in the first td of each visible row, concatenate the extracted text, and write the concatenated text to a div. (If you remove the JS call to updateFarmerList() , you can see that the toggle works... the problem is really extracting and concatenating.)

Answer 1

TypeError: this.text is not a function

Please correct $(this.text()) to $(this).text()

updated fiddle: http://jsfiddle.net/8aszmfkq/3/