We Keep Coding

jQuery: Detach table rows then append back to same position

I am trying to remove/append table rows using jQuery's detach() method. I'd rather use this method than jQuery's hide/show to keep certain css styles. The detach function is tied to a checkbox that will hide any rows that contain "No".
The problem I am having is my table has sortable headers, and if I sort any column before I use this function, the table rows do not get put back into the right position.
$(document).ready(function () {
var tablerows;
$('#indexTable tr').each(function(i) {
$(this).data('initial-index', i);
});
$('#customSwitch1').change(function () {
if (tablerows) {
$(tablerows).appendTo('#indexTable').each(function(){
var oldIndex = $(this).data('initial-index');
$('#indexTable tr').eq(oldIndex).before(this);
});
tablerows = null;
} else {
tablerows = $('#indexTable tr:contains(No)').detach();
}
});
});
How can I put the rows back into the position before detachment, or even back to the position when the table is first loaded?

Copy multiple Tds

I have a table with 3 columns and 6 rows. I want to copy the contents of some of them into a newly created column, but insert them in the middle. So that it looks like that:
With this aprroach:
$("table td:nth-child(2) [id$=2]").each(function(i) {
var $newCell = $(this).wrap('<td></td').parent();
var $newRow = $("table td:nth-child(2) [id$=1]").eq(i).parents('tr');
$(this).parents('tr').remove();
$newRow.append($newCell);
});
$("table td:nth-child(2) [id$=3]").each(function(i) {
var $newCell = $(this).wrap('<td></td').parent();
var $newRow = $("table td:nth-child(2) [id$=1]").eq(i).parents('tr');
$(this).parents('tr').remove();
$newRow.append($newCell);
});
I get that result:
So the new columns should be inserted between the very left column and the column with Abc and not at the very right.
FIDDLE.

To insert something in the middle of the table what you can do is use either before() or after(). For example, we want to insert our new cell before the Abc item so instead of inserting it on the end you can use the below code to insert it before Abc (being the last td):
// Find the last element, and add the new cell before it.
$newRow.find("td:last").before($newCell);
Fiddle Here
If you would like to be more specific, you can specify the element by it's text in the selector. So in this case you can state before a td element containing the text 'Abc':
$newRow.find("td:contains('Abc')").before($newCell);

delete rows between tables with identical tr id

I have two tables and with same tr ids and content (for some reason)!
When I click a check a box in table1 I should be able to delete that row in both table1 and table2 etc. How can I achieve this?
I can delete from table1 using
table1.on('click','tr .lowBox:checked',function(){
$(this).closest('tr').remove();
}
How do I delete row from table2.
thanks!

table1.on('click','tr .lowBox:checked',function(){
$(this).closest('tr').remove(); //send to var to perform as below
$("table2").closest('tr').remove(); //If you're traversing UP
$("table2").find('tr').remove(); //If you're traversing DOWN
//Inside your "click" event, you can traverse any part of the DOM
//regardless of where you entered the document with your click event
//slightly more robust, you could do this..
/*or as fed variables...e
var $item1 = $(this).closest('tr');
var $item2 = $("table2").closest('tr');
var $rmTwo = function(item1,item2){
$(item1).remove();
$(item2).remove();
}
//Then execute your repeatable function, using the two tr's
$rmTwo($item1,$item2);
// should remove both, and you can play
//with your jQuery to get the correct elements
//or alter them if you change your code structure.
}
This would be the closest I can get you without seeing any of your HTML, and under the assumption that you're using jQuery on your page.

As others have commented, you shouldn't have duplicate IDs. Instead you could use classes, or generate IDs that are unique (for example, by prefixing with the table id). However, if you must do it this way, here's what you could do:
table1.on('click','tr .lowBox:checked',function(){
var row = $(this).closest('tr');
table2.children("#" + row[0].id).remove();
row.remove();
}
If you switch to table-unique classes for each row:
table1.on('click','tr .lowBox:checked',function(){
var row = $(this).closest('tr');
table2.children("." + row[0].className).remove();
row.remove();
}
This solution makes a few assumptions about the structure of your HTML. I can update it if you post a more detailed sample of your HTML.

I solved this with:
table1DT=var $('#table1').dataTable({});
table2DT=var $('#table2').dataTable({});
table1DT.on('click','tr .lowBox:checked',function(){
var row= $(this).closest('tr');
//do some thing with row variable
var d=row.attr('id');
var nRow = $('#table2 tbody tr[id='+d+']')[0];
table2DT.fnDeleteRow(nRow);
table1DT.fnDeleteRow(row);
}
so checking the table1 check box would delete that particular row in table1 and table2 etc.

how to access a row of whole datatable at the same time in jquery

I use the DataTables jQuery plugin. In that DataTable I have created a check box in the header and every column has a check box too.
That DataTable has a few pages. What I need is when I check the header checkbox then all checkboxes should be checked in all the pages of the DataTable.
I have to access the rows of all pages at a same time.
I tried this
if($('#selectAll').is(':checked')){
$(nRow).find(':input[name=group_select_components]').iCheck('check');
}
I can check the checkboxes when I will click the paginate. But I want to access a row of the dataTable at the same time..

Try the below code!!
if($('#selectAll').is(':checked')){
var table = $('#yourTableId').DataTable();
var cells = table
.cells( ":checkbox" )
.nodes();
$(cells).iCheck('check');
}
or this
if($('#selectAll').is(':checked')){
var table = $('#yourTableId').DataTable();
$(':checkbox', table.rows().nodes()).iCheck('check');
}

You can do this if your table has an id or class.
if($('#selectAll').is(':checked'))
$("#YourTableId tr td:first-child").each(function(){$(this).find(':input[name=group_select_components]').iCheck('check')});
Here it will find checkboxes in first td if your checkboxes are in another td you can give index of that td by using .eq(). This will only loop on specific tds.
Or If you don't want to set index of td than you can simply loop through rows
if($('#selectAll').is(':checked'))
$("YourTableId tr").each(function(){$(this).find(':input[name=group_select_components]').iCheck('check')})

You can do it by assigning the same class for all check boxes. So when you click to select all, all boxes will be checked.
Try this code:
$(document).ready(function() {
$('#selecctall').click(function(event) { //click event
if(this.checked) { // Check if the box is checked
$('.checkbox').each(function() { //loop through each checkbox
this.checked = true; //select all checkboxes with class "checkbox"
});
}else{
$('.checkbox').each(function() { //loop through each checkbox
this.checked = false; //deselect all checkboxes with class "checkbox"
});
}
});
});

How to add table columns and rows dynamically with the correct number of cells?

I'm looking to dynamically add rows and columns to a table, and I've gotten pretty far researching how to do this with jQuery. I've successfully, been able to add columns that have the correct number of rows and remove an ENTIRE row. What I have not been able to do is add a row with the CORRECT number of columns and remove an ENTIRE column (all rows gone!).
Here is the script I have so far:
jQuery(window).load( function($) {
// Add column function
jQuery('#ldrm-add-col').click(function() {
jQuery('.ldrm thead tr').append('<th class="rb-top">Test</th>');
jQuery('.ldrm tr:gt(0)').append('<td>Col</td>');
console.log('autocomplete');
});
// Add row function
jQuery('#ldrm-add-row').click(function() {
jQuery('.ldrm tbody').append('<tr><td class="remove-row"><span class="btn">Remove</span></td><td class="rb-left">Test</td><td>Test</td></tr>');
console.log('autocomplete');
});
// Remove row function
jQuery(document).on('click','td.remove-row .btn', function() {
jQuery(this).closest('tr').remove();
});
});
So, if I start with three columns and click add row, it works fine right now because it adds 3 rows. However, if I click add column and it appends a 4th column and then I click add row, there is a cell missing because the script doesn't know that another column was added.
http://jsfiddle.net/2kws0aLx/
Any suggestions on how I can improve the add row script to take into account any dynamically added columns?

For your add row function you will need to account for how many columns that are currently in the table. I did a quick and dirty IIFE to show what I mean.
http://jsfiddle.net/2kws0aLx/1/
// Add row function
jQuery('#ldrm-add-row').click(function() {
// -2 to account for the two empty th's at top left
var numOfCol = $('thead th').length - 2;
jQuery('.ldrm tbody').append('<tr><td class="remove-row"><span class="btn">Remove</span></td><td class="rb-left">Test</td>' + (function() { var str = ''; for(var i=0; i < numOfCol; i++) { str += '<td>Test</td>'; } return str; })());
console.log('autocomplete');
});