0

Tengo mi tabla con la información, pero necesito seleccionar una fila y guardar información en un textbox alguna guía de como hacerlo.

<!-- Modal Escenario-->
        <div class="modal fade" id="popupBusquedaCliente" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Cerrar</span></button>
                        <h4 class="modal-title" id="myModalLabel">Busqueda de Categorias</h4>
                    </div>
                    <div id="BusquedaCliente" class="modal-body">
                        <form role="form">
                            <div class="form-group">
                                <label for="stock_bodega">Busqueda por:</label>
                                <select class="form-control" style="width: 40%" id="stock_bodega">
                                    <option>C&oacute;digo</option>
                                    <option>Nombre</option>
                                    <option>Estado</option>
                                </select>
                                <label for="texto_buscar">Texto a Buscar:</label>
                                <input type="text" class="form-control" id="texto_buscar">
                            </div>

                            <div style="position: relative; overflow: auto; width: 100%; height: 200px;" class="dataTables_scrollBody">
                                <table style="width: 100%;" id="busqueda_cliente" class="display nowrap dataTable no-footer" cellspacing="0" width="100">
                                    <thead>
                                        <tr>
                                            <th>Codigo</th>
                                            <th>Nombre</th>
                                            <th>Estado</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </form>
                    </div>
                    @* Load datatable css *@
                    <link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
                    @* Load datatable js *@
                    @section Scripts{
                        <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
                        <script>
                            $(document).ready(function () {
                                $('#busqueda_cliente').DataTable({
                                    "bSort": false,
                                    "ajax": {
                                        "url": "/venmancategoria/Todos",
                                        "type": "GET",
                                        "datatype": "json"
                                    },
                                    "columns": [
                                            { "data": "Codigo" },
                                            { "data": "Nombre" },
                                            { "data": "Estado" }
                                    ],
                                    filter: false,
                                    "paging":   false,
                                    "ordering": false,
                                    "info":     false,
                                    language: {
                                        paginate: {
                                            first: "Primero",
                                            previous: "Anterior",
                                            next: "Siguiente",
                                            last: "Ultimo"
                                        }
                                    }
                                });
                            });
                        </script>
                    }
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">Seleccionar</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>  <!-- Modal Escenario-->

1 respuesta 1

2

Se me ocurre esta solución, espero sea lo que necesitas, saludos.

$("#tabla").on('click', 'tr', function(e) {
  e.preventDefault();
  var renglon = $(this);
  var campo1, campo2, campo3;
  $(this).children("td").each(function(i) {
    switch (i) {
      case 0:
        campo1 = $(this).text();
        break;
      case 1:
        campo2 = $(this).text();
        break;
    }
    $(this).css("background-color", "#ECF8E0");
  })
  var textoRenglon = campo1 + ' - ' + campo2
  //console.log(textoRenglon);
  $("#text").val(textoRenglon);
  //alert(renglon);
});

$("#tabla2").on('click', 'td', function(e) {
  e.preventDefault();
  var campo = $(this).text();
  //Cambiando de color la celda
  $(this).css("background-color", "#ECF8E0");
  //console.log(campo);
  $("#text2").val(campo);
  //alert(renglon);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Pasar todo el row a un text </h1>
<table border="1" id="tabla">
  <tr>
    <td>1</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Pedro</td>
  </tr>
</table>
<input id="text" type="text" value='' />

<br/>

<h1>Pasar solo la celda seleccionada </h1>
<table border="1" id="tabla2">
  <tr>
    <td>3</td>
    <td>Maria</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Juana</td>
  </tr>
</table>
<input id="text2" type="text" value='' />


<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

7
  • En si me funciona pero solo me obtine el valor de la primera columna sera que falta algo mas. Commented el 13 dic. 2016 a las 14:01
  • ¿Podrías añadir el código con que estas pasando la fila al textbox? Commented el 13 dic. 2016 a las 17:33
  • $("#txt_codigo").val(campo1); $("txt_nombre").val(campo2); $("txt_codigoCat").val(campo3); $("#txt_categoria_detalle").val(campo4); solo agregue mas opciones al case y comente esta linea de tu codigo var textoRenglon = campo1 + ' - ' + campo2 Commented el 13 dic. 2016 a las 19:06
  • Mira, te falta: $("#txt_nombre").val(campo2); $("#txt_codigoCat").val(campo3); // Agregarle el signo de # Commented el 13 dic. 2016 a las 20:25
  • 1
    si me funciono bien muchas gracias Cristina Commented el 14 dic. 2016 a las 14:52

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.