mmmmm, imagina que tienes 2 ficheros:
- uno donde muestras la tabla y tienes el código jquery
- y otro donde haces la peticion ajax
el primer fichero seria el siguiente:
Código PHP:
<script language="javascript" type="text/javascript" src="../extras/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$( function () {
$("tr:odd").css("background-color", "#bbbbff");
$("img").toggle(
function () {
img = $(this);
ide = img.parents('tr').attr('id');
ide = ide.substr(3,1);
$.ajax({
url: 'contenido.php',
data: 'ide=' + ide,
type: 'post',
success: function(data){
fila = $('<tr class="nuevaTr"><td colspan="3">' + data + '</td></tr>');
img.parents('tr').after(fila);
}
})
},
function () {
$(this).parents('tr').next('tr').remove();
}
);
});
</script>
<style>
.nuevaTr{background-color:#ccc}
img{ cursor:pointer;}
</style>
Código HTML:
<table border="0">
<tr id="tr_1">
<td><img src="imagen.gif" height="20" width="20"></td>
<td>asd</td>
<td>asd</td>
</tr>
<tr id="tr_2">
<td><img src="imagen.gif" height="20" width="20"></td>
<td>asd</td>
<td>asd</td>
</tr>
<tr id="tr_3">
<td><img src="imagen.gif" height="20" width="20"></td>
<td>asd</td>
<td>asd</td>
</tr>
<tr id="tr_4">
<td><img src="imagen.gif" height="20" width="20"></td>
<td>asd</td>
<td>asd</td>
</tr>
<tr id="tr_5">
<td><img src="imagen.gif" height="20" width="20"></td>
<td>asd</td>
<td>asd</td>
</tr>
</table> y ahora el fichero que hace el proceso del contenido:
Código PHP:
Contenido del id: <?=$_POST['ide']?>
Si te das cuenta, lo que hago para diferencias cada fila es agregarle un id, osea un tr_5, tr_6, tr_6, etc, y obtengo el ide, otros suelen usar una columna, bueno, es cosa de gustos...