Javascript delete html table row - javascript

I dynamically create an html table and one of the cells in each row stores a button that I want to delete that row when pressed. What are my options in knowing what table row to delete from the delete button pressed?
Am I somehow able to get the row that the button is in? Maybe then inside the click I could use the events 'this' property to get the button and then find out which cell it's in, and from there which row that cell is in? Not sure how I'd go about doing that though.

if you are using jQuery this will be a sample code on how you can achieve this.
$('#my_table_id').on('click', 'button', function() {
$(this).closest('tr').remove();
});
hope this helps, best!

Put this in the button's onclick handler:
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

Can be done with native JS, but here is a jQuery solution. Be sure to clone(true) to ensure your events are preserved.
<tr><td>hello</td><td><span class="deleteMe">Delete</td></tr>
$(".deleteMe").click(function(){$(this).parent().parent().remove();});

Related

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.

Detect when the inner html of a <td> changes with javascript or jquery

I have a table and I am dynamically add the value in each table cell from FireBase. I want to add a "flash" or "blinking" effect everytime that cell changes. So I need to be able to detect when the content of that has changed.
For anyone who is still looking and stumbles across this question, I've found the solution here, posted by #Rohan Kumar, which uses the DOMSubtreeModified
Call a Javascript function when a table change content
$("#mytable").bind("DOMSubtreeModified", function() {
alert("Hurrey table changed");
});

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

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

How to Add/remove row in table in jquery when we check and uncheck the checkbox in other table?

i have one table where i have select the row by checking check box. I wanted to add selected checkbox rows to another table which is dynamically created when some one check checkbox.
I am waiting for you response
Something like
$("#firsttableid input:checkbox").click(function(){
$(this).closest("tr").appendTo("#yoursecondtableid");
});
Edit
If you dont' want to move the row then you can use .clone() to the row and then append to the other table like. Also a change in the click handler to not add the row when the checkbox is unchecked. If you don't want to add a row again and again you have to take care of that too.
$("#firsttableid input:checkbox").click(function(){
if ($ (this).is(":checked"))
{
$(this).closest("tr").clone().appendTo("#yoursecondtableid");
}
});
Working Demo
Working Demo with remove
Basically as rahul suggested but a minor addition adding clone()
$('#first_table_id input:checkbox').click(function() {
$(this).closest('tr').clone().appendTo('#second_table_id');
});
Jquery API documentation is your friend :)

Categories

Resources