2

El problema que tengo es que tengo una tabla en HTML de la siguiente manera

<!-- TABLA DETALLES PRODUCTOS -->
<div class="col-md-12">
<table id="TableProducts" class="table table-bordered table-responsive">
<thead>
<tr class="active">
<td><strong>ID Producto</strong></td>
<td><strong>Nombre Producto</strong></td>
<td><strong>Caracteristicas</strong></td>
<td><strong>Muestras</strong></td>
<td><strong>Cantidad</strong></td>
<td><strong>Precio</strong></td>
<td><strong>Descuento</strong></td>
<td><strong>IVA</strong></td>
<td><strong>Retención IVA</strong></td>
<td><strong>Total</strong></td>
<td><strong></strong></td>
</tr>
</thead>
<tbody>

</tbody>
</table>
</div>
<!-- FIN TABLA DETALLES PRODUCTOS -->

Yo agrego dentro del div una fila, de la siguiente manera con jquery

var fila = "<td>" + $.trim(idProduct) + "</td>";
fila += "<tr><td>" + $.trim(response.d.nombreProducto) + "</td>";
fila += '<td onclick="OpenModal(\'' + $.trim(idProduct) + '\', \'' + precio + '\');">XXXX XXXX XXXX XXXX</td>';
fila += "<td><center><input type='radio'></center></td>";
fila += "<td><a id='tableccant'>1</a></td>";
fila += "<td><a id='tablecprice'>0</a></td>";
fila += "<td><a id='tablecdescc'>0</a></td>";
fila += "<td>IVA</td>";
fila += "<td>RIVA</td>";
fila += "<td>TOTAL</td>";
fila += "<td><a class='text-danger delete'><span class='glyphicon glyphicon-remove'></span></a></td></tr>";
var ElementoHTML = $(fila);
$('#TableProducts').append(ElementoHTML);

Después de eso tengo una linea en donde mando llamar un método en donde aplico el plugin de editable de bootstrap de la siguiente manera

//Se puede editar la tabla de dos maneras gracias al plugin
//La primera es por medio de popo up y la otra es por inline

$.fn.editable.defaults.mode = "inline";

// Sección productos
$("#tableccant").editable();
$("#tablecprice").editable();
$("#tablecdescc").editable();

Mi problema es que cuando agrego la primera fila, me funciona de maravilla, pero cuando agrego mas filas no me aplica el plugin, alguien sabe a cual podría ser el problema

2 respuestas 2

1

El problema esta en los id ya que estos deben ser Únicos en todo el DOM, de no ser así, Javascript solo toma el primero.

Ahora si quieres que funcione en todos los elementos utiliza clases, de tal manera que tu código quedaría así:

var fila = "<td>" + $.trim(idProduct) + "</td>";
fila += "<tr><td>" + $.trim(response.d.nombreProducto) + "</td>";
fila += '<td onclick="OpenModal(\'' + $.trim(idProduct) + '\', \'' + precio + '\');">XXXX XXXX XXXX XXXX</td>';
fila += "<td><center><input type='radio'></center></td>";
fila += "<td><a class='tableccant'>1</a></td>";
fila += "<td><a class='tablecprice'>0</a></td>";
fila += "<td><a class='tablecdescc'>0</a></td>";
fila += "<td>IVA</td>";
fila += "<td>RIVA</td>";
fila += "<td>TOTAL</td>";
fila += "<td><a class='text-danger delete'><span class='glyphicon glyphicon-remove'></span></a></td></tr>";
var ElementoHTML = $(fila);
$('#TableProducts').append(ElementoHTML);

y en javascript dejarías lo siguiente:

$(".tableccant").editable();
$(".tablecprice").editable();
$(".tablecdescc").editable();

Pero puede surgir un problema debido a tu contenido dinámico por lo que yo lo dejaría de esta forma:

$("table").find(".tableccant").editable();
$("table").find(".tablecprice").editable();
$("table").find(".tablecdescc").editable();
1
  • Gracias JuankGlezz tu explicación me sirvió de maravilla, ya que me ayudo a encontrar una solución, ademas de entender que el problema era el uso de el mismo id
    – Miguel
    Commented el 18 jul. 2017 a las 14:52
1

Cuando generas este html:

fila += "<td><a id='tableccant'>1</a></td>";
fila += "<td><a id='tablecprice'>0</a></td>";
fila += "<td><a id='tablecdescc'>0</a></td>";

Estas agregando multiples elementos con el mismo id="tableccant". Por lo que cuando buscas en elemento por el id, siempre retornara el primer elemento con ese id.

Mira un ejemplo:

$("#id-1").css("background", "blue");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id-1">Div 1</div>
<div id="id-1">Div 2</div>

Debes de buscar la manera de generar el id dinamicamente, obtener ese id y aplicar el estilo que deseas.

Puedes también cambiar el id por una clase y hacer lo siguiente:

fila += "<td><a class='tableccant'>1</a></td>";

Javascript:

$(".tableccant").editable();
2
  • Gracias Einer me funciono de maravilla y exactamente como tu comentaste el problema era con los id, la solución fue cambiar el id por una clase
    – Miguel
    Commented el 18 jul. 2017 a las 14:49
  • Excelente! Me alegra saber que lo solucionaste.
    – Einer
    Commented el 18 jul. 2017 a las 14:50

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.