Como llamar funcion dentro de otra funcion con un parametro JS

publicado por: Anonymous

Tengo dos funciones javascript, una en donde agrego unas celdas a una tabla, y la otra que ocupo para eliminar una fila entera de esta tabla, lo que estoy tratando es llamar esta función de eliminar dentro de la otra función.

Script para eliminar la fila completa

function Remove(button) {
        //Determine the reference of the Row using the Button.
        var row = $(button).closest("TR");
        var name = $("TD", row).eq(0).html();

        //Delete the Table row using it's Index.
        table.deleteRow(row[0].rowIndex);

    };

Script en el que estoy tratando de llamar la función de eliminar

function Seleccionar() {
    var id = $("#selectlist").val()
    $.ajax({
        type: "GET",
        url: "/Pedido/GetProduct?Id=" + id,
        success: function (data) {
            var tBody = $("#example1 > TBODY")[0];
            var row = tBody.insertRow(-1);

            //Cantidad Input
            var cantidad = document.createElement('input')
            cantidad.type = 'number'
            cantidad.style.width = '170px'
            cantidad.style.height = '30px'
            cantidad.value= '1'
            cantidad.style.textAlign = "center"
            cantidad.className = 'form-control'

            //Opcion Eliminar
            var eliminar = document.createElement("img")
            eliminar.src = "../dist/img/eliminar.png"
            eliminar.style.width = '25px'
            eliminar.style.height = '25px'
            eliminar.onclick = function(){
                Remove();
                };

            //Add ID cell.
            var cell = $(row.insertCell(0));
            cell.html(data.id);
            //Add Nombre cell.
            cell = $(row.insertCell(1));
            cell.html(data.nombre);
            //Add Precio cell.
            cell = $(row.insertCell(2));
            cell.html(data.precio)
            //Add Cantidad cell
            cell = $(row.insertCell(3));
            cell.html(cantidad)

            //Add Eliminar cell
            cell = $(row.insertCell(4));
            cell.html(eliminar)


        }
    });
};

En esta parte es donde intento llamar la función para así poder agregarlo a una celda de la tabla

//Opcion Eliminar
var eliminar = document.createElement("img")
eliminar.src = "../dist/img/eliminar.png"
eliminar.style.width = '25px'
eliminar.style.height = '25px'
eliminar.onclick = function(){
     Remove();
   };

Adicional como podría hacer para cambiar la anchura de la celda que estoy ingresando a la tabla, y centrar su contenido.

//Add ID cell.
var cell = $(row.insertCell(0));
cell.html(data.id);
//Add Nombre cell.
cell = $(row.insertCell(1));
cell.html(data.nombre);
//Add Precio cell.
cell = $(row.insertCell(2));
cell.html(data.precio)
//Add Cantidad cell
cell = $(row.insertCell(3));
cell.html(cantidad)               
//Add Eliminar cell
cell = $(row.insertCell(4));
cell.html(eliminar)

solución

_x000D_

_x000D_

// JS Vanilla._x000D_
function Remove(button) { button.parentElement.parentElement.remove(); };_x000D_
//Opcion Eliminar (( ABSTRAIDO A UNA FUNCION PARA TENER UNA INSTANCIA UNICA ))_x000D_
function crearBotonEliminar () {_x000D_
  const eliminar = document.createElement("img");_x000D_
  eliminar.src = "../dist/img/eliminar.png";_x000D_
eliminar.style.width = '25px';_x000D_
eliminar.style.height = '25px';_x000D_
return eliminar;_x000D_
}_x000D_
   _x000D_
    // AL TOCAR LA IMAGEN SE LLAMA SELECCIONAR_x000D_
    function Seleccionar() {_x000D_
    var id = $("#selectlist").val();_x000D_
    // SIMULACION DE DATA RECIBIDA EN EL SUCCESS:_x000D_
    const data = {_x000D_
          id: 10,_x000D_
          precio: 2.12,_x000D_
          nombre: 'Pelota de Baloncesto'_x000D_
      };_x000D_
        _x000D_
            var tBody = $("#example1 > TBODY")[0];_x000D_
            var row = tBody.insertRow(-1);_x000D_
            _x000D_
             //Cantidad Input_x000D_
            var cantidad = document.createElement('input')_x000D_
            cantidad.type = 'number'_x000D_
            cantidad.style.width = '170px'_x000D_
            cantidad.style.height = '30px'_x000D_
            cantidad.value= '1'_x000D_
            cantidad.style.textAlign = "center"_x000D_
            cantidad.className = 'form-control'_x000D_
/*_x000D_
_x000D_
Funcion a parte.._x000D_
_x000D_
            //Opcion Eliminar_x000D_
            var eliminar = document.createElement("img")_x000D_
            eliminar.src = "../dist/img/eliminar.png"_x000D_
            eliminar.style.width = '25px'_x000D_
            eliminar.style.height = '25px'_x000D_
            eliminar.onclick = function(){_x000D_
                Remove();_x000D_
                };_x000D_
*/_x000D_
            //Add ID cell._x000D_
            var cell = $(row.insertCell(0));_x000D_
            cell.html(data.id);_x000D_
            //Add Nombre cell._x000D_
            cell = $(row.insertCell(1));_x000D_
            cell.html(data.nombre);_x000D_
            //Add Precio cell._x000D_
            cell = $(row.insertCell(2));_x000D_
            cell.html(data.precio);_x000D_
            //Add Cantidad cell_x000D_
            cell = $(row.insertCell(3));_x000D_
            cell.html(cantidad);_x000D_
            //Add Eliminar cell_x000D_
            cell = $(row.insertCell(4));_x000D_
            //Obtener eliminar_x000D_
            eliminar = crearBotonEliminar();_x000D_
            cell.html(eliminar);_x000D_
            _x000D_
            //Despues de mostrar-lo en el HTML_x000D_
            eliminar.onclick = function(){_x000D_
              Remove(this);_x000D_
            };_x000D_
};

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<table id="example1">_x000D_
<thead>_x000D_
  <tr>_x000D_
    <th>_x000D_
      <!-- Iria en tú #seleccionar x item -->_x000D_
      <button onclick="Seleccionar()"></button>_x000D_
    </th>_x000D_
   </tr>  _x000D_
</thead>_x000D_
<tbody>_x000D_
_x000D_
<!-- Cargado desde Javascript -->_x000D_
_x000D_
</tbody>_x000D_
</table>

_x000D_

_x000D_

_x000D_

Cambios, como hacer la celda del botón más ancha y centrar el elemento.

Para la imagen,

Quitar estás dos líneas :

eliminar.style.width = '25px';
eliminar.style.height = '25px';

Añadir hoja de estilos, css :

img {
  max-width: 100%;
  height: auto;
  width: 30px;
}

también puedes remplazar-lo por JavaScript:

eliminar.style.minWidth = "100%";
eliminar.style.width = "30px";
eliminar.style.height = "auto";

Para la tabla :

Añadir un 100% de width,

<table id="example1" width="100%">

En el success, sobre la celda, la última :

$(cell).css({"width":"40%","text-align":"center"});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published.