Question

I have a form that adds rows to a table upon submit:

<form id="scan_form" name="scan_form" method="post" action="/cgi-bin/app/app.pl" onsubmit="return checkout('f00b@r');">

Sidenote
Want to add/append to submit function as follows without “disturbing” its existing functionality:

$("#scan_form").submit(function() {
    //clone row and add to hidden table.
});

When it adds a row, I’d like it to add that same row to a different hidden table for printing.

I’m thinking I need to somehow bind a function to the table that adds this same row to a different table but am stuck. Using the below SO question as a template, how do I capture this newest row?

Listen for added table rows

$('#table_id').bind('rowAddOrRemove', function(event){
    //do what you want.
});

The table is sorted alphabetically, so the newest row won’t necessarily be the last row.

UPDATE
Trying this idea:

Step 1: Set id of all existing rows to ‘oldRow’

$( '#loanTable tr' ).attr("id", "oldRow");

Step 2: Clone table above:

var lbl = $("#loanTable tbody");
var newLbl = $(lbl[0].outerHTML);

Step 3: Delete rows with id ‘oldRow’

$(".oldRow", newLbl).remove();

As you surmised, it deleted everything. How do I connect these dots?

UPDATE 2
How do I do the following?

$('#table_id').bind('rowAddOrRemove', function(event){
        //add attribute print to 'this' row.
});

Want to label new rows added to table.

Answer 1

You could try to create new rows with some class, say ‘.newRow’, that on event you should remove this class to be prepared for the next insert:

$('#table_id .newRow').trigger('rowAddOrRemove');

$('#table_id').bind('rowAddOrRemove', function(event){
   //do what you want.
   $(this).removeClass('.newRow');
});