I created a 3x3 table. Each column is generated using a function. The function basically returns a "td" element. Else where in the code I trigger an event based on some conditions. Whenever the event is triggered, I want to update one particular cell of the table. None of the cells have ids attached to them.
My question is how can I link up the "td" that I want to be updated with the event?
I have no specific context that refers to this td alone.
If you're not using any other tools like jQuery my approach might be to find the table which I assume you can do with Javascript. Then for each td element in the table inject a class to them that is unique. You could just give them numbers or something easy. Assuming the numbering never changes you now have an easy way to lookup the td elements later in your code without having to keep a reference to the td element you want.
Instead of adding a class you could just get all the td elements in the table and if you knew the 4th element was always the cell you wanted then you could just keep a reference to that td element.
Without using jQuery or anything, you can use DOM selectors such as .childNodes (and iterating till you're satisfied), .lastChild, .firstChild, .parentNode etc.
This link gets you through some examples.
Although, if you are using this a lot, create ID dynamically in JS. Like iterating once through all your table (with .childNodes), assigning an ID (like row1-col2) to every td. It will simplify the rest of your code.
Here is a jsFiddle to show you how with jQuery:
http://jsfiddle.net/HzBFE/
Related
I am looking to script a site that has a set of changing values. I am trying to figure out how to call the text value inside of only one of these entries at a time.
Any one of these can look like this
<tr ng-repeat="(key, game) in crash.games.slice().reverse()" class="" style="">
<td ng-if="::game.crash > 199" class="crashHighResult">RANDOM NUMBER THAT I WANT TO SEE</td>
tr is the parent of td and the text value inside of td is what I'm trying to see
The only problem I'm experiencing is that there are as many as 20 entries stored during this time and they can all have seemingly the same classes and parents as every other one, the only difference being the random number value...
I am thinking that If I can pull them all at the same time and then maybe create an array with those values I might be able to do what I need to do but I'm a bit stumped.
I am very new to javascript and jquery and this is a learning experience for me. Thanks for your help!
Your best bet would be to use document.querySelectorAll if you want to understand some native JS techniques. There are a couple of other ways of getting the elements you want (getElementsByClassName and getElementsByTagName) but they don't play nearly as well with forEach as does the former.
So, to grab the elements:
let cells = document.querySelectorAll('td');
And to loop over that nodelist:
cells.forEach(function (cell) {
console.log(cell.textContent);
});
At the moment the code just logs the text content (your random number) to the console, but you can get a feel for what you can now do with that data.
For example, to get the last (most recent?) random number (the last cell in the nodelist) you would use:
let rnd = cells[cells.length - 1].textContent;
Hope this helps you out.
If you need to select the first tr td in the table to get the value, using jQuery you can select all tr td elements and then specify the first one.
$("tr td").first().text();
This selector finds all tr td elements as it traverses the dom, so it will find the top row in the table first. The first() function returns a jquery object of the first element found. The text() gets whatever text is inside the td tags, basically the same as the js innertext or textcontent.
If you want to do processing with all the values you can use the jquery selector each() function.
$("tr td").each(function (index , element) {console.log($(element).text())})
This loops through all the elements and prints their values to the console, but you could modify the function to sum the values, put them in an array, or whatever.
I want to target a dynamically created HTML table element inside another dynamically created table row, to append a table row in the sub-table before the last sub-table row. I do not want to attach a click event to this dynamically created element, which is the answer I seem to find everywhere. I want to target the specific sub-table (.subTable) in the specific table row (this.closest("tr"), this being the .buttonHere cell within the row I want to target the child table element) to append another table row before the last row (class .subTableLastRow).
So if I have:
$("#mainTable").on("click",".buttonHere", function () {
$(this.closest("tr") > ".subTable" > ".subTableLastRow").before("<tr><td>another row</td><td>with two cells</td></tr>");
This is messy code and it obviously doesn't work, I'm just trying to explain what I'm trying to do. I hope this makes sense. Just a simple answer to how to target a dynamically created child element inside of another dynamically created parent element would be a lot of help, as clearly I am lost.
I think your jQuery selector was just formatted incorrectly.
$(".subTable .subTableLastRow", $(this).closest('tr')).before("<tr><td>another row</td><td>with two cells</td></tr>");
Additionally when trying to access jQuery methods on this you have to wrap it in a jQuery selector ie $(this). This will make it a jQuery object and you can then utilize the jQuery methods.
Is there a way to iterate through the ag-grid and get access to the underlying html element (or to the style of it)?
It has forEachNode(callback). But the callback simply gives in params the whole row and the cell values. I need to get hold of the styles of the cells.
Can comment so i'll use an answer : it's probably prossible but i don't think the grid has been designed for that.
You can customize the styling of cell, check http://ag-grid.com/angular-grid-cell-styling/index.php. And you can override the css if you want to change the definition of the cell classes.
You could always iterate through using JQuery and the count of your rowData and columnDefs. Then each element could be targeted using the "ag-row" or "ag-cell" class.
I have common jQuery function and two div tags. Both div tags have different names but both containing elements of identical ids now i want to use this common Jquery function for them both?
I have implemented common function but it's not working for both.
Here's link to my jsfiddle -jsfiddle.net/xS7zF/1/
In my jsfiddle there are two div tags namely example1 and example2 and both tags have elements of identical ids. Function is working fine for first div but not for second.
please help me to sort out this.
Yeah, under the hood, jQuery selection on an ID will use the Document.GetElementById() function implemented by the browser, which is really fast, but (i guess depending on the browser) will stop after it finds the first element, since ID's should be unique and no further searching is needed after the first one is found.
For instance, rename the divs with id="eb" to class="eb" and you can still target specific elements using $("#example1 .eb") and $("#example2 .eb")
UPDATE:
Using your new Fiddle I created this: http://jsfiddle.net/xS7zF/5/
I cleaned up a lot of code and hopefully you can see what I have done. I changed all elements that appear twice from id to class. Now, when you attach an event to an element using $(".classname").click(), it attaches to all the elements. In the handler function where you set HTML and do your show()/hide(), you don't target a specific element using it's ID, but you find it relative to the element that does the event. You can do this using parent(), parentsUntil(), next(), find(), etc. Check jQuery docs for all possibilities. So for instance, the change-handler attaches to all inputs with name=Assets. But instead of doing $("#b1").show(), I go to the parent of the specific input that fires using $(this).parent(). Then I find the element with a class=".b1", which it will only find the one that is next to this specific input and I set the HTML to just that element.
Since there is another input, the same actions happen when THAT input changes, but instead it finds IT's parent, and finds the element with class=".b1" that is next to IT. So both divs with input are contained since they act on elements relative to itself and not across the document.
For extra fun and to show you how flexible this way of programming is, here is a fiddle with the Javascript-code unchanged, but with the exact same question-div copied 8 times. No matter how many times you repeat this, the same code will act on as many divs as you create since everything works relative. http://jsfiddle.net/xS7zF/7/
Hopefully this helps, the rest is up to you!
ID's must be unique, you should not repeat them. You could replace id with class and in the jQuery function do (".ub").each() or manually referencing the object using eq(x). e.g. (".ub").eq(1).
You shouldn't assign same id's to different elements.
You CAN but you SHOULDN'T. Instead of giving the same id, use class
IDs must be unique, try fix this, change to classes.
You can try something like this:
$("div div:first-child")
instead of
$("#eb")
But depends of the rest of your page code. So, change to classes first and use
$(".eb")
when jQuery / javascript find the first ID it would ignore the rest, please read more about it
http://www.w3schools.com/tags/att_global_id.asp
I'm attempting to target the last parent table row within a table that has children table-row elements inside of it. I've tried the below jQuery to target the :last pseudo, however, like expected, it is targeting the absolute last table-row element within the targets parent table.
$('table[id*="dgRegistrantList"]').find('tr:last').addClass('EventRegLastAttendee')
I've put together a jsFiddle with the HTML block I'm attempting to target with the jQuery, I hope it is helpful!
http://jsfiddle.net/jodriscoll/LZA7e/
The Green table-row is the one I would like to target, however, the one highlighted in Red is the obvious one receiving the class.
This system can generate a variant of table rows depending on the users selection prior to this "Step". For a full example of what I'm working with, visit: http://secure.massgeneral.org/event-form (I'm working with Step 2).
Please be aware that the HTML I'm working with is produced by a CMS software that I as the customer, do not have access to changing. Hence the purpose of this jQuery exercise.
If all the parent <tr> elements have the classes BBListOddRowStyle or BBListEvenRowStyle you can do this:
$('table[id*="dgRegistrantList"]').find('tr[class*=RowStyle]:last')
.addClass('EventRegLastAttendee')
DEMO
If not, you can use .children() twice to make sure you target the right ones:
$('table[id*="dgRegistrantList"]').children('tbody')
.children('tr:last').addClass('EventRegLastAttendee')
DEMO
Use this code to target the last row:
$('table[id*="dgRegistrantList"]').find('tr[class^=BBList][class$=RowStyle]:last').addClass('EventRegLastAttendee')
Explanation:
tr //it will look for tr
[class^=BBList] //which class starts with BBList
[class$=RowStyle] //and ends with RowStyle (so we're leaving Odd and Even inside and not recognized)
:last //the last of those element, if you remove it you select all of them
Is .children() what you're looking to do?
$('table[id*="dgRegistrantList"]').children('tr:last').addClass('EventRegLastAttendee');
.children() only goes down one dom level, while .find() will go down as far as it can.
Don't use find. It will look at any depth and it may match unintended subtables. Perhaps it will work for your example, but you don't want to be acquiring a bad habit. Plus, find will be more costly than a targeted approach.
You want a more targeted approach:
var targetTd = $('table[id*="dgRegistrantList"]').children('tbody').children('tr:last').find('table:first').children('tbody').children('td:last');
use this code to target parent tr last row
$('table[id*="dgRegistrantList"]').find('tr[class^=BBList]:last').addClass('EventRegLastAttendee');