Sorry for the vague title but here is my problem :
I have an HTML table that I am generating from Javascript, this is fine and the table generates as expected with no problems.
When the user clicks on a cell it will highlight that cell (or un-highlight if the cell is highlighted), this again works fine.
We then needed the ability to drag over the cells (whilst the mouse is down) and highlight the cells they hovered, this I managed to do but it was not the best solution so it was asked if we could select a cell, then hover to another cell and all the cells in between become highlighted.
For example :
Start Cell = Row 1, Cell 1
End Cell = Row 3, Cell 3
Highlighted Cells = R1C1, R1C2, R1C3, R2C1, R2C2, R2C3, R3C1, R3C2, R3C3.
I have managed to sort of get this solution to work, here is a JSFiddle to show the solution, if you click on the first cell and hold the mouse down and drag to the last cell it works fine.
My Problem is that if you drag from the last cell (bottom left) to the top cell (top right) the highlighting effect seems to stall randomly until you are on row 2 or 3.
Is there any reason why this would be occurring? Is my code incorrect / inefficient for this?
I've been stuck with this for sometime and can't seem to find any reason why it would be occurring.
Any help is greatly appreciated.
P.S. - This solution MUST be a fully Javascript solution, jQuery cannot be used for this solution unfortunately as we require this to be a single HTML File and must be possible to use without an Internet Connection.
When you extract rowNum and cellNum, in ClickCell function, you have to convert value to interger:
var RowNum = parseInt(cellID.substring(1, cellID.indexOf('C')), 10);
var CellNum = parseInt(cellID.substring(cellID.indexOf('C') + 1, cellID.length), 10);
Related
I've to create a table with a row of input boxes.
The values entered in will then be multiplied by script and the answer placed in the last input box, the row total, if you will.
There is a button above the table to add another row.
Each time a row is added, the same input boxes need to appear, and the same 'row script' to calculate the row total.
Once a particular row has been added/updated, and it's row total calculated, a final number needs to be found, which is essentially the total of the row totals. Let's call it the column total.
My skills aren't super high, am learning as I go, especially from the decent responses this site seems to attract. One hopes this is at least understandable....
I've managed to get row to be added by a button using table.insertrow, and the scripts for doing the math are no problem. I have also managed to use a simple loop to create the dynamic variable names for each input box; named the same and numbered by row.
Where I'm stuck is generating the scripts to totalise a line and then another tot totalise the table, as the script needs to factor in how many rows there are, and I can't see how to write this except using Eval() (so far..).
I've also experimented a little with this and each but just got bogged down and could no longer see the logical flow.
What I've written to date is now just a mess.
Instead of posting code for comment/fix, I seek to better understand which way to address the problem using Javascript if at all possible, hopefully without using Eval().
Any suggestions would be welcomed by this brain-dead, gone bleary, wishing he hadn't started, noob.
UPDATE: Have seen a lot of ways to use JQuery, but it's not for me at the moment.
perhaps phrased differently - how in javascript would you loop through a table column, adding up all of the cell contents (numbers) in that column, please. I can't seem to figure out how to use Each as the variable names are different (numbered) per row.
Something like this:
var tr = document.createElement("<tr>");
var td = document.createElement("<td>");
tr.appendChild(td);
You have to create table row, fill it with cells, cells with buttons and so on. As result you will have table row variable which you can insert every time your button clicked.
I have a spreadsheet that is intended to keep track of expenses. Since more often than not, what I want is to append new expenses at the end of the table, I have created a script (mostly by importing an example found here in Stack Overflow) that jumps to the first blank line based on column A as follows:
function jumpToBlankLine() {
var sheet = SpreadsheetApp.getActiveSheet();
var values = sheet.getRange("A:A").getValues();
var maxIndex = values.reduce(function(maxIndex, row, index) {
return row[0] === "" ? maxIndex : index;
}, 0);
sheet.setActiveRange(sheet.getRange(maxIndex + 2, 1));
}
If anyone have comments or suggestions about the function above, they will be welcome! But my question is regarding it's behavior.
Behavior 1:
I have set a trigger upon spreadsheet opening that works perfectly: after loading the spreadsheet it jumps to the first blank line in column A and if I start typing right after (the expense date in my case), the cell starts to get filled by what I'm typing.
Behavior 2:
But, when I assign this same function to a button (a drawing) and I click it, the spreadsheet goes to the right cell, but it ignores what I type right after. To have the cell filled by what I'm typing, I must click on it.
The behavior I want is like Behavior 1 above. I have also tried the function Sheet.activate() with no success.
Anybody have any ideas about why this is happening or a possible solution or workaround?
Thanks in advance!
It's happening because the drawing that you clicked on to run the script is actually the active object. You can confirm this by hitting return after you click on the drawing that runs the script.
Adding the below line of code to the onOpen function works as you expect but it still requires 2 clicks but less mouse travel than the drawing and doesn't require that you scroll to find it. (It creates a custom menu next to the help menu in sheets)
SpreadsheetApp.getUi().createMenu('Custom Function').addItem('Go to last row','onOpen').addToUi();
I am very new to programming but have come across a situation in my work where I believe I need to use some javascript to make my survey manageable for the participant. The client wants to use Qualtrics as a scheduling system. Faculty identify time slots that they are available and the survey would start by hiding the ones that they will not be available for. Then dynamically hides buttons as the quotas fill for a given time slot.
My matrix table is 10 columns x 15 rows to accommodate all the times and days. I'm trying to reuse snips of codes that I have found online and so far have gotten to:
Qualtrics.SurveyEngine.addOnload(function()
{
$("QR~QID14~1~4").up().hide();
});
This is hiding a choice, but instead of row 1 column 4 it is hiding row 1 column 15 (whose inspect element is QR~QID14~1~10). Whatever I change my column number to (4 in the example) it is always hiding the check box in the last column. I don't understand what I am doing wrong. So I've gone into my results and realize it is hiding the correct button but the rest of the buttons are shifting left so it appears that the last button is hidden.
Once I get it to hide the correct column I want to add conditions to my code that will hide it based on the value of a quota, which I believe would look like:
Qualtrics.SurveyEngine.addOnload(function()
{
if ('${qo://QUOTAID/QuotaCount}' > 0) $("QR~QID14~1~4").up().hide();
});
Where I would find the QUOTAID via Qualtric's piped text option
I know I can format this as a list but there are too many options for some faculty to make that look right.
You want to hide the contents of the table cell, not the cell itself.
Qualtrics.SurveyEngine.addOnload(function() {
$('QR~QID14~1~4').up('td').childElements().invoke('hide');
});
I would like to programmatically select a cell in a Qooxdoo table widget and then start the editor for that cell.
So far, I’ve been able to figure out the following: I can select and focus the cell as follows:
var pane = table.getPaneScroller(0);
var selectionModel = table.getSelectionModel();
selectionModel.resetSelection();
selectionModel.addSelectionInterval(row, row);
pane.setFocusedCell(col, row);
However, a subsequent call to table.startEditing() will not start the cell editor. It works if the cell had manually been selected by the user.
What does the user’s selection of the cell do that my programmatic approximation fails to?
I’ve put together an example demonstrating the problem.
I’ve been so obsessed with the startEditing not working that I failed to see the obvious: I got the focusing part completely wrong. I had copied it from an old discussion thread. Obviously, it was much too old.
Now I’m doing this:
var selectionModel = table.getSelectionModel();
selectionModel.resetSelection();
selectionModel.addSelectionInterval(row, row);
table.setFocusedCell(col, row);
table.startEditing();
Selecting the row the cell is in is not even strictly necessary but a focused cell in an unselected row looks kinda weird.
I am trying to add an extra functionality on my table where users can click on any Rn. This should highlight the whole column and display some hidden content coming from the highlighted column Rn TD. The highlight works fine excepts for some small bugs (e.g. you can click the 'player name' column which shouldn't be the case), but the content that needs to change such as the player names and the race information is not changing..
Also, the prev and next buttons are not working anymore since I added the extra code to make the table highlight work. The working prev/next version can be found here: http://jsfiddle.net/yunowork/4UGre/
What am I doing wrong?
DEMO: http://jsfiddle.net/yunowork/4UGre/6/
Try it in the last demo:
change:
rows.children().click(function() { ...
to:
rows.children().not('.emptyrace, .race').on('click', function() { ...
//exclude the td with prev and next link
We have again some bug (like highlight the R1, R2 element text) but this could be a starting point.