.html() jQuery function return NaN

Question

I have

<div id="tablePlace"></div>

And

if ($('#radioOne').is(':checked') == true) {
         $("#tablePlace").html(" ");
         $("#tablePlace").append(htmlTable); //htmlTable is a string that contains an html table code
         loadNestedTable(temp);
    }

It works but in the div I find NaN. If I comment $("#tablePlace").append(htmlTable);, NaN doesn't appear.

Why?

UPDATE

htmlValue code:

var tab = '<table id="decretoSingolo">'+
+'<thead>' 
+   '<tr>'
+       '<th>Ente</th>'
+       '<th>CUP</th>'
+       '<th>Decreto impegno</th>'
+       '<th>Data decreto impegno</th>'
+       '<th>Importo impegno</th>'
+       '<th>Finanziato MIUR</th>'
+       '<th>Importo pagato</th>'
+       '<th>Importo in pagamento</th>'
+   '</tr>'
+ '</thead>'
+   '<tbody>'
+   '</tbody>'
+'</table>'

+'<div style="display:none">'    
+   '<table id="dettagliDecretoSingolo">'
+   '<thead>' 
+           '<tr>'
+               '<th>Progressivo pagamento</th>'
+               '<th>Data decreto</th>'
+               '<th>Numero decreto pagamento</th>'
+               '<th>Tipo pagamento</th>'
+               '<th>Importo in pagamento</th>'
+               '<th>Nota decreto</th>'
+           '</tr>'
+       '</thead>'
+       '<tbody>'
+       '</tbody>'
+   '</table>'
+'</div>';

htmlTable value:

<table id="myTable">NaN<tr><th>Ente</th><th>CUP</th><th>Decreto impegno</th><th>Data decreto impegno</th><th>Importo impegno</th><th>Finanziato</th><th>Importo pagato</th><th>Importo in pagamento</th></tr></thead><tbody></tbody></table><div style="display:none"><table id="myTableDetails"><thead><tr><th>Progressivo pagamento</th><th>Data decreto</th><th>Numero decreto pagamento</th><th>Tipo pagamento</th><th>Importo</th><th>Nota</th></tr></thead><tbody></tbody></table></div>

NaN appears after .append(). There is a problem in the htmlTable code?

@AnoopJoshi: Or better yet, use the debugger and inspect it as the code runs. — T.J. Crowder
– T.J. Crowder, Commented Jan 7, 2016 at 10:20
htmlTable is not numeric value but could you please post from where it comes? — Bhushan Kawadkar
– Bhushan Kawadkar, Commented Jan 7, 2016 at 10:22
You have NaN in your html how you expect from it to just disapear. — Zakaria Acharki
– Zakaria Acharki, Commented Jan 7, 2016 at 10:23

T.J. Crowder · Accepted Answer · 2016-01-07 10:52:12Z

6

The problem is that you have a unary + in your code:

   var tab = '<table id="decretoSingolo">'+
   +'<thead>' 
// ^--- Here

To fix it:

Remove one of the +s. Usually it's best to use the + at the end of the previous line, to avoid issues with automatic semicolon insertion.

Why you're getting `NaN`:

It's a unary + because it follows the + at the end of the previous line, with whitespace in-between them (so it's not ++ as I initially suggested).

That unary + will try to take its operand (the string that follows it) and convert it to a number, and if that can't be done will yield NaN. Then the operands to the + on the previous line are a string and a number, so that addition operator converts the string to number and adds it to NaN (which yields NaN).

You can see it here:

var tab = '<table id="decretoSingolo">'+
+'<thead>' 
+   '<tr>';
document.body.innerHTML = tab;

Side note: There's no need to do .html(" ") and then .append(htmlTable), just do .html(htmlTable).

edited Jan 7, 2016 at 10:52

answered Jan 7, 2016 at 10:29

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

Doc Roms Over a year ago

I'm very agree with "Usually it's best to use the + at the end of the previous line" . ^^

Zakaria Acharki · Accepted Answer · 2016-01-07 10:37:22Z

3

You have double plus sign + in the following lines, remove one :

var tabellaDecretoSingolo = '<table id="decretoSingolo">'+
+'<thead>' 
+   '<tr>'

Should be :

var tabellaDecretoSingolo = '<table id="decretoSingolo">'
+'<thead>' 
+   '<tr>'

Hope this helps.

edited Jan 7, 2016 at 10:37

answered Jan 7, 2016 at 10:25

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

3 Comments

Remigius Stalder Over a year ago

why not directly $("#tablePlace").html(htmlTable); ?

TKA Over a year ago

Omg i had the same issue thank you very much, it made the trick

Zakaria Acharki Over a year ago

You're welcome, and I'm glad to see this answer helping after 3 years.

Doc Roms · Accepted Answer · 2016-01-07 10:31:24Z

0

First, you can optimise your javascript:

if ($('#radioOne').is(':checked') == true) {
     $("#tablePlace").html(" ");
     $("#tablePlace").append(htmlTable); //htmlTable is a string that contains an html table code
     loadNestedTable(temp);
}

by

if ($('#radioOne').is(':checked') == true) {
     $("#tablePlace").html(htmlTable); //html() replace all content of your element child. 
     loadNestedTable(temp);
}

Also, you've a problem when you define your "htmlTable" value

<table id="myTable">NaN<tr> [...]

check after your ">" of your element if you don't add a NAN var...

answered Jan 7, 2016 at 10:31

Doc Roms

3,3081 gold badge22 silver badges38 bronze badges

Collectives™ on Stack Overflow

.html() jQuery function return NaN

3 Answers 3

To fix it:

Why you're getting `NaN`:

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

To fix it:

Why you're getting NaN:

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Why you're getting `NaN`: