We have a Footable in our page with some data, and one column has a delete row button, working as expected.
Problem is, when deleterow is pressed, we want to retrieve from the column a value, to do some process with it.
Example:
ID -- Name -- Delete
--------------------
01 -- John -- Delete
02 -- Doe -- Delete
When I press delete on second row, I want to retrieve this value, to search on an array, and delete it from there too, and to pass as parameter to an Ajax call.
I readed something like data-value but don't know how to get it. On delete row, there is a code like this:
$('table').footable().on('click', '.row-delete', function(e) {
e.preventDefault();
//get the footable object
var footable = $('table').data('footable');
//get the row we are wanting to delete
var row = $(this).parents('tr:first');
//delete the row
footable.removeRow(row);
});
I know row has the data, but don't know/understand how to extract the column I need.
Regards and thanks.
You can get at the columns in the TR as TD elements
eg
var columns = $('td',row); // all the TD elements in the row
You can get at individual columns by index (0-based) eg
var someColumn = $('td',row)[1];
Or if the column you are intersted in has a class eg:
var someColumn = $('td.someclass',row);
Related
I'm using datatables plugin to create a datatable. I've put a button to add new rows. The new inserted row can be anywhere depends on which column the table is sorted by. I need to set an event to the button inside the row once it is inserted. So I have to get the last inserted row to do so. But I can't find a way. I've tried below but it's not working. index() does not returning exact index where the row really is.
var row = table.row.add({...});
row.draw();
var tr = $('#datatable tbody tr').get(row.index());
Please help. Your answer is kindly appreciated and thank you in advance.
Take length of table and -1 and that number is the index of last
tr
var lastRowIndex = $('#datatable tr').length -1;
New rows will be appended onto the end of the row list, so you can do something like this
table.row(table.rows().count()-1)
See fiddle here.
Can't find a way to this using any plugin's provided function. But thank God there's a workaround.
Flag the inserted row in column rendering function. For example, I append a tag
datatable = $('#datatable').DataTable({columns : [{render : function(){... <last/> ...}}]});
On inserting new row, insert it with a data that indicate the flag inclusion. Get the row by the flag. And then remove the flag.
datatable.row.add({...}).draw();
var row = $('last').parents('tr');
$('last').remove();
For any other case which don't need to edit the <tr> explicitly, get the index of last inserted row. Get the datatable row and update the data. Set column render function to render the updated row accordingly.
var i = datatable.rows().count() - 1;
var data = datatable.row(i).data();
datatable.row(i).data(changeSomething(data)).draw();
And to remove the row
datatable.row(i).remove().draw();
I m using slickgrid V2.2, I am trying to append new row from the selected row along with data in the selected row. Its working fine, but in the added row the same id generating as the selected row by default. I am using below code. Kindly help me out to append a new row with different id from selectedrow
var row = grid.getDataItem(selectedRow);
dataView.addItem(row);
grid.render();
grid.setSelectedRows([]);
row is simply an object containing the columns, so row.id = {new id}; should work. You'll need to generate the id somehow depending on how your scheme works (don't use the curly brackets around the new id value, I'm just indicating that this value needs to be inserted).
I want to update certain rows where checkboxes are ticked. I am able to get the rows every cells content but not able to update them.
I'm trying to update 7th cell's content like this:
$.each($("input[name='eachSelector']:checked").parents("tr"), function () {
$(this).find('td:eq(7)').innerText = "this is modified";
});
I am able to get all the cells values of the checked rows like this below values is an array.
$.each($("input[name='eachSelector']:checked").parents("td").siblings("td"), function () {
values.push($(this).text());
});
how to update the cells values and add some css to it
You have an error in your code. You are trying to use a DOM method on a jquery object. You should change this line
$(this).find('td:eq(7)').innerText = "this is modified";
to
$(this).find('td:eq(7)').text("this is modified");
I have two HTML tables; a source address table and a destination address table where I want to shift rows from the source table to the destination table, and vice-versa.
It is mostly working, but I am getting stuck when inserting a row into the destination table from the source table. I do not want to append a row, as the last row in the destination table supports a text field where the user can type in an address manually. Below is the handler function for when a user clicks on a row in the source address table to remove and shift that row into the destination table:
$("#source_christmas_lights_addresses .move-row").live("click", function() {
var tr = $(this).closest("#source_christmas_lights_addresses tbody tr").remove().clone();
//The below line of code has been removed because I don't want to add my row to the end of the table.
//$("#destination_christmas_lights_addresses tbody").append(tr);
//Below here is new code added to insert a row
var tableRef = document.getElementById('destination_christmas_lights_addresses').getElementsByTagName('tbody')[0];
//Insert a row into the destination table before the end of route address.
var newRow = tableRef.insertRow(tableRef.rows.length -1);
//Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
newCell.innerHTML = "I want inner HTML from variable tr here";
});
PROBLEM 1
When I use the append function (commented out) it all works fine, except the row is at the bottom of the table which I do not want.
When I use the insertRow function, I can not work out how to move the appropriate elements of the tr variable to create a new row. I need the innerHTML because it includes code to enable the shifting of the row back into the source table.
Somebody please help?
PROBLEM 2 I am sure that the following line of code can written differently.
var tableRef = document.getElementById('destination_christmas_lights_addresses').getElementsByTagName('tbody')[0];
I thought I could use:
var tableRef = $("#destination_christmas_lights_addresses tbody");
but I can't get this to work.
Any help is appreciated.
Thanks for peoples responses. Final solution which solves both my problems is as follows.
$("#source_christmas_lights_addresses .move-row").live("click", function() {
var tr = $(this).closest("#source_christmas_lights_addresses tbody tr").remove().clone();
//reference id of element representing the row I want to add the address before.
$("#trip_planner_end_address_row").before(tr);
});
Try this
var $WhereToAppend=('#destination_christmas_lights_addresses').find('tr:first');
($tr).insertBefore($WhereToAppend);
Maybe the problem is "remove method and the clone", you should save the cloned tr in a variable for then remove the original tr.
Like this:
var tr_original = $(this).closest("#source_christmas_lights_addresses tbody tr");
var tr_cloned = tr_original.clone();
tr_original.remove();
I would like see your original sample code, so it would be easy to understand the real trouble ;)
Good luck !
I have a table showing records from database. There is a dropdown for selecting a particular user in each row. On change, it should show the corresponding values of the new user.
When I'm selecting a particular user from the dropdown, it should match the col1 and col2 value with the user selected and return col3 value. What I want is to get the col1 and col2 value of that particular row. How can I do it ? Please help me.
You want to use live('click', function(). This will apply on dynamically created elements.
For example, you may try something like;
$('#your_table_id .some_class_in_a_row_to_click').live('click', function(){
$(this).siblings().each(function(){
var column = $(this).find('.some_class_for_column_with_data');
var data = column.text();
alert(data);
});
});
You may apply this on a table having some columns. Clicking on some column with class some_class_in_a_row_to_click will alert text on another column in that row having class some_class_for_column_with_data