Develop Reference

Deleting previous table when selecting a new table

<div id="dropdown" class="dropdown-content">
Table
</div>
In my program I have a button, where a user will select a table and then that table will be displayed. Currently, when a second selection is made, it just adds a table beneath the first table. I would like to just display the current selection. I have tried this:
<div id="dropdown" class="dropdown-content" syle="clear:both;">
Table
</div>
And it did nothing. I also tried using a clearfix to no avail. Any help would be greatly appreciated.

Using style="display:none" on the table you wish to hide will work.
You could create a function that can easily turn the visibility of just one table on and off depending on the button you click but without your Javascript, I can't really help you.
Feel free to tag me or message me back when you have put in the Javascript and I can try to help you right a function that will do it for you :)

1- Give every table an ID :
<table id="table1">..</table>
<table id="table2">..</table>
2- In the click handler of your button use the id to hide the table, let's say you want to hide table1
document.getElementById("table1").style.display = "none"
You can also use JQuery functions : hide()

You can either use JQuery function .empty() to delete the previously created table, or use .hide() [to hide the table] and .show() [if u ever need to display the table again].
But,if you post your script,it'll be easier to give a correction,instead of a different solution.

how to replace edited row in table

In this fiddle
There are two rows and each row have 2 bootstrap icons edit and delete.When edit icon is clicked then a bootstrap dialog box appears showing the existing column values,User can change the values and after clicking the save button the old values are replaced by the new one.I tried using
$Updaterow.remove();
$Updaterow.append('<td>'+ $('#editName').val()+'/<td>'+'<td>'+ $('#editEmail').val()+'/<td>'+'<td>'+ $('#editmobile').val()+'/<td>');
but this is not working.I have also tried with this
$Updaterow.replaceWith('<td>'+ $('#editName').val()+'/<td>'+'<td>'+ $('#editEmail').val()+'/<td>'+'<td>'+ $('#editmobile').val()+'/<td>');
In this way also the new row is not getting replaced.Can any body please tell me how to do this?

You are trying to replace TR with a TD. Try this
$Updaterow.replaceWith('<tr><td>'+ $('#editName').val()+'</td>'
+'<td>'+ $('#editEmail').val()+'</td>'
+'<td>'+ $('#editmobile').val()+'</td></tr>');
And the first one wont work since you are appending TD to a TR which is not in DOM any more.

Javascript delete html table row

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

jQuery click works fine on tr but not td

I'm trying to create a Live Table Edit with Jquery but I'm having trouble with getting it to fire on my td's rather then the tr
Here is my code.
http://jsfiddle.net/y7Zck/1/
This works almost as intended. What I would like to change is so that the function doesn't fire if you hit the frameTot with value 150 in this example. You should only be able to click on the first two fields and get the edit boxes to show. How would I go about doing this?
My attempt to change
$(".edit_tr").click(function()
to
$(".edit_td").click(function()
Doesn't seem to help at all.

It's not working because, of this line var ID = $(this).attr('id'); It's right when you are using tr and it's returns the tr ID. When you change it to TD click, the ID changes. You need to get TR id to make it work properly.
Change it to
var ID = $(this).parent().attr('id');
Check Here, http://jsfiddle.net/muthkum/y7Zck/2/

Your script is accessing $(this).attr('id') which (of course) isn't the same for your td as it is for your tr.
You need to update both listeners to use something like $(this).closest('tr').attr('id') or parseInt($(this).attr('id'), 10) (grabbing just the number-part from your td's ID).

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 :)