1

¿Cómo obtener el valor de un input text que esta incluido en un td mediante JQuery?

<table class="table table-bordered" id="tabla">
            <thead>
                <th>#</th>
                <th>Requisito</th>
                <th>Fecha completado</th>
                <th>Completado</th>
                <th>Observacion</th>
            </thead>
            <tbody id="t_cuerpo">
                <tr>
                    <td>1</td>
                    <td>Ceremonia de bienvenida</td>
                    <td><input type="text" id="fecha" class="form-control"></td>
                    <td><select name="" id="estado" class="form-control">
                        <option value="si">si</option>
                        <option value="no">no</option>
                    </select></td>
                    <td><textarea name="" id="obs" cols="20" rows="2" class="form-control"></textarea></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Sermon nocturno</td>
                    <td><input type="text" id="fecha" class="form-control"></td>
                    <td><select name="" id="estado" class="form-control">
                        <option value="si">si</option>
                        <option value="no">no</option>
                    </select></td>
                    <td><textarea name="" id="obs" cols="20" rows="2" class="form-control"></textarea></td>
                </tr>
            </tbody>
        </table>
        <div id="mostrar"></div>
        <button type="button" id="obtener">Obtener</button>

El codigo javascript

$(document).ready(function () {
    crearDatos();
});

function crearDatos() {
    var listaRequisitos = [];
    $('#t_cuerpo tr').each(function () {
        listaRequisitos.push(
            {   id: $(this).find('td').eq(0).html(),
                descri: $(this).find('td').eq(1).html(),
                fecha: $(this).find('td').eq(2).html(),
                estado: $(this).find('td').eq(3).html()
            }        
        );
    });

    jsonRequisitos = JSON.stringify(listaRequisitos);

    $('#obtener').click(function () {
        $('#mostrar').html(jsonRequisitos);    
    });

}

Cuando intento acceder al input text, obtengo el elemento en sí mas no el valor del elemento, que en este caso sería el input con id=fecha

2 respuestas 2

1

El problema es que estás llamando al código HTML para tu input y tu select. Lo que deberías estar haciendo es seguir buscando por cada uno de ellos respectivamente y obtener sus valores a través de val():

function crearDatos() {
  var listaRequisitos = [];
  $("#t_cuerpo tr").each(function(index, elem){
    listaRequisitos.push({
      id: $(this).find('td').eq(0).html(),
      descri: $(this).find('td').eq(1).html(),
      fecha: $(this).find('td').eq(2).find('input').val(),
      estado: $(this).find('td').eq(3).find('select').val()
    });
  });
  console.log(listaRequisitos);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-bordered" id="tabla">
  <thead>
      <th>#</th>
      <th>Requisito</th>
      <th>Fecha completado</th>
      <th>Completado</th>
      <th>Observacion</th>
  </thead>
  <tbody id="t_cuerpo">
      <tr>
          <td>1</td>
          <td>Ceremonia de bienvenida</td>
          <td><input type="text" id="fecha" class="form-control"></td>
          <td><select name="" id="estado" class="form-control">
              <option value="si">si</option>
              <option value="no">no</option>
          </select></td>
          <td><textarea name="" id="obs" cols="20" rows="2" class="form-control"></textarea></td>
      </tr>
      <tr>
          <td>2</td>
          <td>Sermon nocturno</td>
          <td><input type="text" id="fecha" class="form-control"></td>
          <td><select name="" id="estado" class="form-control">
              <option value="si">si</option>
              <option value="no">no</option>
          </select></td>
          <td><textarea name="" id="obs" cols="20" rows="2" class="form-control"></textarea></td>
      </tr>
  </tbody>
</table>
<button type="button" id="obtener" onclick="crearDatos();">Obtener</button>

1
  • Increíblemente me faltó poner en la función anónima el index, elem. Muchas gracias el 11 jul. 2018 a las 22:39
0

Una de las formas es especificando, que quieres obtener con jquery , solo le indicas el id del lugar que quieres trabajar en este caso es el id t_cuerpo y luego le especificas que quieres obtener como el ejemplo que te dejo

$(document).ready(function() {

  $('#obtener').click(function() {
    $('#t_cuerpo input, select, textarea').each(function() {
      var valor_input = $(this).val();
      console.log(valor_input);
    });
  });
});
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<table class="table table-bordered" id="tabla">
  <thead>
    <th>#</th>
    <th>Requisito</th>
    <th>Fecha completado</th>
    <th>Completado</th>
    <th>Observacion</th>
  </thead>
  <tbody id="t_cuerpo">
    <tr>
      <td>1</td>
      <td>Ceremonia de bienvenida</td>
      <td><input type="text" id="fecha" class="form-control"></td>
      <td>
        <select name="" id="estado" class="form-control">
          <option value="si">si</option>
          <option value="no">no</option>
        </select>
      </td>
      <td><textarea name="" id="obs" cols="20" rows="2" class="form-control"></textarea></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Sermon nocturno</td>
      <td><input type="text" id="fecha" class="form-control"></td>
      <td>
        <select name="" id="estado" class="form-control">
          <option value="si">si</option>
          <option value="no">no</option>
        </select>
      </td>
      <td><textarea name="" id="obs" cols="20" rows="2" class="form-control"></textarea></td>
    </tr>
  </tbody>
</table>
<div id="mostrar"></div>
<button type="button" id="obtener">Obtener</button>

Esto hace que puedas obtener los datos en el orden que están en las tablas. Saludos.

PD: si quiere solo obtener input , solo borra select y textarea

1

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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