Cambiar Contenido table con Ajax

Hola,
Necesito ayuda con modificar el contenido de una tabla mediante Ajax al pulsar un botón, expongo lo que tengo ahora mismo.
Tengo una tabla con esta estructura, en código HTML:
<table id="tabla_cambiacat" width="100%">
<tbody>
   <tr>...</tr>
   <tr>...</tr>
   <tr>...</tr>
</tbody>
</table>

Por otra parte, existe un botón, tal que asi: (La idea es que cada vez que lo puelses, cambie el contenido de la tabla)
<a href='javascript:cambiacat($datos);'> <img src='" . JURI::root() . "components/com_mio/assets/images/bt_dia.png' style = 'padding-top: 1px;' /img> </a>

Aquí el Script Ajax:
function cambiacat(){
var x = new Request({
url: "index.php?option=com_mio&viewid=$viewid&task=ajax_cambiacat&format=raw",
method: 'post',
data: { tab: datos},
onSuccess: function(responseText){      document.getElementById('tabla_cambiacat').innerHTML  = responseText;
            }
}).send();
}

Y por ultimo el código php que devolvería el nuevo contenido de la tabla: (No se muy bien como tiene que devolver los datos, si con un Return, o en un echo, o de que forma...)
function ajax_cambiacat(){

  echo ("prueba");

}

Entonces:
1)¿Se puede hacer? Supongo que si, pero como?
Como veis, le he puesto un ID a la tabla, pero me pierdo... no se como cambiarle el contenido.
2) Como tengo que devolver los datos desde la función Ajax_cambiacat??

3) ¿Algo mas a tener en cuenta?

Gracias y un saludo
Si puedes usar jQuery....usalo no lo dudes...es tu amigo.
MDman escribió:Si puedes usar jQuery....usalo no lo dudes...es tu amigo.

Puede usar MooTools que mas o menos es lo mismo, pero vaya xDD, a ver si podeis ser mas explicativos xD.

Gracias!
Algo simple seria devolver un JSON con una lista de filas que contenga una lista de columnas, algo como:
[[1, 2, 3], [4, 5, 6], [7, 8, 9]]


Ya luego en el JS lo recibes y vas agregando los elementos usando dos for anidados, uno para la lista de filas y el interno para la lista de columnas. Ya lo que queda es crear los <td> en el bucle interno, contatenar la lista de <td> y ponerlo dentro de un <tr> al salir del bucle interno, y cuando salgas del bucle externo agregas todos los <tr> generados a la tabla.
Venga, es cierto voy a intentar un ejemplo legible:

HTML
<table id="tabla_cambiacat">
  <tr>
    <td class="cell_0_0"></td>
    <td class="cell_0_1"></td>
    <td class="cell_0_2"></td>
  <tr>
  ...
</table>


PHP
function ajax_cambiacat(){

  echo json_encode(array(array("prueba", "pruebita", "probando")));

}


Javascript (jquery)
$.ajax({
  url: "index.php?option=com_mio&viewid=$viewid&task=ajax_cambiacat&format=raw",
  data: "",
  success: function (data)
  {
    $.each(data, function( i, row ) {
      $.each(row, function( j, cell ) {
            $("#tabla_cambiacat .cell_" + i + "_" + j).html(cell);
      }); 
    });
  },
  dataType: "json"
});


No lo he probado, puede que falle algo.
Vale, sirvió de ayuda, gracias!
5 respuestas