I have created a HTML table with clickable cells (td) within that table (Similar to Excel)
I have an input field (read only)
<input type="text" readonly="">
I want to display the coordinates of where the user is clicked when they click on the table in this input field.
For example if a user is clicked on a cell which corresponds on X axis to Name 2 and Y axis to 16, then I want the input field to say "Name 2 | 16"
It is a reference display so the users can see what they are clicked on in a cluttered grid. Excel does this when u click on any cell within Excel.
I have created a jsfiddle here
http://jsfiddle.net/37PGT/
Looking for some assistance.
Add an id of cellRef to the input, then in your mouseup handler add this code:
var row = $(this).closest('tr').index() + 1;
var cell = $(this).index();
$('#cellRef').val(row + ' | ' + cell);
Updated fiddle
To get the label of the row (so you can format the input to be Name 1 | 1, use this line to set row:
var row = $(this).closest('tr').find('td:first').text();
Well I can suggest the following:
var rowIndex= jQuery.ArrayIn($(this).parent(),$('#tableID tr'));
var columnIndex=jQuery.ArrayIn($(this),$(this).parent().children('td'));
It may be possible that your script would become busy for such operation. I rather would recommend you that you store your custom attribute such as row Number and column number on each <td> and that would even make your operation not only easy but also scale-able to provide much more functionality than just selection.
Related
I just started exploring google sheets and javascript and I wrote a function which prompts the user to type a string which is entered into the selected cell. I'm accessing the current cell using SpreadsheetApp.getActiveSheet().getActiveCell() and setting the value using .setValue().
Now I made another prompt and I want to put this value in the cell next to the selected cell (same row but column+1). How do I access the current cells row and column positions and then increment the col with 1?
In pseudo code im thinking something like this;
ActiveCell[row][column+1] = string input from prompt2
Try using offset to specify offset:
let cell = SpreadsheetApp.getActiveSheet().getActiveCell();
// update cell to the right
cell.offset(0, 1).setValue("upd");
Im writing a small google script for an excel sheet which appends a row on a POST request: depending on the POST parameters I either append the row to the end, or I insert it in between rows.
One of the columns of the is actually a boolean that Im trying to represent as a checkbox.
The problem is when I try to append a row
sheet.appendRow([e.parameter.parameter1, e.parameter.parameter2, "FALSE"]);
It simply writes false in that column.
On the other hand when I insert a row in between other rows:
sheet.insertRows(position);
sheet.getRange("A" + (position)).setValue(e.parameter.parameter1);
sheet.getRange("B" + (position)).setValue(e.parameter.parameter2);
sheet.getRange("C" + (position)).setValue("FALSE");
The checkbox column (takes the format from the surrounding rows?) and becomes a checkbox.
Is there a simple solution to append a row with a column as a checkbox?
Thank you.
You need to create a checkbox first with data validation
Sample:
var checkbox = SpreadsheetApp.newDataValidation().requireCheckbox().build();
sheet.getRange("C" + (position)).setDataValidation(checkbox).setValue("FALSE");
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)
}
Currently, I have a piece of java script that makes a table of cells where each cell has an ordered list of its number, a label, and a text box. A snippet of this code is written below:
<table id="drawAllQuestionsTbl">
<tbody><tr><td class="tbl">
<ol start="1">
<li>Sport 1: <input type="text" name="tq_g_0_guess" size="15"></li></ol></td></tr><tr><td class="tbl">
For brevity, I cut a lot of the extra stuff. In reality, this table is filled with around 10 replicas of this cell, where each cell has an ordered list with a label and text box. For the text box in this ordered list for instance, I can successfully access its value using document.getElementsByName("tq_g_0_guess"). However, my question is how to get the value of the label "Sport 1" next to this text box. Any ideas?
The following will give you the text of the li node. This will be Sport 1:.
var elParent = document.getElementsByName("tq_g_0_guess")[0].parentNode;
var labelText = elParent.innerText;
console.log(labelText); // Sport 1:
You can leverage labelText to further format the text to the desired result.
If you only want Sport 1, then you can substring the everything up to the colon
labelText.substr(0, labelText.indexOf(':'));
What about:
document.getElementsByName("tq_g_0_guess")[0].parentNode.innerText
writing in JavaScript:
var child = document.getElementsByName("tq_g_0_guess")[0]; // ok, must add a [0] after this.
var preTextNode = child.previousSibling;
var textContent = preTextNode.textContent; // this is the text you want.
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.