CODEWITHSUNDEEP
javascriptjquery
Dave
Dave

Reputation: 1492

.html() jQuery function return NaN

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?

Upvotes: 1

Views: 660

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1074148

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

Upvotes: 6

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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.

Upvotes: 3

Doc Roms
Doc Roms

Reputation: 3308

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

Upvotes: 0

Related Questions