jQuery: Get <td>'s html only

Question

Hey,

i have this code. It returns all the td code including the td /td tags. I want it to only return the content/html of the td

<td>Hey</td> 

should give me just

Hey

 

jQuery("#ReportTable", html).each(function (index, tr) {
    arr[index] = jQuery("tbody tr", tr).map(function (index, td) {
        return jQuery(td).html(); 
    });
});

The jQuery code gives me an array looking like this:

arr[0] = {"<td>1</td>", "<td>Hey</td>", "<td>Some data</td>" } 
arr[1] = {"<td>2</td>", "<td>There</td>", "<td>Some other data</td>" }

From html looking like this:

<table id="ReportTable"><tr><td>1</td><td>Hey</td><td>Some data</td></tr><tr><td>2</td><td>There</td><td>Some other data</td></tr></table>

So the array is good except that i only need the html / text inside the td's.

Answer 1

You need to go down one more level in your selector, like this:

jQuery(".ReportTable", html).each(function (index, tr) {
  arr[index] = jQuery("tbody tr td", tr).map(function (index, td) { return jQuery(td).html(); });
});

Or, just use .text() instead or .html(), like this:

jQuery(".ReportTable", html).each(function (index, tr) {
  arr[index] = jQuery("tbody tr", tr).map(function (index, td) { return jQuery(td).text(); });
});

(I have ".ReportTable" instead of "#ReportTable", as comments noted on the question IDs need to be unique...so you should use class="ReportTable" if there are multiple)

Answer 2

So why not select the TD instead of the TR in your selector and work from there? jQuery's html() function leverages htmlElement.innerHtml, so you shouldn't have any problems once you select the correct elements.

Answer 3

It seems to me that the simplest solution would be to work directly on the TDs instead of selecting their parent first. Does the code below solve the problem? (I could have mis-understood - apologies if that's the case!)

jQuery("#ReportTable td", html).each (function (index) {
  arr[index] = jQuery(this).html();
}