What would be the best way to perform a basic CRUD using AJAX

I'm having trouble to make a simple CRUD in my site.

I have a table of registries

<table>   
    <tbody>  
        <?php foreach ($row as $reg) { ?>  
            <tr <?php if ($reg['value'] < 0) { echo "class='error'"; } ?>>  
                <td><?php echo $reg['creditor'] ?></td>  
                <td><?php echo $reg['debtor'] ?></td>  
                <td><?php echo $reg['reason'] ?></td>  
开发者_如何学运维                <td>R$ <?php echo number_format(abs($reg['value']), 2, ',', ' ')?></td>  
                <td><a **href="<?php echo $this->baseUrl(); ?>/history/delete/id/<?php echo $reg['id']; ?>"** class="delete"><img src="http://192.168.0.102/libraries/css/blueprint/plugins/buttons/icons/cross.png" alt=""/></a></td>  
            </tr>  
        <?php } ?>  
    </tbody>  
</table>

which I would like to perform a simple delete in these rows using AJAX (preferenciably with jQuery). The question is: do I have to create a function in JS and add onmouseclick event in the HTML? is there a more consistent way for doing this, like adding $('.delete').click() directly in the js file? If so, how do I pass the row ID for the ajax function?

What I really want is to know how to pass the row ID to $.ajax() jQuery function through a clean! way

Additionally

How would look like the AJAX code to history\delete\id\ROW_ID using $.ajax() jQuery function. I just would like to delete the row and fade and remove it from the table.

I tried but could work it out

$('.delete')
        .click(function() {
        $.ajax({
            type: 'GET',
            url: 'history/delete/',
            data: 'id/'+$(this).attr('id'),
            success: function() {
            $(this).fadeOut();
            $(this).remove();
            }
        });
        return false;
        });

---

In the view :

...
<td><a **href="<?php echo $this->baseUrl(); ?>/history/delete/id/<?php echo $reg['id']; ?>"** class="delete" id="<?php echo $reg['id'] ?>"><img src="http://192.168.0.102/libraries/css/blueprint/plugins/buttons/icons/cross.png" alt=""/></a></td>
...

In the js :

$('.delete').click(function()
{
  var rowid = $(this).attr('id') ;
  // ... then make your ajax call...
});