I have been trying to use Prototype to do some DOM manipulation, but I am not able to find much help on a certain selector.
I have a table with many rows and each of these rows has 4 columns, with each having a different class name. Some of the cells might be empty, i.e., they do not have a class, in a particular row.
Now, when the user clicks on a cell in a particular row, I want the control to be transferred to the next cell of the same class, wherever that might be in the succeeding rows, if one exists.
Is it possible to do this using the Prototype library?
.next()
Lets you get the next sibling
To get the next row you'd do .up().next();
Related
Basically I want to add a td class based on the value it has. I cannot apply this in the renderer because of the nature of the requirement. Meaning, a click event in the ExtJS grid[already rendered] requires revisiting all the rows and apply a td class based on the value/condition it posses. Today we are reloading but we wanted to cut down because of performance.
My idea here is to traverse all the TR of the given grid and add a class based on the value. Any suggestion how to take this forward.
Completed the requirement with the help of Ext.DomQuery.select
for (recordIdx of grid)
Ext.DomQuery.select('.x-grid-cell-inner', grid.getNode(recordIdx));
I've started a deep dive in to HTML + CSS + JS for the past couple of days and I'm curious to know is it possible to expand and collapse rest of the table data if I click my first table data on my table row.
I've tried myself using multiple combinations but couldn't succeed so I wanted to understand is it really possible or I have to improve further :)
Thanks!
https://jsfiddle.net/p9mtqhm7/553/
If I click on say - AUSDe451 or AUSDe441, rest of the corresponding columns should be either expand or collapse[i.e LAMP 6.93817139 & 51_REGALIA 456.352] should expand/collapse if I click - AUSDe451]
Your click handler is a bit wrong!
When you're handling clicks on the .server-name element, $(this) inside the function refers to the item that has been clicked, in this case the .server-name table row.
When you run $(this).find(...), you're looking for child elements of the table row, which do not exist. So rather than use $(this).find(...), you should probably be looking elsewhere in the DOM.
Also, you seem to be searching for span elements, which don't exist anywhere in your HTML markup, so that part of the function will never return anything anyway.
Is there a way to use angular.element(...).on('click', onTdClick); (for example) in a way that executes onTdClick (providing the element to it) on every that gets clicked?
Let's say I have 2 tables, both have cells and columns.
I want to be able to click on CELLS and send the element of what I clicked and send it to onTdClick($event).
$scope.onTdClick = function(ev){
window.getSelection().selectAllChildren(ev.target);
};
Essentially doing the same as: ng-click="onTdClick($event)" without having to put ng-click on hundreds of <td>'s
I dynamically add table rows and table cells with .insertRow and .insertCell
https://www.w3schools.com/jsref/met_table_insertrow.asp
So statically doing angular.element().find('td').on() wont work well here.
Whats my end result?
I'm attempting to make it so I can click <td>'s to essentially highlight cells by just clicking them.
The highlight code is already tested and works:
window.getSelection().selectAllChildren(ev.target);
(where ev is the td element)
You shouldn't use insertRow with AngularJS. Instead, you should use ng-repeat with an array that has an object for every row, and just push objects when you want to insert a row.
$scope.insertRow = function(){
$scope.tdList.push({});//push whatever you want
}
If you want the number of cells to be variable, you can store some param in this object to tell the view how many cells the row has, and put a nested ng-repeat inside to create the cells
I am using columnClass property to assign different rendering (and event processing) to cells belonging to different columns.
When the table fits within the screen every element gets the class as specified by the columnClass property of its column and I can easily hook some rendering/processing functions to the elements.
However, when some of the columns don't fit within the page and I expand the row (by clicking the '+' button) the cells are renedered with no reference to the class of the column. I reviewed the custom renderer for the cells of the expanded columns and also see no way finding out what the column class of a cell is.
Ideally, I would like to use the same custom field renderer as defined in the table. Is there a way I can do it?
Example:
Let's say I have 3 columns: name, dob, salary.
I defined 3 classes for the columns: name_class, dob_class, salary_class.
For each class I use a jquery selector and assign diffrerent rendering/behavior for each cell of that column.
Now, I resize the table so that dob and salary get overflown and click on the '+' button to expand the row of interest.
I would expect to get the dob cell with the dob_class attribute and salary cell with the salary_class attribute, so I am able to link the same cell renderer to them.
However, ****the class attribute is no assigned (not retained) and I cannot link with jquery using the class attribute. ****
**Could you please suggest an solution that would allow me to retain the column class on the cells of the expanded row? **
Sorry, no, that's not currently possible. It has been raised against the code already, see https://github.com/DataTables/Responsive/issues/93, so it is on the todo list. I'm not sure why the OP has been voted down, seems a bit unfair to me, as it is a valid question.
Is there a way to create custom javascript-events, that trigger once elements get a class? I want to watch all elements inside a table and process some data once one specific class gets added to them.
Is that generally possible, and if yes, how?
edit
I have a table with 10 rows and 10 columns. Once a player clicks one of those table cell (<td>-tags) there are some calculations made and the cell gets a value (a number, representing the number of mines on the surrounding fields) or pops up to be a mine. (When it has a value its class becomes .opened and when it has a mine its class becomes .mine)
Now every time the player clicks on a cell, that has no surrounding mines, its value is 0. At this time every surrounding field should be checked to see if it is also a 0. If it is, it should be unveiled (class becomes .opened). Now every surrounding field of this newly opened should be checked again, and again, and again - As long as none of the surrounding fields is 0 anymore.
I thought it would be the easiest way to achieve that, by simply checking for the .opened-class on the cell, to trigger the "chain reaction".
It is possible using Mutation Events API or DOM Mutation Observers API. Read this article
document.addEventListener("DOMAttrModified", function(e) {
console.log(e.attrName, e.attrChange, e.prevValue, e.newValue, e.relatedNode)
}, false);