How to find average of specific values in Form submissions? - javascript

Here's an example image before I start explaining:
Let's say I have these entries from a Form (A2 to D6). Let's also say I want to find the average of ONLY the values that were submitted with "Tier 1" and "Type 2" in the same row. How would I approach writing a script that could do that?
I can elaborate more if needed. Any help is appreciated :)

Here is some algorithm plus code in jquery
1) Get all the rows in your table. You will have an array of all the table rows.
var rows = $('#tblID > tbody > tr')
2) Now loop through your array of rows with a for loop. Lots of example are available on the web. Here is one way
for (i=0;i<rows.length;i++){
var row =rows[i];
}
3) For each row inspect the column you are interested in. If they match then get the column with the number and add it to your sum and increment how many you will be averaging on. Here is snippit of how you get a column in plain js
var column = row.cells[3];
Keep in mind that the column is node, not the text in that node yet, so you will need a jquery call to get the text likes so
var stuff = $(column).text();

Related

AgGrid: How to get total row count when row grouping and filtering enable

I want to get the total leaf node row count in AgGrid when row grouping and text filter are activated.
I used the gridApi.getDisplayedRowCount() method but it returned the only number of groups that are displayed in the table.
I can't use the row-data count either, since the text filter filters out some data.
Let me know if there is any way to get the leaf node count in such a scenario.
Cheers 😀

How to select column names in webdriverio?

I am new to webdriverio. I need to select column names for a table which is defined as div tags in UI grid instead of tr, td. I am able to select the number of available column names as 6 with below xPath but when I execute the same xPath I am getting available elements as 1.
fundSearchTable(){
return $$("//ag-grid-angular//*[#class='ag-header-container']//*[#class='ag-header-cell ag-focus-managed ag-header-cell-sortable']//*[#class='ag-header-cell-text']")
}
const fundColumnList= await this.fundSearchTable;
console.log("number of childs:"+ await fundColumnList.length) //logs 1
Inspect in DOM1
Can someone help me with this as I need to interact with tables more often?
As you posted images it is difficult to write the xPath. Please use below xPath's to select the column names.
//span[text()='Fund Number'] or //div[#col-id='fundNumber']
//span[text()='Fund Name'] or //div[#col-id='fundName']
//span[text()='Fund Acronym'] or //div[#col-id='fundAcronym']
I am able to solve this. Issue was that the page is not loading by the time the command is executed to get the column names. I gave the wait time. And for the "for loop", I gave the length as row.length-1.
But still my result was inconsistent.

Advanced table filtre using js

I am a newcomer and I need some help with a js code.
I want to create a tabel filter like https://www.w3schools.com/howto/howto_js_filter_table.asp .
The script works almost perfect.
On the first 3 columns the filter work perfect, what I want more is that on the last 2 columns when you search for a dimension or code I want to display only the matched value, not all of product values.
To explain the table a bit:
Is an 5 columns table, where some of the first 3 columns have rowspan attribute because is same product but with different dimensions and codes.
If I search on dimension input the value "70" the script output all the products where is found the value 70 with all dimensions, but i want to display only the value requested and hide other values that does not meet the request ( currently it displays 170 as well as 210 values, but I need to display only the 170 values.)
I put the link for the code here: https://jsfiddle.net/mitza_dragan/vg9e0fkr/3/
Part of my js code below:
if(inp.id === "my" + cell.className) {
// Daca se gaseste valoarea din input in valoare din celula,
// seteaza seteaza true (s-a gasit macar o valoare in tot randul)
if(matchedCellText.indexOf(inp.value.toLowerCase()) > -1) {
matched = true;
// Daca s-a gasit macar un match, sari peste restul celulelor
// din randul actual
break;
}
}
For the complet view of the app follow the link above.
Thanks.
Welcome to StackOverflow :)
Thanks for sharing a working JS fiddle. I tried working on the fiddle and came up with a solution, can you check this fiddle and let me know whether it works out for you as per your requirements?
I'll explain the approach followed:
First of all, as the last two columns are a little bit different, you'll have to treat them separately. So, in case the search fields of the last two columns are not empty, we will not break out of all the loops and hide the entire row, instead we will loop through until all the cells are checked and then hide the miniRow or the entire row.
We can check whether mydimensiune or mycod inputs are empty of not by the following line of code :
const isDimensiuneOrCodSearchInput = nonEmptySearchInputs.findIndex( (input) => {
return (input.id == "mydimensiune" || input.id == "mycod")
});
If isDimensiuneOrCodSearchInput is -1 then both the 4th and 5th column search fields are empty and we need not worry about showing/ hiding any miniRow. This is where your code is working perfectly fine for the first three columns.
If isDimensiuneOrCodSearchInput is not -1, then either of the 4th or 5th column search fields are not empty and we need to check whether we should show/ hide the miniRow based on the cell value match.
Inside the miniRows for loop, a new variable has been introduced called as isHideMiniRow which would determine whether the current miniRow should be hidden or not.
Inside the cells for loop, if the cell value doesn't match with the input value, an if block has been added
if( cell.className == "dimensiune" || cell.className == "cod" ) {
isHideMiniRow = true;
}
This block sets the isHideMiniRow to true and in the miniRow for loop we check for this variable and hide the miniRow if none of the search fields match.
Also, we'll have to again show the miniRows when backspace is pressed, so the following lines of code has been added to do that :
const tableRows = document.querySelectorAll("tbody.table-row>tr");
tableRows.forEach(tableRow => tableRow.style.display = "table-row");
I've tried my best to describe the changes done to the code. Let me know if you want further clarity in the above approach.

Determine row and column index of input in table

I'm working on creating a javascript based spreadsheet application. Right now I can dynamically create the spreadsheet as a table with a supplied number of rows and columns and a text input in each cell as can be seen in this picture.
I'd like to have a generic event tied to all of the inputs in the table in which I am able to determine the row index and column index of the input that fired the event. Something like this:
$('.spreadsheet-cell').click(function () {
var rowIndex = $(this).attr('rowIndex');
var columnIndex = $(this).attr('columnIndex');
});
I originally tried implementing things by dynamically adding row and column index attributes to the html input element when I create it but when I add rows or columns after the original spreadsheet has been created things get messy trying to shift the value of these attributes around. I think I could make that method work if it came down to it but it seems messy and I'd prefer not to mess around so much with the DOM when I figure that there is probably some way using jQuery to determine the relative index of the parent <td> and <tr>.
Use jQuery .index. Within your function:
var rowIndex = $("#table tr").index($(this).closest('tr'));
var colIndex = $("#table td").index(this);

Show/hide table row based on value of a cell

I am using the range slider from JQuery-UI (http://jqueryui.com/slider/#range) which a user uses to pick a price range, and I want to show/hide table rows depending on whether or not they fall inside the range selected by the user.
This is what I have found from other answers: the following code hides the table row that has a cell in column 9 containing the value 10.
$("tr").find("td:nth-child(9):contains(10)").parent().hide();
What I am trying to do is "hide where the value in the cell is less than 10".
I have tried the following:
$("tr").find("td:nth-child(9):lt(10)").parent().hide();
But ":lt" is a method that applies to indexes, not values (I think).
Can anyone help me out please?
You're not going to be able to do this with selectors alone. You can use .filter for more specific functionality:
$("tr").find("td:nth-child(9)").filter(function () {
return parseInt($(this).text()) < 10;
}).parent().hide();
A brief note that :contains doesn't work very well for your first example either since it will apply to elements that contain "100."
Using some of your code from above, you could probably do something similar to this:
for(var i = 0; i < 10, i++) {
$("tr").find("td:nth-child(9):contains(" + i + ")").parent().hide();
}
You may have to add a few things to get what you need, but I think this should point you in the right direction!

Categories

Resources