Getting specific td content - javascript

Is it possible to get just one specific td's text from a page? On the last table I want to get the number of members joined this month so far to use on another page.
Note: It always shows only 12 rows and the current month is the last one.
http://pastebin.com/xGvQMuvp
I don't have access to the page itself or I'd know how to grab this easily by adding an id to that specific <td>.
Above is all the code for the page I simply copied from using inspect element. If you scroll to the bottom where it has October 2014 and then 150, I want to get the 150.
It's the 11th table, 14th <tr>, 2nd <td>.

You probably need a "userscript". Different browsers have different ways of letting a user write JavaScript that can do things like inspect a loaded-up web page; you would need to see how your browser lets you do it. Then, if you are always looking for the same table and the same table row, in a particular page, the task might be relatively easy.

I actually found the answer to what I needed using the nth-child expression like #dandavis suggested to grab the whole page and then show/hide what I needed to.

Here's how you can do it:
//Get <table> number 11
var table = document.getElementsByTagName("table")[10];
//Get <tr> number 14
var tr = table.getElementsByTagName("tr")[13];
//Get <td> number 2
var td = tr.getElementsByTagName("td")[1];
//Get text content
var text = td.getElementsByTagName("span")[0].innerHTML;
console.log(text); // => 150

Related

Best way to totalise dynamically created table row and column values using Javascript?

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.

How to get selected table in Google apps script

I am writing a script that will use a table that a user has selected. However, using DocumentApp.getActiveDocument().getSelection().getRangeElements() will get only the individual cells. I thought I could just reconstruct the table, but the cells are all in one long list with no info on rows or columns, and the user should be able to select a table of any height/width without having to tell the program what the dimensions are. I also thought about having the program automatically select a bit ahead, in order to treat the table as a table and not individual cells, but this still selects individual cells (but not all of them which is a bit peculiar.) Thanks for any feedback/help!
Replacing a table selected by placing cursor in any cell
I just made up a two dimensional array for the table to be replaced with.
If you try to cast the first element asTable() you'll get the error 'PARAGRAPH can't be cast to TABLE.' then if add another getParent() you'll get the error 'TABLE_CELL can't be cast to TABLE. ' and then add another getParent() and you'll get the error 'TABLE_ROW can't be cast to TABLE.' and finally adding yet another getParent() finally passes through the gauntlet and replaces the the table. You can put the cursor in any cell in the table. It was a bit of a hack but in the end it seems to work. It would have been much more difficult to figure this out without knowing how to use the debug resources that Google provides.
function replaceTableAtCursor(){
var doc=DocumentApp.getActiveDocument();
var body=doc.getBody();
var el=doc.getCursor().getElement().getParent().getParent().getParent();//element/cell/row/table
var table=el.asTable();
var t=[];//This is the table I used. Any 2D array will work like the ones you can get from getValues() method from spreadsheets.
for(var i=0;i<3;i++){
t[i]=[];
for(var j=0;j<3;j++){
t[i][j]=Utilities.formatString('i:%s,j:%s',i,j);
}
}
var childIndex=body.getChildIndex(el)
table.clear();
body.insertTable(childIndex,t)
}
Position Class
Trouble Shooting
Example That Edits a Table in Place

Hiding certain choices in a qualtrics matrix

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');
});

JQuery method does not work on cached children objects

In JQuery, we can cache almost any objects returned by a selector, and in my case, I cache the children (<tr>s) of a selected element (<tbody> in a table) in a variable called rows.
I then call JQuery methods on this rows, which manipulate individual rows. For example, if there are 5 rows in total and I want to swap the first and the last row:
rows.eq(4).after(row1);
rows.eq(0).before(row5);
However, this does not work. The first row gets to the bottom but the bottom row does not get to the top.
What does it work is to get a fresh copy of the children on each manipulation. For comparision, please see: http://jsfiddle.net/QNS5G/
What is causing problems for the cached approach here?
After you change the row order in the DOM, the order in the jQuery object does not change.
So t1_rows.eq(4).after(t1_row1); moves the first row to the bottom (row 1 goes after the fifth row in the jQuery object). Then t1_rows.eq(0).before(t1_row5); tries to place the last row before row 1. Since it's already there, you don't see any changes.
Perhaps you are thinking el.after(something) places el after something, but it's the other way around, it actually places something after el.
Let me translate your code into english.
First, take row 1 and insert it after row 5
Then, take row 5 and insert it before row 1
The second operation does nothing because row1 has moved to the bottom of the list. It's already right before row5.
var tbody = $(document.getElementById('t1_parent')),
first_row = tbody.find('tr:eq(0)'),
last_row = tbody.find('tr:eq(4)');
last_row.prependTo(tbody);
first_row.appendTo(tbody);
EDIT:
Never mind. Another solution was found.

Table header sorting changes the position of rows

I have an html table like this below:
name number contractid
sebastian 01 aea123
sab 02 aea534
jack 03 are152
My problem is when I click on the name the name column is sorting in alphabetical order and the position of rows is same its fine. But when I click on the column again the rows change their position, like below. (The first row will be moved to the empty space and second row is moved to first place.)
name number contractid
sebastian 01 aea123
sab 02 aea534
jack 03 are152
Is there any solution for reducing this change in position? Any CSS and Javascript properties I can do/set for preventing this kind of jumping?
Two options exist, either:
Remove the empty row altogether and style your Html so that the space that is getting lost is created using css. This will give you more desirable formatting along with cleaner html and you won't rely on the html.
Insert the extra row as th rather than tr as in http://jsfiddle.net/6kczk/
I'd say option one is most sane if you can get a reasonable look, since if you have no borders all you need is some extra spacing.
Given a lack of specifics, I'm just using educated guesswork here. Whether option two would work depends on the sorting code and the assumptions made. If it assumes the first row is always the column header or gets confused when it finds extra rows of headers then it will be unlikely to work.

Categories