JQuery - jQuery y datatable

   
Vista:

jQuery y datatable

Publicado por juank (11 intervenciones) el 01/11/2017 06:49:16
Hola qué tal comunidad busco sabiduría de su parte con esta duda que tengo...

Tengo un datatable dinámico con dos campos

<Tr>
<Th>Nombre</Th>
</Tr>
<Tbody>
<Tr>
<Td class="edición">Juan</td>
</Tr>

Bien así voy llenando mi datatable de manera dinámica...mi datatable tiene más columnas okey y en este caso la clase sigue siendo edición..

Ahora fijence yo quiero que cuando haga clic en cualquier fila del datatable automáticamente aparezca un input de tipo texto, pueda escribir sobre el input y al precionar Enter el valor que escribí en el input quede en la celda del <td>

En jQuery hice algo como esto.

$(".edicion").parent(tr).find(td).click(functión(){
$(this).HTML()
});

Con eso puedo lograr tener el valor de la fila y columna que yo haga clic.

Allí está todo perfecto...pero ahora por más que le meto al coco no logro hacer lo siguiente, si yo le meto dentro de esa función esto:

$(this).HTML('<input type="text" value="">');

Efectivamente logro que aparezca un input pero cuando le hago clic no mantiene el foco y no puedo escribir en el...

Quisiera que me puedan orientar un poco para luego poder hacer lo que les dije después de que lo logré lo que quiero es que al escribir y presionar enter el td quedé con el nuevo valor escrito en el input.

Que estoy haciendo mal? Gracias de antemano.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

jQuery y datatable

Publicado por Horroroso (56 intervenciones) el 01/11/2017 17:47:55
Hola, espero esto te sirva,
Primero debes tener tu tabla algo como esto:
1
2
3
4
5
6
7
8
9
10
11
12
<table>
    <thead>
        <tr>
            <th>Nombre</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="edicion">Juan</td>
        </tr>
    </tbody>
</table>

La clase "edicion", se va a colocar en cualquier td que necesites editar.
Ahora, te muestro como hacer para que al darle click, se pueda editar la celda, y al perder el foco, el td quede con el nuevo valor:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("td.edicion").on("click", function () {
    var $this = $(this);
    var Value = $this.text();
    var $input = $('<input type="text" value="' + Value + '"/>');
 
    $input.on("blur", function () {
        var text = $input.val();
        $input.remove();
        $this.text(text);
    })
        .on("click", function (e) { e.stopPropagation() });
    $this.html("").append($input);
    $input.focus();
});

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

jQuery y datatable

Publicado por jose angarita (11 intervenciones) el 01/11/2017 19:14:22
Hola amigo muchas gracias por responder me has aclarado un millon de dudas que tenia en base a este tema con los datatbles dinamicos...

Si no te molesta quisiera hacerte unas preguntas en este momento, aun no termino lo que quiero hacer con este datatable pero quiero seguir trabajando y se me nace una duda nueva quiero preguntartela...

He entendido todo el codigo que has puesto y en verdad te lo agradezco pero quiero enteder la ultima parte del codigo:

1
2
3
4
5
.on("click", function (e) { e.stopPropagation() });
 
$this.html("").append($input);
 
$input.focus();

me confunde el hecho de que ese fragmento forma parte de:

1
$("td.edicion").on("click", function () {

Bueno la pregunta es....¿forma parte del fragmento inicial?:

1
$("td.edicion").on("click", function () {

o forma parte de:

1
$input.on("blur", function () {

Podrias explicarme como se logra la existencia de dos veces el evento on.("click")???
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

jQuery y datatable

Publicado por Horroroso (56 intervenciones) el 01/11/2017 20:58:48
Hola, que bueno que pude ayudarte,

el .on forma parte del $input

es una forma corta de continuar, igual se puede substituir por:

1
2
3
4
5
6
7
$input.on("blur", function () {
    var text = $input.val();
    $input.remove();
    $this.text(text);
});
 
$input.on("click", function (e) { e.stopPropagation() });

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

jQuery y datatable

Publicado por Jose Angarita (11 intervenciones) el 01/11/2017 21:35:17
Perfecto si eso estaba viendo....por lo que puedo entender ese stopPropagation es una forma de controlar el evento. Muchas gracias por tu ayuda.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad