使用ajax发送rowID并将选定的行追加到新表

Question

Currently trying to take a row with a specific ID number and, if the row is checked, allow the user to click a button and append these specific rows to a new table in order to do comparisons, etc. The rows are all generated in a table using php and my code is only about half complete but I'm not sure where to go from here.

Here is my current jquery:

   $(function(){
      var rows = [];
      $('compareRowButton').click(function(){
      $('.compareRow:checked').each(function(){
        var ele_id = $(this).attr('id');
        $.ajax({
          type : 'post',
          url : 'compare.php', //query 
          data :  'post_id='+ ele_id, // passing id via ajax

          success : function(data){
            rows.push(data);
          }
        });
      });
      $('.displayTable').click(function(){
        // append to table or divs
      });
    });
  });
});

and here is what I have in compare.php:

<?php
include_once('functions.php');
include_once('link_costreport_2013.php');
sec_session_start();
if(isset($_POST['post_id'])){
    $id = $_POST['post_id'];
}
    $query = $link->prepare("SELECT * 
                            FROM `s10`
                            WHERE `id` = :id");
    $query->bindParam(':id', $id, PDO::PARAM_INT);
    $query->execute();
    $results = $query->fetch();
    ?>

I'll admit I had some help with the jquery/ajax so my understanding of how it works is lacking a little, but a few things I don't understand fundamentally are:

1. How can I turn my fetched results into the 'data' parameter that gets pushed into the 'rows' array. I'm guessing this is on the PHP side.
2. How do I parse the 'data' and have it display in my table in <td></td> elements under the right headers and such? The ID is obviously just one part of the entire query but there are about 6-7 columns worth of data for each ID.

At the end I'm just trying to display the new table with the selected rows and hide the old one.

If I can provide any additional information I'd be glad to, wasn't sure what else to include.

Thanks in advance

::EDIT::

while ($results = $query->fetch()) {
                $id = $results['id'];
                $rowID = $results['id'];
                if($results['301_cost_of_uncomp_care'] != 0){
                $charityPortion = ($results['233_net_charity_care'] / $results['301_cost_of_uncomp_care']);
                $baddebtPortion = ($results['291_cost_of_non_mcr_bad_debts'] / $results['301_cost_of_uncomp_care']);
                } else {
                    $charityPortion = 0;
                    $baddebtPortion = 0;
                }
                echo "<tr id='$rowID'>";
                echo "<td></td>";
                echo "<td><input type='checkbox' id='$id' value='$id' class='compareCheck' name='post_id[]'></input></td>";
                echo "<td>".$results['provider_num'];
                echo "</td>";
                echo "<td><a id='$id' data-toggle='modal' href='#provmodal' class='push'>".$results['provider_name']."</a>";
                echo "</td>";
                echo "<td $style>\$".number_format($results['233_net_charity_care']);
                echo "</td>";
                echo "<td $style>\$".number_format($results['291_cost_of_non_mcr_bad_debts']);
                echo "</td>";
                echo "<td $style>\$".number_format($results['301_cost_of_uncomp_care']);
                echo "</td>";
                echo "<td $style>".sprintf("%.1f%%", $charityPortion * 100);
                echo "</td>";
                echo "<td $style>".sprintf("%.1f%%", $baddebtPortion * 100);
                echo "</td>";
                echo "</tr>";
                }
                ?>

This is how the final fields are calculated. Is it possible to call modify the formatting like so in the script?

Answer 1

Use json_encode() on the PHP side to encode the fetched results:

$results = $query->fetch(PDO::FETCH_NUM);
echo json_encode($results);

Then to display the results, turn the JSON array into a row of the table.

$.ajax({
    type : 'post',
    url : 'compare.php', //query 
    data :  'post_id='+ ele_id, // passing id via ajax
    dataType: "json",
    success : function(data){
        var row = "<tr>";
        $.each(data, function(i, val) {
            row += "<td>" + val + "</td>";
        });
        row += "</tr>";
        $("#tableID").append(row);
      }
    });

If you only want to display selected columns, have PHP return an associative array:

$results = $query->fetch(PDO::FETCH_ASSOC);
echo json_encode($results);

and extract the columns you want:

$.ajax({
    type : 'post',
    url : 'compare.php', //query 
    data :  'post_id='+ ele_id, // passing id via ajax
    dataType: "json",
    success : function(data){
        var row = "<tr>";
        row += "<td>" + data.id + "</td>";
        row += "<td>" + data.provider_num + "</td>";
        row += "<td>" + data['291_cost_of_non_mcr_bad_debts'] + "</td>";
        row += "</tr>";
        $("#tableID").append(row);
      }
    });