I have a table that is dynamically built using DOM. It has 10 cols, and on each row i have some data that i get from a websocket, text boxes and a submit button to add each row to the database.
How can i remove a row after i submitted it?
Someone mentioned jQuery but can't figure it out how to do that.
EDIT
I'm using Chrome and had problems with all the scripts below. this is how i resolved it:
instead of $('input') I used jQuery('input') all the scripts are working fine.
thank you for your help.
Try something like this...
$('input').click(function() {
$(this).closest('td').remove();
});
Demo: http://jsfiddle.net/wdm954/32W63/
EDIT:
Here is another way to do this...
$('table form').submit(function() {
// run some ajax here to do your database work
$(this).closest('td').remove();
});
You can do like this:
$(document).ready(function(){
//Assuming all your submit buttons have the same class
$(".submit").live("click", function(e){
var buttonHnd = $(this);
$.post("your-php-file.php",
{/* the data you want to post e.g. */ name: $("#name").val()},
function(data){
buttonHnd.parent().parent().remove();
}
);
});
});
var myTableRow = ... // Find the row however you like
myTableRow.parentNode.removeChild(myTableRow);
You might also be interested in my AJAXFetch jQuery plug-in. Among other things, it lets you treat a row of a table as a form and submit all the form elements in it using AJAX, swapping it out the row with the result from the server (usually the non-form version). I use it in many of my internal applications for in-place editing of data.
You could try something like:
// Simple bottom row removal
$('#myTable tr:last').remove();
// Removing n'th (ex. 3rd) row from the table
$('#myTable tr:eq(2)').remove();
Source: JQuery HowTo
you can use jquery' remove to remove it from dom...
http://api.jquery.com/remove/
Related
I am trying to implement a simple update functionality for the values in my table. I have an edit button, which triggers a modal where I edit the values and save them. In order the values to be immediately update in the DOM I am using the following jquery code on save:
$('#lblEditDeleteProducts').find("tr .nameDom").text("new val");
$('#lblEditDeleteProducts').find("tr .brandDom").text("new val");
$('#lblEditDeleteProducts').find("tr .priceDom").text("new val");
The problem is that with this code intead of one row in my table all the rows get updated with the "new value". I am very new to jquery and I am out of ideas how to solve this, so any help will be appreciated.
Here is my table structure :
As there is not much information of your HTML code
var selectedTR;
$("#lblEditDeleteProducts tr").click(function(){
selectedTR=$(this);
//init your modal pop up here or do it globally
})
Let assume the ID of save button is #save
$("#save").click(function(){
selectedTR.find(".nameDom").text("new val"); // get relative value from the mdoal input
selectedTR.find(".brandDom").text("new val");
selectedTR.find(".priceDom").text("new val");
})
If you are interested you can use this plugin also (advanced feature) datatable inline edit
The selectors that find is using are too general, so they're selecting all matching rows.
$('#lblEditDeleteProducts').find("tr .nameDom").text("new val");
Here's what jQuery is doing with that particular line of code (the same thing applies to all the others, too):
Get lblEditDeleteProducts by ID
Using that node, find() all descendant elements that match the selector tr .nameDom
Update the text of all nodes that it finds.
In your case, that selector matches every element in every row because they're all descendants of #lblEditDeleteProducts; there's no way to filter out just those you want with the code that you've written.
You'll need a way of explicitly determining which row to update.
Based on your comment that the edit button is in the each row, you can reference the corresponding row with closest
$("EDIT BUTTON SELECTOR").click(function(){
var $btn = $(this);
var $row = $btn.closest("tr");
$("DIALOG SELECTOR").dialog({
buttons:{
Save: function(){
//bunch of stuff
$row.find("td.nameDom").text("new val");
}
}
});
});
I'm using jQuery DataTables and want to copy all rows (save in JavaScript array) upon clicking the header checkbox.
I want to find where jQuery DataTables store the HTML for remaining page of rows, so I can navigate through JavaScript then check it there or set property checked to true.
Something like this one.
Other information:
I use data from an ajax source(serverside:false), all data is returned.
When I click page 1, all the rows remain Checked.
SOLUTION
There are many methods that could be used for that purpose. You can use rows().data() to get the data for the selected rows.
Example:
var table = $('#example').DataTable();
var data = table
.rows()
.data();
alert( 'The table has ' + data.length + ' records' );
DEMO
See this jsFiddle for code and demonstration.
I find the generated element by jQuery DataTables using this code, and I can copy the whole tr element that hides when paging the DataTables.
$('#example').DataTable().rows().iterator('row', function(context, index){
var node = $(this.row(index).node());
//node.context is element of tr generated by jQuery DataTables.
});
If you do this:
$('#table').DataTable().rows().data();
you get a lot of unnecessary data.
If you just want the table data you can do this:
$('#table').DataTable().rows().data().toArray();
Using
tableObject.rows().data()
will return all the data from the table.
Set the pageLength:
$('#example').dataTable( {
"pageLength": 50
} );
There is a one table where user can select multiple rows, and below to the table there is two buttons moveup and move down. when user will click on movebutton, rows should go move up, similar to movedown.
Below is my Jquery code
$(".moveUp").live("click", function(){
var row = $(".selectRow")
$(row).each(function() {
row.insertBefore(row.prev());
});
});
But it is behaving very wrong. Please help me. I am new in jquery.
Thanks!
You need to try like this
$(".moveUp").on("click", function() {
var row = $(".selectRow");
row.each(function() {
var $this=$(this);
$this.insertBefore($this.prev());
});
});
there is no need to wrap row using $( ) again
An alternate approach is to manipulate an array of pure data (store row and selected state), then trigger a 'render' function on the data after it is changed. IOW, redraw the entire table on each operation. Typically this is fast, and an advantage is you can separate the logic/data from the visual interface (like MVC style).
I have a html table containing data rows. I am building add/edit/delete functionality to the table using AJAX.
The format of my table row is as follows:
<tr id="281"><td class="todo-task">fdgdg</td><td>some more data</td><td>EDIT BUTTON</td></tr>
At the moment I have a working AJAX function to both add a new row and edit a row via a prepend().
In order to edit a table row, you click the edit button which pulls the values into the form and submits ... simples so far. Here's the code for the edit click and the form markup. Note the id from the edit click goes into a hidden field in the form.
$("button.edit-todo").bind("click", function(){
var task = $(this).closest('tr').children('td.todo-task').text();
var todoID = $(this).closest('tr').attr("id");
$("div#todo-form input.todo-task").val(task);
$("div#todo-form input.key").val(todoID);
});
...
<form id="mgnt-edit-todo-form" class="record-edit-form">
<input type="text" class="todo-task input" name="task">
<input class="key" name="key" type="hidden" value="279">
<button class="update uk-button uk-modal-close" type="submit">Save</button>
</form>
... and the ajax bit which binds the hidden field for the update.
$("button.update").bind("click", function(e){
var key = $(this).closest('.key').attr('value');
$.ajax({
type: "POST",
url: "update-record.php",
//etc etc etc
The problem
The first update works fine, it will prepend a table row including the id. The issue occurs when I then wish to make a further update to that same "prepended" row. Whilst the DOM shows the markup as correct the function on button.edit-todo will no longer get the id. When looking at the form markup in the DOM, the value of the hidden field is blank.
I've looked at the source in Chrome and I can see that it does not match the view in the browser/DOM. For example, the markup is all the same, but the rows have been put into a different order - it looks as though by date. (There is a date field but I have cut down the fields for this example..) I think this is causing the issue ... question is why? and how do i fix it?
Thanks
Update
Here is my markup in the DOM, looks fine to me.
To be absolutely clear the issue is occuring when clicking the edit button.
It calls the following function (now using 'on':
$("button.edit-todo").on("click", function(){
//load the data from this row
var task = $(this).closest('tr').children('td.todo-task').text();
var client = $(this).closest('tr').children('td.todo-client').text();
var due = $(this).closest('tr').children('td.todo-due').text();
var todoid = $(this).closest('tr').attr('id');
$("div#todo-form input.todo-task").val(task);
$("div#todo-form select").val(client);
$("div#todo-form input.todo-due").val(due);
$("div#todo-form input.key").val(todoid);
});
Clicking row 286 works as intended (it was present on the page load) in that the tr id is added to the hidden field in the form. Clicking row 297 (as far as I'm aware in the DOM?) does not pass the id to the hidden field...
Please help!!! Doing my head in...!
Instead of .bind use .on:
$("button.edit-todo").on("click", function(){
(...)
and
$("button.update").on("click", function(e){
(...)
Using ID for loaded data is not very comfortable way anymore. Use class instead of ID.
Also jQuery has changed "bind" to "on" method. I recommend to use "on".
For example:
$(document).on("click", ".edit-todo", function(){
var task = $(this).closest('tr').children('.todo-task').text();
var todoID = $(this).closest('tr').attr("id");
$(".todo-form .todo-task").val(task);
$(".todo-form .key").val(todoID);
});
Also, source shows the code when the document loads, not the dynamic DOM.
I'm pretty novice at jquery but I have a table with a field in each row that is dependent on another field (checkbox) in the row. Since its in a table I need to handle them in bulk. I don't think I'm using next() correctly but I'm trying to grab the next .subnet_mask since it will be the one in the same row as hide it. I'll also have to update it once I get that far so that it handles hiding and showing if the checkbox is checked or not.
$(function() {
$('.dhcp').each(function() {
$(this).click(function(){
$('.subnet_mask').next().hide();
});
});
});
Any help is appreciated!
EDIT: ok ok :) well the page is actually written in VisualForce (for salesforce). For simplicty sake lets say its just a form wrapped around a table (up to 20 rows representing different records) displaying a checkbox field with the class .dhcp and a field after it called .subnet_mask that should be shown/hidden based on the checkbox. Is that helpful?
I'd rather do this
$('.dhcp').on('click', function() {
$(this).nextAll('.subnet_mask').toggle();
});
Then you show/hide the next .submask (assuming one .submask per <tr>) each time you click the .dhcp
I'd suggest the following, though this suggestion may well change once I see the relevant HTML:
$('.dhcp').click(
function(){
$(this).closest('tr').find('.subnet_mask').hide();
});
This assumes that there will be only one .subnet_mask element per row (otherwise this will hide all of them) in response to the click event. You mention that this depends upon a checkbox, so perhaps the following would be better, using the change() method:
$('.dhcp').change(
function(){
var that = $(this);
if (that.is(':checked')) {
that.closest('tr').find('.subnet_mask').hide();
}
else {
that.closest('tr').find('.subnet_mask').show();
}
});
References:
change().
:checked selector.
click().
closest().
find().
hide().
is().
show().
You're using next incorrectly. It should be more like this:
$(function() {
$('.dhcp').each(function() {
$(this).click(function(){
$(this).next('.subnet_mask').hide();
});
});
});
For this case, I'm assuming that .dhcp and .subnet_mask are indeed siblings, wit the latter coming immediately after the former. Otherwise, .nextAll() can be substituted for .next()
Edited as per point below.