Develop Reference

Google sheets script - Unable to get background color from cells that are part of pivot table

I have written the following code which replicates a Google Sheets pivot table in HTML along with the formatting to send out in an email.
issue: getBackgrounds() does not return the colours of the cells of the pivot table (it always returns #FFFFF). I verified the range to be correct, because the table is rendered with the correct amount of rows and columns along with the data values. However without styling. Further, if the colour of a cell is changed manually in the Sheets UI before running the script, then getBackgrounds() will fetch that colour. How can I retrieve the formatting of the pivot table?
code:
function getData(){
let ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("TCD").getRange(5,1).getDataRegion();
let background = ss.getBackgrounds();
let val = ss.getDisplayValues();
let fontColor = ss.getFontColors();
let fontStyles = ss.getFontStyles();
let fontWeight = ss.getFontWeights();
let fontSize = ss.getFontSizes();
return [val,background,fontColor,fontStyles,fontWeight,fontSize];
}
function setupEmail(attachment, sendBool) {
let ss_data = getData();
let data = ss_data[0];
let background = ss_data[1];
let fontColor = ss_data[2];
let fontStyles = ss_data[3];
let fontWeight = ss_data[4];
let fontSize = ss_data[5];
html += "<table border='1' style=\"background-color:#000000;\">";
for (let i = 0; i < data.length; i++) {
html += "<tr>"
for (let j = 0; j < data[i].length; j++) {
html += "<td style=\"height:20px;background-color:" + background[i][j] + "; color: " + fontColor[i][j] + "; font-style: " + fontStyles[i][j] + "; font-weight: " + fontWeight[i][j] + "; font-size: " + (fontSize[i][j] + 6) + "px; text-align: center;\">" + data[i][j] + "</td>";
Logger.log(background[i][j]);
}
html += "</tr>";
}
html + "</table>"
EDIT: I have worked around this by hardcoding the background-color. If anyone knows why the background colors of a pivot table cannot be returned, please do contribute.

How to show retrieved data from firebase in html

How to show the data retrieved from firebase in a container.
this is my code
var dbBlogs = fiebase.database.ref("users").child("blogs").orderByChild("time");
dbBlogs.on("value", function(blogs){
if (blogs.exists())
{
var container = "";
blogs.forEach(function(singleBlog){
var mDesc = singleBlog.val().desc;
var mTime = singleBlog.val().time;
var mDate= singleBlog.val().date;
container += "<div class='jumbotron bg-light text-dark border border-dark'>";
container += "<div class='row'>";
container += "<div class='col-sm-5'> <p style='color:grey;>"
+"Desc: " + mDesc;
+"Date" + mTime;
+"time" + mDate;
+ "</p> </div>";
container += "/div>";
container += "/div>";
});
$("blogs").html(container);
}
});
this is my database
enter image description here
Please can anyone help me, I am new

How to make list in jQuery mobile nested list?

Can you please tell me how to make list in jQuery mobile? I am trying to make this type list as given in fiddle on pop up screen dynamically .
Here is the fiddle
In this fiddle I make two rows.In first row there is only p tag. But in second row there is nested collapsible rows. I need to make same thing in pop up screen. I am able to make first row. But In my second row contend is null why? Can you suggest where I am wrong?
fiddle
$(function () {
$('#test').click(function(){
alert('d');
createCommandPopUpTabs();
$("#tabbedPopup").popup("open");
});
});
var tabsHeader = [ "InputParameter", "basic"];
var tabsHeader_basic = [ "XYZ", "Third Level",
];
function createCommandPopUpTabs(){
var header = "<h3 >dd</h3>";
var commmand = 'dd';
var button = '<button onclick="return submitCommand("'+
'")" style="" class="donebtn common-button1">Save</button>';
$("#commandInfo").append(button);
$("#commandInfoheader").html(header);
for ( var i = 0; i < tabsHeader.length; i++) {
var headerId = tabsHeader[i] + "_tab" + commmand;
var header = "<div data-role='collapsible' data-collapsed='false' id='"
+ headerId + "'><h3>InputParameter</h3></div>";
var content ;
if(tabsHeader[i]=="InputParameter"){
content = "<p>yes</p>";
}else if(tabsHeader[i]=="basic"){
for ( var i = 0; i < tabsHeader_basic.length; i++) {
headerId = tabsHeader_basic[i] + "_tab" + commmand;
header = "<div data-role='collapsible' data-collapsed='false' id='"
+ headerId + "'><h3>basic</h3></div>";
content += getcontend(tabsHeader_basic[i]);
}
}
$("#tabbedSet").append(header);
$("#tabbedSet").find("#" + headerId).append(content);
$("#tabbedSet").collapsibleset("refresh");
}
}
function getcontend(name){
if(name=="Third Level"){
return"<p>Third Level></p>";
} if(name=="XYZ"){
return"<p> second Level></p>";
}
}

There are errors in your code and logic. I will only go over a couple of them to hopefully get you on the right path:
In tabsHeader_basic array the Third Level has a space in it which you later use as an ID which makes it an invalid ID because you cannot have spaces in an ID.
From the HTML 5 Draft:
The value must not contain any space characters.
Also, the "basic" collapsible div needs to exist before you start adding the nested collapsible div.
So this line needs to come out of the for loop
header = "<div data-role='collapsible' data-collapsed='false' id='"+ headerId + "'><h3>basic</h3></div>";
Go through the JSFiddle and compare your code agaisnt my changes.
Hopefully that helps! Let me know if you have any other questions.

I have updated createCommandPopUpTabs() function.
Also removed space in Third Level on var tabsHeader_basic = ["XYZ", "ThirdLevel"];
Check the Updated Fiddle
function createCommandPopUpTabs() {
var header = "<h3 >dd</h3>";
var commmand = 'dd';
var button = '<button onclick="return submitCommand("' +
'")" style="" class="donebtn common-button1">Save</button>';
$("#commandInfo").html(button);
$("#commandInfoheader").html(header);
$("#tabbedSet").html('');
for (var i = 0; i < tabsHeader.length; i++) {
var headerId = tabsHeader[i] + "_tab" + commmand;
var header = "<div data-role='collapsible' data-collapsed='true' id='" + headerId + "'><h3>" + tabsHeader[i] + "</h3></div>";
$("#tabbedSet").append(header);
var content;
if (tabsHeader[i] == "InputParameter") {
content = "<p>yes</p>";
$("#tabbedSet").find("#" + headerId).append(content);
} else if (tabsHeader[i] == "basic") {
for (var j = 0; j < tabsHeader_basic.length; j++) {
var headerId1 = tabsHeader_basic[j] + "_tab" + commmand;
var header1 = "<div data-role='collapsible' data-collapsed='true' id='" + headerId1 + "'><h3>" + tabsHeader_basic[j] + "</h3></div>";
var content1 = getcontend(tabsHeader_basic[j]);
$("#tabbedSet").find("#" + headerId).append(header1);
$("#tabbedSet").find("#" + headerId1).append(content1);
}
}
$("#tabbedSet").collapsibleset("refresh");
}
}

How can you determine the minimum width of a html table using javascript?

If a html table is set to table-layout: auto;, it has a minimum width set by the browser determined by the contents of the table. So even with width: 100%, the table will go beyond its container. Is there a way using javascript to find this minimum width?
I'm trying to make a responsive table solution. I made something similar to this: http://jsbin.com/apane6/14
At mobile, the table's contents are hidden and you click on it to see a full screen version of it. Right now I'm using media queries, but I'd like to know the exact width the table would have to switch to this mobile view. You can even see in the example at one point the table stretches beyond the width of the page creating a scroll bar, which I'm trying to avoid.
Here is my CSS:
table {
border-collapse: collapse;
border-spacing: 0;
table-layout: auto;
width: 100%;
}
#media (max-width: 768px) {
table {
table-layout: fixed;
white-space:nowrap;
}
th, td {
overflow: hidden;
height: 15px;
font-size: 0;
color: transparent
}
}

Just for the fun of it, I played around with the code this afternoon and came up with this complicated FIDDLE which is really only a start.
It breaks down the block model into each component of each part of the table. If all of your tds are the same width, then you'll need to only do one td (:eq(0)), if not, you'll have to iterate through all the columns. You can adjust the inner width to whatever size you want, assuming no contents.
It's a bit complex, but if you sum the relevant parts of the element it should give you an answer down to the pixel.
JS
var tableleftmargin = $('table').css("margin-left").slice(0, -2);
var tableleftborder = $('table').css("borderLeftWidth").slice(0, -2);
var tableleftpadding = $('table').css("padding-left").slice(0, -2);
var tdleftborder = $('table tr td:eq(0)').css('borderLeftWidth').slice(0, -2);
var tdleftpadding = $('table tr td:eq(0)').css('padding-left').slice(0, -2);
var tdinnerwidth = $('table tr td:eq(0)').css('width').slice(0, -2);
var tdrightpadding = $('table tr td:eq(0)').css('padding-right').slice(0, -2);
var tdrightborder = $('table tr td:eq(0)').css('borderRightWidth').slice(0, -2);
var rightpaddingwidth = $('table').css("padding-right").slice(0, -2);
var rightborderwidth = $('table').css("borderRightWidth").slice(0, -2);
var rightmarginwidth = $('table').css("margin-right").slice(0, -2);
$('.putmehere').html(
"Table left margin = " + tableleftmargin + "<br />" +
"Table left border = " + tableleftborder + "<br />" +
"Table left padding = " + tableleftpadding + "<br />" +
"td left border = " + tdleftborder + "<br />" +
"td left padding = " + tdleftpadding + "<br />" +
"td inner width = " + tdinnerwidth + "<br />" +
"td Right padding = " + tdrightpadding + "<br />" +
"td Right border = " + tdrightborder + "<br />" +
"Table right padding = " + rightpaddingwidth + "<br />" +
"Table right border = " + rightborderwidth + "<br />" +
"Table right margin = " + rightmarginwidth + "<br />"
);

Well this isn't exactly how I wanted to do it, but it works. Because I was copying the table to display as an overlay, I could grab it's width instead of trying to figure out what the original table's width was (I couldn't because it's CSS was changed). Hope this JS makes sense.
$(document).ready(function (){
$('.overlay-element').on("click", function() {
var overlayID = $(this).attr('id') + "-overlay";
//animate overlay opening
$("#"+overlayID).addClass('open');
//drag.js allowing you to move the container within overlay with mouse
drag("#"+overlayID+' .overlay-container').bind();
//exit overlay
$("#"+overlayID+' .overlay-exit').on("click", function() {
$("#"+overlayID).removeClass( 'open' );
});
});
});
$(window).load(function() {
//create overlay elements
$('.overlay-element').each( function() {
var overlayID = $(this).attr('id') + "-overlay";
$("body").append(
"<div id='"+overlayID+"' class='overlay overlay-scale'>
<div class='overlay-exit'></div>
<div class='overlay-container'>"
+ $(this)
.clone()
.removeAttr('id')
.removeClass('overlay-element closed')[0]
.outerHTML
+ "</div>
</div>"
);
//switch to mobile view for tables if their min width is larger than parent
if ($("#"+overlayID+' table').width() > $(this).width()) {
$(this).addClass('closed');
}
});
});
$(window).resize(function() {
//switch to mobile view for tables if their min width is larger than parent
$('.overlay-element').each( function() {
var overlayID = $(this).attr('id') + "-overlay";
if ($("#"+overlayID+' table').width()>$(this).width()) {
$(this).addClass('closed');
} else {
$(this).removeClass('closed');
}
});
});

Creating html table using Javascript not working

Basically, I want the user the just change the 'height' variable to how ever many rows he wants, and then store the words which each td in the row should contain, and the code should then generate the table.
My html is just this:
<table id="newTable">
</table>
This is my Javascript:
<script type="text/javascript">
var height = 2; // user in this case would want 3 rows (height + 1)
var rowNumber = 0;
var height0 = ['HeadingOne', 'HeadingTwo']; // the words in each td in the first row
var height1 = ['firstTd of row', 'secondTd of row']; // the words in each td in the second row
var height2 = ['firstTd of other row', 'secondTd of other row']; // the words in each td in the third row
$(document).ready( function() {
createTr();
});
function createTr () {
for (var h=0; h<height + 1; h++) { // loop through 3 times, in this case (which h<3)
var theTr = "<tr id='rowNumber" + rowNumber + "'>"; // <tr id='rowNumber0'>
$('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table
for (var i=0; i<window['height' + rowNumber].length; i++) {
if (i == window['height' + rowNumber].length-1) { // if i==2, then that means it is the last td in the tr, so have a </tr> at the end of it
var theTd = "<td class='row" + rowNumber + " column" + i + "'>" + window['height' + rowNumber][i] + "</td></tr>";
$('#rowNumber' + rowNumber).append(theTr); // append to the end of the Tr
} else {
var theTd = "<td class='row" + rowNumber + " column" + i + "'>" + window['height' + rowNumber][i] + "</td>";
$('#rowNumber' + rowNumber).append(theTr);
}
}
rowNumber += 1;
}
}
</script>
I did 'alert(theTr);' and 'alert(theTd);' and they looked correct. How come this code doesn't generate any table?

You should change the line
$('#rowNumber' + rowNumber).append(theTr);
into
$('#rowNumber' + rowNumber).append(theTd);
You are adding the Tr-Code again in the inner loop, but you actually wanted to add the Td-Code.

All that window["height"+rowNumber] stuff is a poor way to do it. Use an array, and pass it as a parameter to the function so you don't use global variables. And use jQuery DOM creation functions instead of appending strings.
<script type="text/javascript">
var heights = [['HeadingOne', 'HeadingTwo'], // the words in each td in the first row
['firstTd of row', 'secondTd of row'], // the words in each td in the second row
['firstTd of other row', 'secondTd of other row'] // the words in each td in the third row
];
$(document).ready( function() {
createTr(heights);
});
function createTr (heights) {
for (var h=0; h<heights.length; h++) { // loop through 3 times, in this case (which h<3)
var theTr = $("<tr>", { id: "rowNumber" + h});
for (var i=0; i<heights[h].length; i++) {
theTr.append($("<td>", { "class": "row"+h + " column"+i,
text: heights[h][i]
}));
}
$('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table
}
}
</script>
JSFIDDLE