Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/09/2012, 13:43
noruas
 
Fecha de Ingreso: junio-2012
Mensajes: 80
Antigüedad: 12 años, 5 meses
Puntos: 11
Pregunta Script jquery y tabla con formulario

No se si este es el sitio adecuado para mi problema.

Tengo un Script jquery sacado de la pagina web 9lesson. Concretamente es el "Live Table Edit" que sirve para editar datos en la BD directamente desde la tabla web sin tener que ir al phpmyadmin o similares.

El script lo que hace es que al hacer clic en una fila sustitulle la fila de la tabla por un formulario, editas el texto y lo envia a la BD mediante ajax.

Hasta aqui todo correcto, mi problema es cuando he intentado que no se tenga que hacer clic sobre la fila si no sobre una celda, ya que si no la fila me queda un poco inutilizada a la hora de poner links...

No soy muy habil con el jscript y similares, a ver si me podeis hechar una mano.

Os pongo aqui parte del codigo de la web (la parte que implica a la tabla) y el script en cuestion.

Vease que para que esto funcione tal como esta la "clase" del tr ha de ser "edit_tr" y lo que busco es que la ultima celda (donde pone CLICK) sea el lugar donde haya que cliquear para activar el script.

Código PHP:
Ver original
  1. echo '
  2.             <tr class="edit_tr" id="'.$idCliente.'">
  3.                 <td class="edit_td">
  4.                     <span id="one_'.$idCliente.'" class="text">'.$idCliente.'</span>
  5.                     <input type="text" value="'.$idCliente.'" class="editbox" id="one_input_'.$idCliente.'" />
  6.                 </td>
  7.                     <td class="edit_td">
  8.                     <span id="two_'.$idCliente.'" class="text">'.$nombre.'</span>
  9.                     <input type="text" value="'.$nombre.'" class="editbox" id="two_input_'.$idCliente.'" />
  10.                 </td>
  11.                 <td class="edit_td">
  12.                     <span id="three_'.$idCliente.'" class="text">'.$apellidos.'</span>
  13.                     <input type="text" value="'.$apellidos.'" class="editbox" id="three_input_'.$idCliente.'" />
  14.                 </td>
  15.                 <td class="edit_td">
  16.                     <span id="four_'.$idCliente.'" class="text">'.$pais.'</span>
  17.                     <input type="text" value="'.$pais.'" class="editbox" id="four_input_'.$idCliente.'" /></td>
  18.                 <td class="edit_td">
  19.                     <span id="five_'.$idCliente.'" class="text">'.$telefono.'</span>
  20.                     <input type="text" value="'.$telefono.'" class="editbox" id="five_input_'.$idCliente.'" />
  21.                 </td>
  22.                 <td class="edit_td">
  23.                     <span id="six_'.$idCliente.'" class="text">'.$email.'</span>
  24.                     <input type="text" value="'.$email.'" class="editbox" id="six_input_'.$idCliente.'" />
  25.                 </td>
  26.                 <td>
  27.                     CLICK
  28.                 </td>
  29.             </tr>
  30.            ';

Aqui la parte del CSS que incplica al script:

Código CSS:
Ver original
  1. .editbox {
  2. display:none;
  3. }
  4. .editbox {
  5. background-color:#ffffcc;
  6. border:solid 1px #000;;
  7. }

Y aqui el Script:
Código Javascript:
Ver original
  1. $(document).ready(function()
  2. {
  3. $(".edit_tr").click(function()
  4. {
  5. var ID=$(this).attr('id');
  6. $("#one_"+ID).hide();
  7. $("#two_"+ID).hide();
  8. $("#three_"+ID).hide();
  9. $("#four_"+ID).hide();
  10. $("#five_"+ID).hide();
  11. $("#six_"+ID).hide();//New record
  12.  
  13. $("#one_input_"+ID).show();
  14. $("#two_input_"+ID).show();
  15. $("#three_input_"+ID).show();
  16. $("#four_input_"+ID).show();
  17. $("#five_input_"+ID).show();
  18. $("#six_input_"+ID).show();//New record
  19. }).live('change',function(e)
  20. {
  21.    
  22. var ID=$(this).attr('id');
  23. var one_val=$("#one_input_"+ID).val();
  24. var two_val=$("#two_input_"+ID).val();
  25. var three_val=$("#three_input_"+ID).val();
  26. var four_val=$("#four_input_"+ID).val();
  27. var five_val=$("#five_input_"+ID).val();
  28. var six_val=$("#six_input_"+ID).val();//New record
  29.  
  30. var dataString = 'id='+ ID +'&idCliente='+one_val+'&nombre='+two_val+'&apellidos='+three_val+'&pais='+
  31. four_val+'&telefono='+five_val+'&email='+six_val;
  32.  
  33.  
  34. if(one_val.length>0 && two_val.length>0 && three_val.length>0 && four_val.length>0 && five_val.length>0 && six_val.length>0)
  35. {
  36.  
  37. $.ajax({
  38. type: "POST",
  39. url: "../libs/table_edit_ajax_clientes.php",
  40. data: dataString,
  41. cache: false,
  42. success: function(e)
  43. {
  44.  
  45. $("#one_"+ID).html(one_val);
  46. $("#two_"+ID).html(two_val);
  47. $("#three_"+ID).html(three_val);
  48. $("#four_"+ID).html(four_val);
  49. $("#five_"+ID).html(five_val);
  50. $("#six_"+ID).html(six_val);//New record
  51. e.stopImmediatePropagation();
  52. }
  53. });
  54. }
  55. else
  56. {
  57. alert('Enter something.');
  58. }
  59.  
  60. });
  61.  
  62. // Edit input box click action
  63. $(".editbox").mouseup(function()
  64. {
  65. return false
  66. });
  67.  
  68. // Outside click action
  69. $(document).mouseup(function()
  70. {
  71. $(".editbox").hide();
  72. $(".text").show();
  73. });
  74.  
  75. });

Obiamente hay mas css, html, php y demas, pero creo que no influllen para nada aqui, pero si es necesario diganmelo y lo pongo tambien.

Saludos.