0

Mi conocimiento de JS es muy muy básico por eso es que estoy realizando esta consulta, tengo el siguiente bloque de código en PHP en el cual imprimo varios datos que vienen desde la base de datos.

    echo "<tr>";
 echo '<td>'.$titulo['post_title'].'</td>';
 print_r('<td>'.$estado['meta_value'].', '.$ciudad['meta_value'].', '.$direccion['meta_value'].'</td>');
 print_r('<td>'.$metros['meta_value'].' mts2</td>');
 print_r('<td>'.$precio['meta_value'].' ARS</td>');
 echo "<td><button type='button' value='$idPub2' class='btn btn-outline-info btn-sm' onclick='fnPublicar()'><span class='oi oi-check' title='Publicar'></span></button></td>";
echo "</tr>";

Ahora lo que necesito es tomar el value y la información de cada fila y pasarlo a un json. Actualmente me toma el valor del último value que se imprime (por los momentos tengo 3 registros en BD), este el JS que tengo:

<script type="text/javascript">
  function fnPublicar(){
    var idFnPublicar = '<?php echo $idPub2; ?>';
      console.log(idFnPublicar);
  }
</script>
4
  • 3
    falta ver la parte del código js para ver que llevas realizado hasta el momento, en tu pregunta hablas sobre el id del botón pero no veo que lo estés usando.
    – Andrés
    Commented el 2 ene. 2018 a las 14:07
  • 2
    ¿Cuál es la estructura del JSON que quieres obtener? ¿En qué evento quieres obtener? Recuerda que puedes editar tu pregunta
    – Davlio
    Commented el 2 ene. 2018 a las 14:16
  • @Andrés ya edité lo que tengo de JS, Quizás es que estoy formulando mal la pregunta. Es el value que necesito no el ID, disculpen. Commented el 2 ene. 2018 a las 14:49
  • @Davlio quiero que cuando presiones click sobre el botón, este obtenga todos los datos que imprimo en la fila y genere un JSON que posteriormente utilizaré utilizando curl en php. Commented el 2 ene. 2018 a las 14:50

2 respuestas 2

1

feliz año!, te voy a dejar un ejemplo de como lograr esto utilizando la librería JQuery, te recomiendo utilizarla es fácil de aprender.

Suponiendo que tu tabla tiene un id = "tabla" puedes hacer lo siguiente:

//Recorre las filas de la tabla
$('#tabla tr').each(function () {
   //Recorre las columnas de las filas
   $(this).children("td").each(function (index) {     
     //Pregunto que fila es y voy guardando los valores a diferentes variables
     switch (index) {       
      case 1:
       var columna1 = $(this).text();
      break;
      case 2:
       var columna2 = $(this).text();
       break;
      case 3:
       var columna3 = $(this).text();
       break;
     }
   }
}

Para obtener el valor del botón te recomiendo agregarle un id como te pongo aquí:

Obtienes el valor de la siguiente forma:

var valorBoton = $('#boton-ejemplo').val();

Saludos y espero te sirva.

1

Por medio de javaScript puro puedes hacerlo de la siguiente manera:

function fnPublicar(e) {
  var linea = e.parentElement.parentElement;
  var hijos = linea.getElementsByTagName("td");

  var datos = JSON.parse('{"titulo": "' + hijos[0].innerHTML + '" , "direccion": "' + hijos[1].innerHTML + '",    "metros": "' + hijos[2].innerHTML + '",    "coste": "' + hijos[3].innerHTML + '" }');

  console.log(datos);

}
<table>
  <tr>
    <td>El asilo del abuelo</td>
    <td>California, Venta</td>
    <td>300 mts2</td>
    <td>150000 EUR</td>
    <td><button type='button' value='$idPub2' class='btn btn-outline-info btn-sm' onclick='fnPublicar(this)'><span class='oi oi-check' title='Publicar'></span> click me</button></td>
  </tr>
  <tr>
    <td>El llano</td>
    <td>Tenerife, alquiler</td>
    <td>1500 mts2</td>
    <td>300 ARS</td>
    <td><button type='button' value='$idPub2' class='btn btn-outline-info btn-sm' onclick='fnPublicar(this)'><span class='oi oi-check' title='Publicar'></span> click me</button></td>
  </tr>
  <tr>
    <td>Vivienda familiar</td>
    <td>Madrid, Venta</td>
    <td>150 mts2</td>
    <td>50000 ARS</td>
    <td><button type='button' class='btn btn-outline-info btn-sm' onclick='fnPublicar(this)'><span class='oi oi-check' title='Publicar'></span> click me</button></td>
  </tr>
</table>

Por otro lado y pensando de la misma forma que Lucas Accastello el uso de jquery simplifica mucho el manejo de los elementos DOMs.

Aquí un ejempo:

$('.btn-outline-info').on('click', function (){
var datos;
var titulo, direccion, metros, coste;
 $(this).parent().siblings().each(function(index){
     switch (index) {       
          case 0:
            titulo = $(this).text();
          break;
          case 1:
            direccion = $(this).text();
           break;
          case 2:
            metros = $(this).text();
           break;
          case 3:
            coste = $(this).text();
         }
     
  });
  var datos = JSON.parse('{"titulo": "' + titulo + '" , "direccion": "' + direccion + '",    "metros": "' + metros + '",    "coste": "' + coste + '" }');

 console.log(datos)

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>El asilo del abuelo</td>
    <td>California, Venta</td>
    <td>300 mts2</td>
    <td>150000 EUR</td>
    <td><button type='button' value='$idPub2' class='btn btn-outline-info btn-sm'><span class='oi oi-check' title='Publicar'></span> click me</button></td>
  </tr>
  <tr>
    <td>El llano</td>
    <td>Tenerife, alquiler</td>
    <td>1500 mts2</td>
    <td>300 ARS</td>
    <td><button type='button' value='$idPub2' class='btn btn-outline-info btn-sm'><span class='oi oi-check' title='Publicar'></span> click me</button></td>
  </tr>
  <tr>
    <td>Vivienda familiar</td>
    <td>Madrid, Venta</td>
    <td>150 mts2</td>
    <td>50000 ARS</td>
    <td><button type='button' value='$idPub2' class='btn btn-outline-info btn-sm' ><span class='oi oi-check' title='Publicar'></span> click me</button></td>
  </tr>
</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.