Using Ajax/JQuery to replace content in custom module in Drupal 6

I am relatively new to creating custom modules in Drupal 6. What I have is a page that displays some forms and a table. I am trying to implement a method to allow the user to enter data into the forms, click submit, and create a method to get data and display it asynchronously. I kind of have it working but a) wanted to know if this is the best method and b) I need help with the last part.

Here is what I have:

my_module.module:

    function my_module_menu(){
       ...
       $items['my_module/cases/viewer'] = array(
        'title' => "View stuff",
        'page callback' => "my_module_viewer_info",
        'access callback' => true,
        'type' => MENU_NORMAL_ITEM,
        'file' => 'my_module_viewer.views.inc',
        'weight' => 3
       );
       $items['my_module/cases/filter_search/%'] = array(
        'page callback' => 'my_module_filter',
        'access arguments' => array('access my_module via ajax'),
        'type' => MENU_CALLBACK,
        'access callback' => true,
        'file' => 'my_module_cases.views.inc',
        'page arguments' => array(3),

       );
     }

  function my_module_filter($startPos){
    try{
        $output = ajax_get_cases($startPos);
        print ($output);

    }catch(Exception $e){
        //do stuff
    }
  }

function my_module_cases_info($startAt){
    try{
       $output = my_module_list_viewer($startAt);
       drupal_set_title('View Cases');
       return $output;

    }catch(Exception $e){
        //do stuff
    }
}

    //this is the page that intially gets displayed
   function my_module_list_viewer($startAt){
    try{

        $cases = //call function to get data for table

        $table_header = array(
            // Column 1
            array('data' => t('ID'), 'field' => 'id', 'sort' => 'asc'),
            array('data' => t('Title'), 'field' => 'title'),
            array('data' => t('Summary')),                
        );


        $table = "
            <table>
                <tr>
                    <td style='padding-top: 10px; padding-bottom: 10px;'>
                        Filter 1:
                    </td>
                    <td style='padding-top: 10px; padding-bottom: 10px;'>
                        <input type = 'text' name = 'my_module_filter1' id = 'my_module_filter1' >
                    </td>
                    <td style='padding-top: 10px; padding-bottom: 10px;'>
                       Filter 2                        
                    </td>
                    <td style='padding-top: 10px; padding-bottom: 10px;'>
                        <input type = 'text' name = 'jmy_module_filter2' id = 'jmy_module_filter2' >
                    </td>
                </tr>                    
                <tr>
                    <td colspan='3'>
                        <button type='button'   id='btn_search' name = 'btn_search'>Filter Search</button>
                    </td>
                </tr>
            </table>

        ";

        $table .= theme('table', $table_header, $cases, array(
            'id'      => 'table-myCases',
            'class'   => 'myCases',
        ));

        return $table;
    }catch(Exception $e){
        //do stuff
    }


}

my jquery:

Drupal.behaviors.my_module = function(context) {
  if (Drupal.jsEnabled) {
    $("#btn_search").click(function () {
        try {
            var filter1= $('#my_module_filter1').val();
            var filter2= $('#my_module_filter2').val();

            var that = this;

            var data = {
                "filter1": filter1,
                "filter2": filter2,                    
            };
            data = $(this).serialize() + "&" + $.param(data);

            $.ajax({
                type: 'POST',
                url: Drupal.settings.basePath + 'my_module/cases/filter_search/0',
                data: data,
                success: function(data){
                    //replace contents of table with data here
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert(textStatus + errorThrown); //Better diagnostics
                }

            });
            return false;


        } catch (e) {
            throw e;
        }

    });


  }
}

And the function that the ajax function calls:

   function ajax_get_cases($startAt){
    try{            
        $table_header = array(
            // Column 1
            array('data' => t('ID'), 'field' => 'id', 'sort' => 'asc'),
            array('data' => t('Title'), 'field' => 'title'),
            array('data' => t('Summary')),         
       );

        $cases = //call function to get data

        $table = theme('table', $table_header, $cases, array(
            'id'      => 'table-MyCases',
            'class'   => 'MyCases',
        ));

        return $table;

    }catch(Exception $e){
        throw $e;
    }
}

So, this all essentially works. the ajax request will get all the HTML markup for the new table. My question, though, is how do I replace the content of the original table with the new markup? the data variable has all the new markup but if I try to use "this" or "that" keywords to get the content of the entire page, to do a find and replace, the this context is not valid and that cant be recognized. Is there a better way to do this?

Thanks