Develop Reference

Cloned autocomplete input not working

I have a problem with jQuery function clone(). I think the problem is in the withDataAndEvents input parameter of this method.
Initially, I'm coding a table that has dynamic rows. I'm adding dynamically rows when clicking on a button put only in the first row. the first row contains initially many inputs fields and combo-boxes. Each field is initalized by an ajax call. And each action on a field leads to the refresh (filtering) on the whole fields of a row. I'm also using autocomplete on input fields.
The first row works perfectly. However, when cloning the tag:
If I did not enter values in the first row, the cloned and first row work fine
If I enter a value or values in first row fields and after I clone the , only the first row fields still work. In this case, if I try to change the value of the combo-boxe (which fire a change event for all concerned row fields), the fields of the first row are impacted despite using Ids when changing autocomplete data. Ids of fields, combo-boxes, table rows are dynamically created when clicking on the button to clone the widget.
The code I wrote is too long so I created a fiddle and simplified the case and still have the same problem.
I tried many suggestions that I've found like this, this one or this one in vain :-(
(data.('autocomplete', null), autocomplete("destroy") ...)
Do you have ideas about this issue ?
thanks in advance

Aside from the typo in the test (you are selecting by class instead of the new element by id), the basic problem is you are applying autocomplete before you add it to the DOM.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/87jcw1y0/2/
I just reversed the order of these two lines:
$('.body').append(clone);
applyAutoComplete2('#myinput' + inc);
The cause... Some plugins use storage data associated with the DOM element, or attach events to ancestors etc. None of these can happen with a disconnected DOM element, so just attach it to the DOM first.

I think ur asking this
Check in this link http://jsfiddle.net/bsarunmca/87jcw1y0/3/
applyAutoComplete1('#myinput1');
$("button").click(function() {
inc = inc+1;
$('#myinput1').clone().attr('id','myinput'+inc).appendTo('.add-this');
$('#myinput'+inc).val('');
applyAutoComplete2('#myinput'+inc);
});

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.

Insert`tr` at beginning of table

Im trying to move the user selected tr to the beginning of the table:
$(this).closest('tr').insertBefore($('#TableBody').find('tr:first'));
I dont know why it wont work! In my example http://jsfiddle.net/52VtD/5207/ the table works like a dropdown. If the user then selects one option by clicking on Auswählen this tr should be inserted as first tr in the table!
Thanks for your help

use prepend() or can try prependTo()
by prepend()
$('#TableBody').prepend($(this).closest('tr'));
by prependTo()
$(this).closest('tr').prependTo($('#TableBody'));

You can try -
$('#TableBody').prepend($(this).closest('tr'));

Highlighting rows with DataTables (or other table/grid plug-ins)

There's an example in DataTables for highlighting rows on hover:
http://datatables.net/examples/advanced_init/highlight.html
However, I'm looking for something a bit different. I'd like the highlight to be trigged when users click on words outside the table. For example, in the above link, I'd like row #2 to be highlighted when a user click on "visibility" in the text above the table (so it's kind of a hyperlink).
I'm assuming I can find an highlighting plug-in that maybe can do what I need. But before
I got there, is there any easy way to do this with DateTables or other table/grid plug-ins?
Thank you!

Here is an example of highlight on click.
It also has an example of deleting a row on click from a link outside the table.
EDIT: This example won't do exacly what you want, but it get's you most of the way there. I have retrofitted the example in this fiddle to do what you want. Here is the "click link to highlight row" part of it:
$("#rowHighlightLink").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$('#example tbody tr').eq(1).addClass('row_selected');
});

appendChild not in right place

I want to apend a child ( <tr> ) to a table, after a specific row. because the rows get added by while mysqli_fetch_array()
I made a fiddle to show the problem. When you clic on add the text "abc" gets adedd. but behind the table, not as a new <tr> under the original row.
Fiddle
How can this be solved.

jsFiddle Demo
You are inserting a child of the table row with append Child. That is why the placement seems to be "not in the right place". It is however, right where you asked it to be placed. Instead, you can use insertBeforeMDN like this:
ct.parentNode.insertBefore(tr,ct.nextSibling);
This will look at the parent of the row (<tbody>) and then insert the new row before the next row of the selected button. Essentially this is "insertAfter", but that feature was never implemented for whatever reason.
As to the claim that insertBefore is somehow slow and should be avoided or that appendChild is preferred, it would seem that is not the case.