I'm setting up a system that tracks submissions from my employees in Google Sheets. Each day I check to see if they have submitted the proper paperwork. What I am wanting to accomplish is, when I click (or select) a cell with that employee's name, I want to change the background color when I click (or select) that cell.
Nothing I've tried has worked.
var color = [
["#06c646"]
];
var cell = SpreadsheetApp.getActiveSpreadsheet().getActiveCell();
cell.setBackground(color);
Nothing seems to be doing what I want it to do.
You could try it with jQuery:
$(selector).on("click", function() { // add cell's class/id here
$(this).css({'background-color':'blue'});
});
Related
I am using monthly view. I show all dates and I want to tag each day as 'working day', 'overtime day', 'holiday' etc.
I made each of the tags above as events and it is showing up fine. My next goal is to select a date and apply leave. When I click on a day, it triggers dateClick and I change the background color to be green. If I select the same date again, I change the background color back to white. This gives a feel that user selects/unselects a date. Multiple dates can be selected like this, colors will turn green and I maintain a list of selected dates.
if (info.dayEl.style.backgroundColor == 'green') {
info.dayEl.style.backgroundColor = 'white';
} else {
info.dayEl.style.backgroundColor = 'green';
}
Problem: When I click on events in a day (like overtime etc), I am unable to change the background color of the whole cell for that day.
When a event is clicked, eventClick gets triggered and from within that function I tried triggering the 'select' by doing
this.fullCalendarMonthly.getCalendar().select(info.event.start);
but it does not come with any html elements and styles.
Any other way to achieve this?
On event click, I looped through using css classes to get it done.
var week = info.el.closest(".fc-content-skeleton").closest(".fc-week");
var days = week.querySelectorAll(".fc-day");
days.forEach(day => {
if (day.attributes["data-date"].value == currentDate) {
day.style.backgroundColor = '#123';
}
});
I have a simple JavaScript that when a checkbox is selected then the row color changes. This works well.
However, when a user needs to edit their details they can see the boxes that they have checked (form the MySQL select) however the color has not changed, as the row color only changes when the user un-selects and then re-selects the checkboxes.
How can this be done?
Thanks
Below is the simple JavaScript
function ClickMakeColor(chk,ctrl)
{
if(chk.checked)
{
document.getElementById(ctrl).className = 'CheckBoxOn';
}
else
{
document.getElementById(ctrl).className = 'CheckBoxOff';
}
}
You can use toggle to toggle classes on/off. You didn't provide too much information such as html or what ctrl is, so there isn't much more info that can be given. If you update your question with that, I can give a better answer.
function ClickMakeColor(chk,ctrl) {
let cl = document.getElementById(ctrl).classList
cl.toggle('CheckBoxOn', chk.checked)
cl.toggle('CheckBoxOff', !chk.checked)
}
Google Sheets: Replace cell contents with another cell contents when "Clicked" ?
I'm trying to create an easy way to reveal more data from a row when any cell is clicked from the row it lives in. Currently, I have a nice =VLOOKUP("*") ... function that allows me to type in a COMPANY name into a "search bar" cell, and then VLOOKUP will display cell contents depending on which COMPANY it is.
You can see it in action here:
Google Sheets Demo
How To Use:
Green Cells: Type in the "Search Bar" cell for a company name...
Orange Cells: If "COMPANY" is found, it displays the companies cell contents to the left.
What I want to do:
Click on a cell in any row
Have that cell realize what row it's in and navigate to the COMPANY column.
Copy the cells contents from the COMPANY column and replace the current contents of the "search bar" cell
VLOOKUP will then handle the rest.
Possible?
Is this possible with Google Sheet functions alone? Or is this something that should be handled with a script? How would I got about it?
There is currently no way to create an onClick function. The closest thing we have is an onEdit() function. I can think of two ways to make this sort of work.
1) This onEdit version works only if you don't mind locking your script down. You could write an IF statement to create a way to stop this from running temporarily while you edit it.
2) You could setup a second sheet and have the values imported from there or backed up there, and then just run this on the first one at all times.
function onEdit(e) {
//This sets up the worksheet variables
var worksheet = SpreadsheetApp.getActive();
var sheet = worksheet.getActiveSheet();
//This saves the original value e
var origValue = e.oldValue
//This figures out where you clicked, and gets the K+rowyouclicked value.
var selection = sheet.getActiveCell().getA1Notation();
var splitselection = selection.match(/([A-Za-z]+)([0-9]+)/);
var CompName = sheet.getRange("K" + splitselection[2]).getValue();
//set the value on the search bar and return the original value to where you changed.
sheet.getRange("C3").setValue(CompName);
sheet.getActiveCell().setValue(origValue)
}
Imagine this simple layout ( http://jsfiddle.net/4F9cL/ ).
We have a table, for each row i have a label a textbox and a checkbox.
The first textbox has tabindex = 1 , the first checkbox has tabindex = 2, the next textbox on the second row has tabindex = 3 and so on.
What i would like to do is change the tabindex on the checkbox on the same row for the textbox that im in if the content of the textbox has changed.
For example at the moment im checking the checkbox on the row that the thebox content has been changed, i do that with the following code:
$("input:text").change(function () {
$(this).parents('tr:first').find('input:checkbox').prop('checked', 'checked');
So the scenario is the following: If the content of the textbox hasnt changed, when i tab i want the focus to change to the checkbox on the same row. If the content of the textbox HAS changed, i would like the focus to be on the next textbox on the row below INSTEAD of the checkbox on the same row.
I hope i explained it good enough for you to understand what im trying to do.
I've tried using .removeprop() and .removeattr() but that doesnt work and when next tab hits it just goes to the bottom of the page.
$("input:text").change(...);
The change event of a textbox will only be executed once the textbox loses focus. This means that when you press Tab, that function has not yet run, and you'll end up with your old tabindex target.
$("input:text").keyup(...);
$("input:text").keydown(...);
These events will fire when you either press down on (keydown), or release (keyup) a button while the textbox is focused.
Something like this should do the trick:
$("input:text").keyup(function() {
var textBox = $(this);
var textBoxIsEmpty = textBox.val().length == 0; //I assume you use this to determine which element should be the next to get focused when pressing tab.
var currentTabIndex = parseInt( textBox.attr("tabindex") );
var nextTarget = GetNextTarget(textBoxIsEmpty); //not sure how you define this. This is the item you want to be your next target when you press tab.
var nextTabIndex = currentTabIndex + 1;
nextTarget.attr("tabindex", nextTabIndex);
});
Although I am not 100% sure if changing the tabindex dynamically works in every browser.
I have tried like that and it's working fine for me.
before applying this you should clear on this you have declare you tabindex in the input properly.
jQuery("input:text").keyup(function() {
currentTabIndex = parseInt(jQuery(this).attr("tabindex") );
nextTabIndex = currentTabIndex + 1;
jQuery('input[tabindex='+nextTabIndex+']').select();
});
Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.
So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.
I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.
jQuery I was trying to use:
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).text('').append($('<input />',{'value' : t}).val(t));
}
});
});
Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?
Update:
HTML:
sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")
For Each w In workItems
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & w.area & "</td>")
sb.AppendLine("<td>" & w.details & "</td>")
sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
Next
sb.AppendLine("</table>")
There are a couple of ways to do this, including changing your VB code to add extra data to the html, but I will answer this from a pure javascript/JQuery solution.
First of all you need to handle the click event for each edit button, after that you find the matching row, and then you can get the first to td elements of that row...
$(".edit").click(function(e){
e.preventDefault();//prevent the link from navigating the page
var button = $(this);//get the button element
var row = button.closest("tr");//get the row that the button belongs to
var cellArea = row.find("td:eq(0)");//get the first cell (area)
var cellDetails = row.find("td:eq(1)");//get the second cell (details)
//now you can change these to your inputs and process who you want
//something like this...
ConvertToInput(cellArea, "area");
ConvertToInput(cellDetails, "details");
});
function ConvertToInput(element, newId){
var input = $("<input/>");//create a new input element
input.attr("id", newId);//set an id so we can find it
var val = element.html();//get the current value of the cell
input.val(val);//set the input value to match the existing cell
element.html(input);//change the cell content to the new input element
}
Here is a working example
From that you can then do the saving that you say you have already implemented, using the ID values of each field to get the values to save.
Instead of using a For Each ... in ... Next loop, use a a For loop with a counter. give each button and each row an ID with the current counter value at the end. You can then use Jquery to make each row editable separately, because each row has a row number now.