We Keep Coding

Target dynamically created HTML element in function (for append event-- not click!) jQuery

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.

Assign and retrieve an html table to a javascript variable with jQuery

I want to backup an html table to afterwards filter it using jquery:
$('.row').closest('td').not(':contains(' + v + ')').parent('tr').remove();
Since I do remove() I have to back up the rows before:
var allTable = $('#mytable').html();
And then, when filter is performed I turn back to previous table data:
$('#mytable').html($(allTable));
But this does not work. If I do:
alert($(allTable).filter('tr').length);
next to the first assignment, zero rows are returned.
Please, can you assist me?

filter() is used to find elements within an array of elements. This isn't what you need. You're looking to find() the child elements within another. Also, storing the HTML only to turn it back in to a jQuery object is a little redundant - you may as well just store the jQuery object itself. Try this:
var $table = $('#mytable');
$table.remove(); // use your existing logic here
alert($table.find('tr').length);
$table.appendTo('body'); // add the table back in to the DOM when conditions are met
Example fiddle

I ran into a similar issue when using a highlight function. I solved it by cloning the table into a hidden div and restoring it from there, instead of from a variable. see jquery highlight() breaking in dynamic table

Did you solve this problem?
I suggest a workaround.
Instead of using your cloned table, make a (temporary) copy of it and use it for alert.
var alertTable = allTable;
alert($(alertTable).filter('tr').length);

Updating only one cell of a table

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/

Javascript replace child?

I have a table in HTML with a few rows.
I originally gave some of those table rows (TR) an ID and I would use javascript to set the INNERHTML of some of these table rows with some new dynamic content.
However, Internet Explorer doesn't like this and gives an 'unknown runtime error' because I am trying to set the INNERHTML of an inline element.
So now, I'm attempting to instead replace the entire table row child with a new one. I can't simply appendChild because I need the new table row to be in the same position as the original (to imitate as if just this table row's content had been changed when in reality, the entire row is being 'replaced').
Was hoping someone had a solution to this (I was thinking a) get child position b) delete original table row and c) insert new table row at child position found in A). Perhaps there is even an easier and better solution? Would love some input.
Cheers!

IE doesn't much like table manipulation via innerHTML. You can do this:
var oldrow = document.getElementById('the_id');
var newrow = document.createElement('tr');
// add cells to the new row
var newcell = document.createElement('td');
newcell.innerHTML = "content";
newrow.appendChild(newcell);
// ... ... ...
// Replace the old row with the new one:
oldrow.parentNode.insertBefore(newrow, oldrow);
oldrow.parentNode.removeChild(oldrow);
newrow.id = 'the_id';
Off-topic: Issues like this are part of why I usually recommend using a library like jQuery, Prototype, YUI, Closure, or any of several others to smooth over browser oddities and provide additional basic functionality that the DOM itself doesn't give you. This lets you focus on the actual problem you're solving, rather than the arcana of browser pitfalls.

It's innerHTML, not INNERHTML.

Decided to append a child row AFTER the current row, and delete the old row. Most efficient method I could think of.

jquery child matching too much?

I am importing a feed into Tumblr and because of the formatting of the site, it shows too many pictures. So to fix that, I thought I would use jquery to remove extra elements.
It turns out that the imported feed uses tables. No worries, I made a jquery call that seemed to work fine on an individual post.
(Pardon the ugly match)
$('.copy div table tbody tr td div table tbody tr td:gt(3)').remove();
This works swimmingly on http://apt.jauderho.com/post/127696762/aaman-lamba-hibiscus
However, going to a page with more than one post, it looks like the second post is being treated as part of the first and hence all the pictures are removed due to the gt(3). My understanding was that using the fragment above, I would be able to iterate on each post leaving only 4 images max per post. See http://apt.jauderho.com/
Can anyone tell me what I'm missing? Thanks.

Try this:
$('.copy div table tbody tr td div table tbody tr').find('td:gt(3)').remove();
The difference from the original is that the find() is executed for every tr that is matched by the first selector. It will remove every td after the 4th td in every matched tr.