Develop Reference

JS function is not working when element clicked

first I'm going to explain the situation and then the problem.
I'm designing a table with some data and I developed some functions for ordering this data when the "th" tag of the column is clicked.
$('#table_id > thead > tr > th').click(function() ...
//ordering algorithm
In addition, I created 2 "select" tags for filtering the data of the tables. The method I'm using for filter data is to search for the text that matches the select text and use remove() method for deleting the row.
document.getElementById("select_id").addEventListener("change", function() {
//remove rows
When the data is filtered (by the select) and I try to click the "th" tag of the column the "click" method is not working and I have no error messages in the console, so I don't know how to solve it.
Any one knows is "click" method changes it's functionallity when the page content changes?
Thanks for reading.
If more code is needded for understanding the problem I will paste it.

If you are changing the DOM after page renders try using .on()
$(document).on('click', '#table_id > thead > tr > th', function() { ... });

This seems to be an issue with dynamically loaded elements.
It is a duplicate question and has been answered here:
Event handler not working on dynamic content

If the original th is removed from the DOM and then instead new th has inserted, the click event is no more assigned to it, so you need to re assign it.
another approach would be like what Nick Surmanidze suggested.

How to get second td value from a table using javascript

Tried to get table's tr second td value but not working.I think closest is not working in chrome or firefox properly. I am using this script in angular 6.How to resolve this issue?
const target = e.originalEvent.toElement.closest('td');

When reading the title of your question and looking at the option "Get ID" from your drop-down, I assume that you simply want to know how to write the ID of the current table row to component.selectedVal.
Since you're building individual table rows by iterating over the component.data array, the solution is straight forward. Just add below event handler to your p-dropdown element and get rid of the method component.onSelectType.
(onChange)="selectedVal= data"
Please have look at this StackBlitz

Is there a way to put columns of a table in divs using DataTable?

So what I'm trying to do is make it so that the user can choose which columns of a table to display after it has already been generated. I already have functionality that does this, after the user changes their options it destroys the current table and then reinitializes it with different visibility settings for certain columns. While this works, it's sorta slow and doesn't look as pretty as say, the columns just disappearing. I think if I put the columns in uniquely id'd divs and then edited their css to say display: none; using jquery when the user deselects them it would work quicker and more attractively, but I haven't been able to find a way to put the columns in divs.

You shouldn't need to put the columns in divs.
myFunction = function(){
$('.first').css('display','none')
}
codepen

May be a better solution but you could use the CSS nth-child (https://www.w3schools.com/cssref/sel_nth-child.asp) property and jQuery's .index()to identify the column you wish to remove and remove the column from each table row.
Something like this might work (assuming you have a header row containing <th> elements):
$('table th').on("click", function() {
var index = $(this).index() + 1;
$.each('table tr', function() {
$(this).find('td:nth-child(' + index + ')').hide();
});
});

Answering my own question because I managed to find a function called column().visible that can target columns by index and change their visibility. It works perfectly, and I wasn't able to implement the solutions that others posted.
Also for anyone that comes in later to figure out if you can put the columns in divs, as far as I can tell you cannot, but you might not need to for whatever it is you're doing.

Show/Hide button for each row in table

I have two buttons in each row of a table. You see button 1 at first. When button 1 is clicked, it disappears and button 2 pops up. This is simple, but I don't understand how to create this behavior for each row individually. Right now it only works for the first row.
I have created a codepen to better illustrate this:
http://codepen.io/cavanflynn/pen/qdVorB
I only understand how to do this using their id's so it only works for the first row.
var first = document.getElementById( 'first' ),
second = document.getElementById( 'second' );
How would you get this behavior to work for each row on its own? Thanks!

Because id must be unique valuesdocument.getElementById() will get the first one;I think you can change the id to class and add an param(witch row) to toggle function. Or in toggle function using js to get the Sbiling node

Like #casimiryang said, problem are the ids. You can only have 1 element with the same ID on the page.
So to solve the problem you can use classes instead and add click event handlers with jQuery.
$(".first").on("click", function(){
$(this).hide();
$(this).next().show();
});
$(".second").on("click", function(){
$(this).hide();
$(this).prev().show();
});
Here is the codepen: solution

As you said you have jQuery, things get really simple. Just replace your IDs with classes and, for each button clicked, get the second within the scope of its parent (i.e. the row). Here's the updated codepen.
$('.first').click(function() {
$(this).hide();
// Using .css() instead of .show() because .show() would render the button with its default display (inline) instead of block.
$(this).parent().find('.second').css('display', 'block');
});

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);
});