We Keep Coding

querySelectorAll with two or more dataset as queries

I have a table i created lets call it RPT_ACCOUNTS
CODE|DESCRIPTION|TYPE
01|BANK|BA
02|TAX|TA
When I pull the information from the datatable i create the table visually in html
row.dataset.rpt_accounts_code= DBRow.CODE;
row.dataset.rpt_accounts_description= DBRow.DESCRIPTION;
row.dataset.rpt_accounts_type= DBRow.TYPE;
So now I have the 3 datasets.
now I want to filter so i can run through a for loop. (this is my problem)
if i use
var ROWS= RPT_ACCOUNTS.querySelectorAll('tr[data-rpt_accounts_code="' + searchvalue + '"]');
IT WORKS!
But now i need two search values
so i read up and saw it is supported with a "," but it doesn't work. i have tried many combinations
var ROWS= RPT_ACCOUNTS.querySelectorAll('tr[data-rpt_accounts_code="' + searchvalue + '"],tr[data-rpt_accounts_type="' + searchvalue2 + '"]');
var ROWS= RPT_ACCOUNTS.querySelectorAll('tr[data-rpt_accounts_code="' + searchvalue + '"],[data-rpt_accounts_type="' + searchvalue2 + '"]');
var ROWS= RPT_ACCOUNTS.querySelectorAll('tr[data-rpt_accounts_code="' + searchvalue + '"]','tr[data-rpt_accounts_type="' + searchvalue2 + '"]');
anyone one of the above methods go through, but it pulls all the data not just the line I'm looking for.
Any help would be awesome.
jsfiddle
https://jsfiddle.net/custardcs/q8a6uysg/5/

If you want to query multiple attributes, express them like el[propA=val][propB=val], so, in your case
var ROWS= RPT_ACCOUNTS.querySelectorAll('tr[data-rpt_accounts_code="' + searchvalue + '"][data-rpt_accounts_type="' + searchvalue2 + '"]')

how to add html in dynamically created div

I create a div from a DB with the below code
<div id="' + row.flatno + '"></div>
How can I select this div in order to add html code?? I use this
$('input').keyup(function(){
$(this).html("SomeText: <strong>" + diff + "</strong>");
});
but nothing happens

As #xzoert mentioned with this you refer to input.
$('input').keyup(function(){
$('#'+row.flatno).html("SomeText: <strong>" + diff + "</strong>");
});
The part
$('#'+row.flatno)should query id that you are looking for.

Execute an if condition if a button is not inside a <tr> element

I want to execute my if condition only when a button is not inside the tr. Here is my code:
if (!$("tr").hasClass('hidebutton')) {
var OriginalContent = $("#tabletask tr[data-id='" + parrentid + "'] > td:first-child").text();
$("#tabletask tr[data-id='" + parrentid + "'] > td:first-child").html("<button class=hidebutton>-</button> " + OriginalContent + " ");
}
But it is not working. The if condition is executing all the time.

I think I get a little of what you want.
It seems like you were to create a button if no button found inside "tr" right? If I'm correct, you may play the snippet below.
if(!$("tr button").hasClass("hidebutton")){
$("#tabletask tr[data-id='" + parrentid + "'] > td:first-child").html('<button class="hidebutton">-</button> ' + OriginalContent);
}
by the way it seems like you missed something on this line
html("<button class=hidebutton>-</button> " + OriginalContent + " ");
You need to enclose hidebutton like this 'hidebutton' see below;
.html("<button class='hidebutton'>-</button> " + OriginalContent + " ");

Another way is to use a loop:
$("tr").each(function( index, value ) {
if (!$(this).hasClass('hidebutton')){
console.log($(this,"td:first-child").text());
}
});
Take a look at the jsfiddle

How to change css styling for different lines within a paragraph in javascript

So I have this code that defined a variable called circles, and appended it a title. The title has four lines, first is the country, second is the price, 3rd is the value, and 4th is the gdppc.
Now I want to make the gdppc a larger font size than the previous 3 variables. This would require me to style gdppc separately from the others (currently they are all styled by this css called tipsy). However, I don't know how exactly would I do that.
circles.append("title")
.text(function(d) { return d.country + "<br/> " + "Price=" + d.trust
+ ", Value=" + d.business + "<br/> " + d.gdppc; });
$(".circles").tipsy({ gravity:'nw', html: true,});
The idea is probably to make gdppc a separate variable, and style it separately. How is this implemented in coding?
I tried
var ratings = function(d) {return d.gdppc};
circles.append("title")
.text(function(d,ratings) { return d.country + "<br/> " + "Price=" + d.trust
+ ", Value=" + d.business + "<br/> " + ratings; });
$(".circles").tipsy({ gravity:'nw', html: true,});
$(".ratings).myownstyle({});
and it doesn't work, probably because of I am an amateur who doesn't understand anything about JavaScript.

Just wrap it:
circles.append("title")
.text(function(d) {
return d.country + "<br/> " + "Price=" + d.trust
+ ", Value=" + d.business + "<br/> <strong>" + d.gdppc + "</strong>;
});
CSS
strong {
font-size: 1.25em;
}
Note:
You could use any tag here, <span>, <em> and/or you could use classes to hook the style to them, rather than just adding a css rule to the element.

How to Solve this "missing ) argument after list"?

This looks like a trivial question, but I am not sure how to deal with it. I have a DIV tag generated from javascript that goes like this:
$('#results')
.append('<DIV id='
+ A.pid
+ ' onmouseover=function(){google.maps.event.trigger(marker, 'mouseover');};><H3>'
+ A.name
+ '</H3></DIV>');
Firebug is giving me an error "missing ) argument after list" as it does not recognise the ) immediately after 'mouseover'. How do I resolve this?
UPDATE:
I understand this is about escaping quote, just that doing \'mouseover\' produces a syntax error upon mouseover of the DIV and doing "mouseover" produces a blank document.
The syntax error reads: function(){google.maps.event.trigger(marker,

You need to escape quote if it's inside another quote:
var x = "I don't like you!";
var y = 'I don\'t like you!';
var z = 'echo "this text?";';
To implement it on your case, it would be like this:
'<DIV id='
+ A.pid
+ ' onmouseover=function(){google.maps.event.trigger(marker, \'mouseover\');};><H3>'
+ A.name
+ '</H3></DIV>'

You issue is in the use of the ' character to delimit both the function and the arguments in your call.
Either switch one set of ' out for " or use \' around the values of the argument
$('#results')
.append('<DIV id='
+ A.pid
+ ' onmouseover=function(){google.maps.event.trigger(marker, "mouseover");};><H3>'
+ A.name
+ '</H3></DIV>');
//OR
$('#results')
.append('<DIV id='
+ A.pid
+ ' onmouseover=function(){google.maps.event.trigger(marker, \'mouseover\');};><H3>'
+ A.name
+ '</H3></DIV>');

Try to generate the following string
'<DIV id=' +
A.pid +
' onmouseover=\"google.maps.event.trigger(marker, \'mouseover\');\"> <H3>' +
A.name + '</H3></DIV>'

You need to put " around the values of your html attributes. Otherwise the browser thinks the attribute ends at the next whitespace and that is exactly right after the (marker, part.
$('#results')
.append('<DIV id="'
+ A.pid + '"'
+ ' onmouseover="function(){google.maps.event.trigger(marker, \'mouseover\');};"><H3>'
+ A.name
+ '</H3></DIV>');

Several things
Stop putting HTML in all caps. This is the 21st century not the 20th century.
You don't need an anonymous function for the onmouseover event.
Wrap attribute values in either single or double quotes (I use double below).
Read about JavaScript strings and quotes. Here is a tutorial.
Try this
$('#results').append('<div id="' +
A.pid +
'" onmouseover="google.maps.event.trigger(marker, \'mouseover\');"><h3>' +
A.name +
'</h3></div>');