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?
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).
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.
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...
Related
I am trying to set the content of a div which has the id "results" to have the value of a variable (i). I also want to set the ID of the element to the value of another variable (a).
var i="somecontent";
var a=0;
document.getElementById("results").innerHTML += "<p "
+ "id=" + """ + a + "" " + "\>" + i + "<p/>
This however, is resulting in the ID of the <P> tag being id=""0"" rather than id="0".
Here is the output:
<p id=""0"">somecontent</p>
However, I want to display:
<p id="0">somecontent</p>
What can I do to remove the extra quotations?
Those extra quotation marks are the " character references you put in. Character references are HTML and therefore parsed by the HTML parser, not the JavaScript parser. Since " is a way of representing a literal double quote character without having it be treated specially by the HTML parser, the parser thinks you intended for it to be part of the attribute value, and that's what you get.
If you were intending to add escaped quotes to your HTML that don't interfere with the JavaScript parser, escape them with backslashes or use single quotes instead:
document.getElementById("results").innerHTML += "<p id=\"" + a + "\">" + i + "</p>";
document.getElementById("results").innerHTML += "<p id='" + a + "'>" + i + "</p>";
You can also leave them out entirely, unless you're writing XHTML for some reason:
document.getElementById("results").innerHTML += "<p id=" + a + ">" + i + "</p>";
Try this:
document.getElementById("myDiv").innerHTML += "<p "
+ "id=" + a + "\>" + i + "<p/>";
A better way: "id=\"" + a + "\"" + "\>" + i + "
You only need to use the html codes like " in your html.
Javascript handles " just fine.
Removed html codes:
var i="somecontent";
var a=0;
document.getElementById("results").innerHTML += "<p " + "id=\'" + a + "\'/>" + i + "</p>"
Use createElement, createTextNode and appendChild
I do not recommend numeric IDs - they will come back and bite you.
This is a preferred method - I assume you have a loop
window.onload=function() {
var par,text,res = document.getElementById("results");
var content = ["Paragraph1","Paragraph2","Paragraph3"];
for (var i=0;i<content.length;i++) {
par = document.createElement("p");
par.id = "A"+i;
text = document.createTextNode(content[i]);
par.appendChild(text);
res.appendChild(par);
}
}
<div id="results"></div>
Your inner HTML quotes are misplaced. Try this:
var i = "somecontent";
var a="0";
var j = document.getElementById("results").innerHTML += '<p id="' + a + '">' + i + '</p>';
console.log(i);
console.log(j);
<Div id="results"></Div>
I am sure i have the right logic here and tried after and insertafter but does not seem to work... any ideas?
JS:
if(content) {
var $table = $('<table/>');
$table.addClass('product-table');
$table.append(
'<tr><td><img src="' + content[0].image + '" class="thumbnail"/></td>' +
'<td><strong>' + content[0].title + '</strong></td>' +
'<td>SKU: ' + content[0].sku + '</td>' +
'<td>£' + content[0].price + '</td></tr>'
);
$table.after('<div class="button-container">' +
'view cart' +
'checkout' +
'</div>');
$(notice_content).find(notice_inner).html($table);
}
after method requires that the target element ($table) be in DOM - which it isn't until next statement with .html method.
Just move line with after call after the line with html call:
$(notice_content).find(notice_inner).html($table);
$table.after('<div class="button-container">view cartcheckout</div>');
Useful references:
http://api.jquery.com/after
I need to use join() as JS own method to add a table format to the values in those arrays.
This is an example of my two arrays to diplay, and the table layout should look like this.
This is the part of my code; ovbiously is not working ok, because Im getting a wrong "L" table style format when it runs.
I know its look terrible to parse HTML like that, but this code is in
Google Apps Scripts, so this table is gonna be send it by email.
Any idea how to get the proper format?
Thanks.
|-------|-------|
| user | skill |
|-------|-------|
| user | skill |
|-------|-------|
body +=
"<table style=" + STYLE.TABLE + ">" +
outUsers.join("<tr><td style=" + STYLE.TD + ">") + "</td></tr>" +
outSkills.join("<tr><td style=" + STYLE.TD + ">") + "</td></tr>" +
"</table>";
In this case Array.prototype.join() doesn't do the job I'd use Array.prototype.reduce() instead
Here is an example of what it could look like:
EDIT according to PHPglue comment to have both users and skills on the same row:
var body ='';
var outUsers = ['me', 'you', 'her'],
outSkills = ['eating', 'sleeping', 'working hard'],
STYLE = {
TABLE: "border: red;",
TD: "border: blue;"
},
getTR = function (prev, curr, index) {
return prev + '<tr>' + openingTD + curr + '</td>' + openingTD + outSkills[index] + '</td></tr>';
};
var openingTD = '<td style="' + STYLE.TD + '">';
body += '<table style="' + STYLE.TABLE + '">' +
outUsers.reduce(getTR, '') +
"</table>";
I think this is what you need to see:
var table = '<table><tbody>';
for(var i=0,l=outUsers.length; i<l; i++){
table += '<tr><td>'+outUsers[i]+'</td><td>'+outSkills[i]+'</td></tr>';
}
table += '</tbody></table>';
You should style with CSS. You should read my comments above, as well.
its been an hour since i started working on this and i cand find the problem
this is my code inside the loop
$.each(data,function(key,game){
console.log(game.teams_odds[1].game_odds_value_modified);
var home_odds = parseFloat(game.teams_odds[0].game_odds_value_modified).toFixed(2);
var away_odds = parseFloat(game.teams_odds[1].game_odds_value_modified).toFixed(2);
console.log(away_odds);
$("#oddsTable").append('<tr>' +
'<td>' +
'<span class="red">Game ID : '+game.game_id+' </span>' +
'<br>'+game.game_start_time+'<br>' +
'</td>' +
'<td>' +
'<span class="teamName">'+game.teams_odds[0].team_name_eng+'</span>' +
'<span class="teamName">'+game.teams_odds[1].team_name_eng+'</span>' +
'</td>' +
'<td>' +
'<span style="display: block">' +
'<a href="{if $isDotNet == 0}/{$kioskUrl}/single-pop/{$dataHolders.team_home_game_details}/bettype/{$betType}/baseball/{else}/pop_bet.php?gdid={$dataHolders.team_home_game_details}{/if}" class="teamOdds{if $dataHolder.blink_it == 1 && $dataHolder.blink_it_game_details_id == $dataHolder.game_details_id_home} blinkMe{/if}" style="font-size: 15px; font-weight: bold;">' +
+home_odds+
'</a>' +
'</span>' +
'<span style="display: block">' +
'<a href="{if $isDotNet == 0}/{$kioskUrl}/single-pop/{$dataHolders.team_away_game_details}/bettype/{$betType}/baseball/{else}/pop_bet.php?gdid={$dataHolders.team_away_game_details}{/if}" class="teamOdds{if $dataHolder.blink_it == 1 && $dataHolder.blink_it_game_details_id == $dataHolder.game_details_id_away} blinkMe{/if}" style="font-size: 15px; font-weight: bold;">' +
+away_odds+
'</a>' +
'</span>' +
'<br>'+game.game_start_time+'<br>' +
'</td>' +
'</tr>'
);
});
when i try to use console.log() and alert() to show the values just fine, but when i see my rendered html from using append it the number lacks the number zero zero
say 1.60
becomes 1.6
console.log(away_odds) //1.60
alert(away_odds) //1.60
what i want is for it to display 1.60 but it keeps displaying 1.6
You've concatenated the previous line already:
'<a href="{if $isDotNet == 0} ... style="font-size: 15px; font-weight: bold;">' +
+away_odds+ // extra + --^
'</a>' +
Leading + on the second line is actually Unary Plus operator, which converts away_odds to a number again. Also home_odds will be converted to a number for the same reason.
toFixed(2) should only be used in the part of the code that outputs it.
In this case,
var home_odds = parseFloat(game.teams_odds[0].game_odds_value_modified);
var away_odds = parseFloat(game.teams_odds[1].game_odds_value_modified);
And where you are printing the variables use
home_odds.toFixed(2)
I have tested it and it works fine
I have the following piece of code that I would like to style:
var dateString = val.date; // this display my blog post date e.g. "2013-09-02 15:04:50"
var split = dateString.split(' ');
output += '<div class="postxt">' (split[0] +" at "+ split[1]) '</div>';
How can I add a span or a div for both split0 & split1
Thanks
Just add the SPAN to the HTML, the same way you do the DIV.
output += '<div class="postxt"><span class="date">' + split[0] +
'</span> at <span class="time">' + split[1] + '</span></div>';
You also need to use + to concatenate the HTML elements with the variables.
Your braces should be pluses in the last line:
output += '<div class="postxt">' + split[0] + " at " + split[1] + '</div>';
Note that you can leave the braces in, but they are neither required nor do they make any differences when concatenating strings:
output += '<div class="postxt">' + (split[0] + " at " + split[1]) + '</div>';
Add whatever divs, spans, style classes you want:
output += '<div class="postxt"><span class="foo">' + split[0] + "</span> at <span class="bar">" + split[1] + '</span></div>';
The error "Missing ... before statement" you got was only on the JavaScript level, it has nothing to do with adding further HTML elements.