delete rows between tables with identical tr id - javascript

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.

Related

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
}

Get column and row number of the selected cell of a Flexigrid

I'm currently using a Flexigrid and I would like to recover the column number and also the row number of the selected cell.
I managed to recover the content of the selected one by adding "process: procMe" in the column model and by writing the following function :
function procMe(celDiv, id){
$(celDiv).click(function(){
var content = this.innerHTML;
}
}
But I didn't find yet how to get the column and row numbers.
Thanks for any help !
celDiv is the div inside the table cell.
Firstly, get the table cell:
var td = $(celDiv).closest('td');
Now, we use jQuery's index() method to get the relative position of that td within it's siblings
var colIndex = td.index();
colIndex should now contain the zero-based column index of that cell/header cell.
You should be able to do something similar with the row by retrieving the row, and then getting its index within its siblings:
var tr = td.closest('tr');
var rowIndex = td.index();

Remove rows from a table which I collected from a loop (JQuery)

I have a table that I loop with JQuery in order to find rows that match certain conditions:
$('#sometable').find('tr').each(function () {
var row = $(this); //<----
if(row.find('input[type="checkbox"]').is(':checked')) {
//etc
}
}
My question is, is there a way to remove each matched row? I mean is there a way to collect these row variables inside my if(row.find('input[type="checkbox"]').is(':checked')) so that I can remove the specific rows from my table directly?
Note that my rows don't have a unique id
You may want:
$('#proposedtable tr:contains(input:checkbox:checked)').remove();
or
$('#proposedtable input:checkbox:checked').closest('tr').remove();
Try this:
var filteredRows = $('#sometable').find('tr').filter(function(){
return $(this).find('input[type="checkbox"]').is(':checked'));
});
$(filteredRows).remove();
The above function will gather all the rows(tr) and then filter those rows based on the checked state of checkbox. Later the filtered rows will be removed.
To make it as array, use Array.prototype.slice.call()
var arrFilteredRows = Array.prototype.slice.call(filteredRows);
Is this help you ?
http://jsfiddle.net/LGdA3/
<pre><code>
$('input#myButton').on('click', function(){
$('table#someTable td input[type="checkbox"]:checked').each(function(){
$(this).parents('tr').first().remove();
});
});
</code></pre>

Internet Explorer Javascript/ Dom Object add rows problem

Here is my Javascript code :
function generate(choice)
{
if(choice==1)
{
charge++;
var new_row=document.createElement("tr");
var name="row"+charge;
new_row.setAttribute("name",name);
new_row.setAttribute("id",name);
var col1=document.createElement("td");
var col2=document.createElement("td");
var col3=document.createElement("td");
var col4=document.createElement("td");
col1.setAttribute("width","205");
col2.setAttribute("width","191");
col3.setAttribute("width","182");
col4.setAttribute("width","127");
var list1=document.getElementById("rep0").cloneNode(true);
id="rep"+charge;
list1.setAttribute("id",id);
var list2=document.getElementById("item0").cloneNode(true);
name="items[]";
list2.setAttribute("name",name);
id="item"+charge;
list2.setAttribute("id",id);
list2.setAttribute("onChange","match_row(this.id);");
// clone_nodes(list2,"item0");
var text=document.createElement("input");
name="minutes[]";
text.setAttribute("name",name);
text.setAttribute("value","15");
id="minutes"+charge;
text.setAttribute("id",id);
text.setAttribute("type","text");
var text2=document.createElement("input");
name="charges[]";
text2.setAttribute("name",name);
text2.setAttribute("value","28.00");
id="charges"+charge;
text2.setAttribute("id",id);
text2.setAttribute("type","text");
//text2.setAttribute("onChange","charge_calculator();");
col1.appendChild(list1);
col2.appendChild(list2);
col3.appendChild(text);
col4.appendChild(text2);
new_row.appendChild(col1);
new_row.appendChild(col2);
new_row.appendChild(col3);
new_row.appendChild(col4);
charges1=document.getElementById("charges");
charges1.appendChild(new_row);
final_charge=charge;
}
else if(choice==2)
{
payment++;
var new_row2=document.createElement("tr");
var col11=document.createElement("td");
var col22=document.createElement("td");
var col33=document.createElement("td");
col11.setAttribute("width","205");
col22.setAttribute("width","206");
col33.setAttribute("width","297");
var list11=document.createElement("select");
name="payment_type[]";
list11.setAttribute("name",name);
id="payment_type"+payment;
list11.setAttribute("id",id);
list11.setAttribute("onChange","set_payment_type(this.id);");
clone_nodes(list11,"payment_type0");
var text1=document.createElement("input");
text1.setAttribute("type","text");
name="amount[]";
text1.setAttribute("name",name);
id="amount"+payment;
text1.setAttribute("id",id);
var list22=document.createElement("select");
name="account[]";
list22.setAttribute("name",name);
id="account"+payment;
list22.setAttribute("id",id);
list22.setAttribute("onChange","correspond2(this.id);");
clone_nodes(list22,"account0");
col11.appendChild(list11);
col22.appendChild(text1);
col33.appendChild(list22);
new_row2.appendChild(col11);
new_row2.appendChild(col22);
new_row2.appendChild(col33);
charges2=document.getElementById("payments");
charges2.appendChild(new_row2);
final_payment=payment;
}
}
And here is the html button code with which I'm calling
<input type="button" name="Add More" id="Add More" value="Add More" onClick="generate(1);" />
Everything is working like a charm in all other browsers Except Internet Explorer
please help me I'm stuck. I have work out out for IE also.
For your own sanity, use a library like jQuery to achieve this kind of things.
Please, do not use the appendChild method to add rows to a table, or cells to a table row. So you will avoid the need of explicitly creating a TBODY element, appending it to the table, then creating and appending TR elements to that TBODY.
There are standard DOM methods that are specifically intended for this use. Namely:
1.) var newRow = myTable.insertRow(index)
Inserts and returns a new empty row (TR element) at the given index.
2.) myTable.deleteRow(index)
Deletes the row at the given index.
3.) var newCell = myRow.insertCell(index)
Inserts and returns a new empty cell (TD element) at the given index.
4.) myRow.deleteCell(index)
Deletes the cell at the given index.
All those methods normally throw an error if the index argument is out of range. However in some browsers like IE8 the index is optional and if it is omitted the cell or row will be inserted or removed at the end of its parent.
Your code isn't very clear but I think you will append the tr elements to table. But you can't append a tr directly to a table in ie. You need to create a tbody element first add this to table and append then your tr to the tbody element.

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

Categories