Deleting dynamically added rows.
Deleting dynamically added rows.
I am dynamically adding columns for an application I'm building:
var oTable;
$(document).ready(function() {
oTable = $('#quoteDisplay').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false } );
} );
function fnClickAddRow() {
oTable.fnAddData( [
"",
document.getElementById('qty').value,
document.getElementById('product').value,
document.getElementById('description').value,
(document.getElementById('qty').value * document.getElementById('price').value) ] );
}
-----
I have a delete icon on the right side of each row. I've figured out how to make it so it deletes the row when the icon is clicked but it only works on rows that haven't been dynamically created that session. Below is my code to delete:
function deleteTableRows() {
/* Get the position of the current data from the node */
var aPos = oTable.fnGetPosition( this );
aPosTwo = aPos.toString()
if(aPosTwo.substring(2,3) == 0) {
if (IsNumeric(aPosTwo.substring(0,1))) {
var applesauce = aPosTwo.substring(0,1)
oTable.fnDeleteRow( applesauce );
}
}
if(aPosTwo.substring(3,4) == 0) {
if (IsNumeric(aPosTwo.substring(0,2))) {
var applesauce = aPosTwo.substring(0,2)
oTable.fnDeleteRow( applesauce );
}
}
}
Is there a way to delete dynamically created rows?
var oTable;
$(document).ready(function() {
oTable = $('#quoteDisplay').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false } );
} );
function fnClickAddRow() {
oTable.fnAddData( [
"",
document.getElementById('qty').value,
document.getElementById('product').value,
document.getElementById('description').value,
(document.getElementById('qty').value * document.getElementById('price').value) ] );
}
-----
I have a delete icon on the right side of each row. I've figured out how to make it so it deletes the row when the icon is clicked but it only works on rows that haven't been dynamically created that session. Below is my code to delete:
function deleteTableRows() {
/* Get the position of the current data from the node */
var aPos = oTable.fnGetPosition( this );
aPosTwo = aPos.toString()
if(aPosTwo.substring(2,3) == 0) {
if (IsNumeric(aPosTwo.substring(0,1))) {
var applesauce = aPosTwo.substring(0,1)
oTable.fnDeleteRow( applesauce );
}
}
if(aPosTwo.substring(3,4) == 0) {
if (IsNumeric(aPosTwo.substring(0,2))) {
var applesauce = aPosTwo.substring(0,2)
oTable.fnDeleteRow( applesauce );
}
}
}
Is there a way to delete dynamically created rows?
This discussion has been closed.
Replies
Dynamically created rows should be able to be deleted just as any other row (there isn't anything special about them in DataTables). Looking at your deleteTableRows function, it looks a little bit complicated for what is needed I think (although I like the variable naming!). Try this one, which gets the TR node of interest and then removes it:
[code]
function deleteTableRows ()
{
var nTr = this;
while ( nTr )
{
if ( nTr.nodeName == "TR" )
break;
nTr = nTr.parentNode;
}
var iPos = oTable.fnGetPosition( nTr );
fnDeleteRow( iPos );
}
[/code]
Allan
PHP/HTML Code
[code]
<?php _e('List Name','shorten2list'); ?>
<?php _e('From Address','shorten2list'); ?>
<?php _e('To Address','shorten2list'); ?>
<?php _e('Triggers','shorten2list'); ?>
<?php
if(empty($emsg)) $s2l_maillists_for_user = s2l_get_lists_user($user_ID);
if(empty($s2l_maillists_for_user)) {
if($s2l_trap_maillists) {
$s2l_maillists_for_user = $s2l_trap_maillists;
}
} else {
$s2l_maillists_for_user[] = array( 'name' => '', 'from' => '', 'to' => '', 'triggers' => '' );
}
foreach ($s2l_maillists_for_user as $ml) {
// mlname[] - mlfrom[] - mlto[] - mltrigger[]
?>
<?php
}
?>
<?php _e('Click icon to add new maillist row', 'shorten2list'); ?>
[/code]
Javascript Code
[code]
var oTable;
$(document).ready(function() {
oTable = $('#maillists').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false } );
} );
/* Add a new row */
function fnClickAddRow() {
oTable.fnAddData( [
'',
'',
'',
'',
'',] );
}
/* Delete current row */
function deleteTableRows()
{
var nTr = this;
while ( nTr )
{
if ( nTr.nodeName == "TR" )
break;
nTr = nTr.parentNode;
}
var iPos = oTable.fnGetPosition( nTr );
fnDeleteRow( iPos );
}
[/code]
What am I doing wrong?
Thanks in advance for your kind help.
A few 'alert()'s or console.log()s would help here.
Allan
I'll go back to this tool of yours soon. I manage to solve the issue yesterday at 3am with the help of the guys/gals (we never know) at #jquery
The code that is working is rather simple and does not use some fancy stuff I would like to have but...
[code]
jQuery(document).ready(function () {
jQuery('#maillists td img.delete').click(function(){
jQuery(this).closest('tr').remove();
});
jQuery('#maillists img.addit').click(function(){
jQuery('#maillists tbody>tr:last').clone(true).insertAfter('#maillists tbody>tr:last');
});
});
[/code]
Also, I had a very stupid error in my HTML sintax. The tag is and not . Hours lost until someone point me this stupid error :(
Thanks anyway. Next version of my Spread Wordpress plugin will have for sure DataTables because it is much more complex than the current Shorten2PingNG and Shorten2List.
Best,
Lopo