How can I add styles to dynamically added table cells? - javascript

In my program I have a table that, when loaded, has jQuery add some styles/classes to the table cells and table headers.
Everything works fine until rows are added via functionality on the rest of the page. Instead of adding the classes to the table cell during addition, is it possible to "listen" or fire some event that checks to see if child elements were added to the table.
Essentially, I want something functionally equivalent to this:
$("#table td").live("ready", function(){
// do something
});
but the live/ready won't work on a table cell... Any ideas?

You can use a setInterval and then check for the dynamic addition of table cells, if you don't have access to other parts in the page.
setInterval(function(){
CheckStyles();
}, 1000);
function CheckStyles()
{
// your code goes here
}

Related

jQuery adding an <tr> line when loading / jQuery and PHP

I have a table built that comes from data in the server. I have a button that will activate or deactivate a category. If the category is active, it will show the action of "inactivate" and so the way around. So I need the table to refresh so when the user clicks activate it will automatically switch. I am almost done with this. Issue is that when I use the jQuery load function, it seems like it's adding one additional line instead of just refreshing it.
This is my code, I send a request to the server, then wait for it to finish to load.
My code is below:
async function cambiarStatus(tipo_transa, ruta, estadoCat, idCat, div, file)
{
await modStat(tipo_transa, ruta, estadoCat, idCat);
$(div).load(file+div);
}
With the table I built with PHP I only have one ... but then it goes and another one which ends up in making the table go nuts.
Many thanks for your help!!!!!
I'm going to have to guess that the value of the variable div is something like #c-i-1, or # plus the id of whichever table row you're trying to replace.
In that case, the code as written is telling jQuery to replace the content of the table row, not the table row itself, with the matching table row loaded from the file. That's going to cause exactly the problem you're showing, a table row being put inside a table row.
You need to replace the table row itself with the retrieved table row. For that, as convenient as jQuery's load method is, it doesn't offer the functionality you need.
Something like this should work better:
$.get(file, table => {
const row = $(table).find(div);
$(div).replaceWith(row);
});

Target Dynamically Added <tr>

I've with me the feature of adding new rows to an existing table via the "Add Row" button using plain old javascript. This code was written by someone else and now I'm required to add something more to the existing functionality.
For that reason I need to be able to target the dynamically added rows too but for some reason whenever I do (after adding 2-3 new rows and clicking "Submit" button)
console.log($('table#tableid tbody tr').length);
it is only retuning the number of rows which were loaded during the page load and skipping the new rows that were added dynamically.
Here's the Fiddle to get you started. It's baffling really because I thought I knew jQuery well enough to be stumped by this....
You add new row to tfoot.
Try this:
var tbl = document.getElementById('tblSample').getElementsByTagName('tbody')[0];
At page Load you are having rows in tbody.while the rows you are adding dynamically are adding in .while on button click you are selecting only those rows that are coming in tbody section.

How to make multiple HTML tables sortable?

I am currently using an open-source javascript table sorter: http://mottie.github.io/tablesorter/docs/
The problem I have is that I dynamically add tables to my page in reaction to the user pressing a button. Only the most recently added table becomes sortable and the previous tables are not sortable anymore after I add the new table. Currently, I have this code at the end of my table creation:
//Make table sortable
$(document).ready(function () {
$("#" + thisTable.ID).tablesorter();
});
I don't understand why the old tables lose their sortability if they're not being reloaded. I am only appending a new table with a different ID under the previously added table.
You can change your selector to $('table'), and this will add the sorter to all tables. Your current code will only run on page load though, so you'll have to execute the $('table').tablesorter(); line every time you dynamically add a new table (in your button's click handler).
It would be better though if you added a class, such as sortedTable to every table, and made your selector $('.sortedTable'), rather than simply $('table'), because you may at some time want a table that isn't sorted and the first version will always sort all tables. The second version will only sort those tables that you explicitly mark as sortable.

JQuery & AngularJS - First object not recognized by selector

http://pastebin.com/HBGevwkV
In my view, I have a table. Rows are generated by the $scope.addScheduleElement() function. The default/initial row is auto-generated by the $(document).ready() call. After that, the user can click a button in the view to add more rows.
Each row of the table has its own color-picker element. I used a div for the color picker which then gets an external color-picker framework applied to it.
For some reason, the jquery call that applies the color-picker properties to the elements with the color-picker class isn't registering the first row. The call is seen in modular.js where it says
$(".preview-circle").each(function(index,ele)
{
initPicker(ele);
});
When the default row is created, the color-picker won't work. Then when I add more rows, the last row is always the one that doesn't work. JQuery won't recognize the existence of the first color-picker class which I can tell because printouts in the .each call are only seen after manually adding rows.
Any ideas? Thanks
$scope.addScheduleElement() doesn't add a row. The row is added by ng-repeat afterwards.
The simplest thing to do:
elapse.controller('ScheduleController', function($scope, $timeout){
...
$timeout(function() {
$(".preview-circle").each(function(index,ele)
{
initPicker(ele);
});
});
That way the loop for initPicker runs later, when everything should be finished.

How To Access Dynamically Created Page Elements with jQuery

I have a web app which uses jQuery to append rows onto the end of a table. Each row has a textarea to make notes, and an edit button which pops up a window so more information can be entered. The code to do so looks something like this: http://jsfiddle.net/H3m4z/
That is a trimmed down version of the actual code because the real code it involves an AJAX call to save data from each table row into a database when it is added. rowID is unique in the proper script so I can refer to the textareas of each row by 'notes[rowID]'.
This is what I do when users enter more info on the edit popup window. Any new notes entered are saved into the database but to make the web app feel more 'live' and responsive the new notes are copied across from the edit window to their corresponding notes field in the parent table like so:
window.opener.$('#notes[' + rowID + ']').text(newnotes);
This works absolutely fine for rows which already existed when the parent page was loaded, like the first table row in my example. However it does not work for table rows which were dynamically added by jQuery. I'd guess the answer involves live(); somehow but I'm not exactly sure where or how.
To make use of event delegation with on() (which replaces live()):
$('#table').on('click', 'td button', function(e){
});
Or you could just wrap your html in a jQuery function and bind the events right away (simplified example):
var $tr = $('<tr><td>foo</td></tr>').on('click', function(e){
});
$tr.appendTo('#table');
This would obviously bind the event to the actual <tr>, but you get the idea.

Categories

Resources