We Keep Coding

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 get TD from next row with same index as current TD

I have a large HTML table where all rows of the body have the same structure.
Within this table there are editable TDs (which have the class "editable" and contain a contenteditable div) and non-editable TDs (which dont't have the class "editable" and do not contain a div).
Now I am trying to get the TD from the next row that has the same index as the current (closest) TD.
The below code gives me the correct index of my current TD within its row (and looking only at editable TDs).
Can someone tell me how I can get the equivalent TD of the next row ?
My jQuery:
$(document).keydown(function(e) {
var current = $(e.target);
var editables = $(current).closest('tr').find('td.editable');
var count = editables.length;
alert( editables.index($(current).closest('td')) ); // for testing
// ...
});
Instead of the alert I am looking for something like the following:
$(current).closest('tr').next('tr').find( /* the td with class editable AND the index matching the above */ );
Example:
If I am currently on the 4th editable TD in a row I would then need the 4th editable TD in the next row.

Try using :eq() like
$(document).keydown(function(e){
var current = $(e.target);
var editables = current.closest('tr').find('td.editable');
var count = editables.length;
var index = editables.index(current.closest('td'));
current.closest('tr').next('tr').find('td:eq('+index+')');
});
As commented above, you can use current instead of $(current)

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

on button click delete from datatable and also from array

foreach row in my table i've a delete button , on click this button i've the following function :
function deleteBussDay(jQtable)
{
var row = jQtable.parentNode.parentNode;
$(jQtable).closest('tr').remove();
openHour.splice(row.rowIndex,1);
// openHour is my array ,which i also want to delete from
}
the problem with this code it does delete the corret row from the table when clicking on delete but it removes the wrong row in the array . (one above of the selected row)
how can i fix it ?!

If, like you say, the correct row is removed, then you make the correct traversal to the table row here:
$(jQtable).closest('tr').remove();
Meaning, to get the rowIndex property of our table row, we can use the same jQuery object together with .prop():
function deleteBussDay(jQtable) {
var $row = $(jQtable).closest('tr'), rowInd = $row.prop('rowIndex');
$row.remove();
openHour.splice(rowInd ,1);
}

'rowIndex' counted for each table.
'rowIndex' changed when you sort table.
As alternative you can use some 'data' attribute as mark.
function deleteBussDay(jQtable)
{
var row = $(jQtable).closest('tr');
var id = row.data('rowIndex');
row.remove();
openHour.splice(id, 1);
// openHour is my array ,which i also want to delete from
}
or
function deleteBussDay(jQtable)
{
var row = jQtable.parentNode.parentNode;
var id = row.rowIndex;
$(row).remove();
openHour.splice(id, 1);
// openHour is my array ,which i also want to delete from
}

How do I insert a new TR into the MIDDLE of a HTML table using JQuery?

I know how to append a new row to a table using JQuery:
var newRow = $("<tr>..."</tr>");
$("#mytable tbody").append(newRow);
The question is how do I create a new row that precedes some existing row.

var newRow = $("<tr>...</tr>");
$("#idOfRowToInsertAfter").after(newRow);
The key is knowing the id of the row you want to insert the new row after, or at least coming up with some selector syntax that will get you that row.
jQuery docs on after()

where_you_want_it.before(newRow)
or
newRow.insertBefore(where_you_want_it)
-- MarkusQ

Rather than this:
$("#mytable tbody").append(newRow);
you are going to want to do something like this:
$("#id_of_existing_row").after(newRow);

With:
var newTr = $('<tr>[...]</tr>');
You can…
Insert it after (or before if you so choose) another row for which you know an ID (or whatever other property):
$('#<id of the tr you want to insert the new row after>').after(newTr)
Insert it after a particular row index (indices are 0-based, not 1-based):
$($('table#<id> tr')[<index>]).after(newTr)
…or as you mentioned, the absolute middle is possible:
var existingTrs = $('table#<id> tr')
$(existingTrs[parseInt(existingTrs.length / 2)]).after(newTr)

If for example u place an insert image into your table this will be something like this :
Your last cell in your table :
<td> <img class=\"insertRow\" src=\"/images/imgInsertRow.jpg\" /> </td>
Your jquery code :
$('table td img.insertRow').click(function(){
var newRow=$('<tr>........</tr>');
$(this).parent().parent().after(newRow);
});