1

Estoy tratando de determinar el indice de una fila de una tabla para luego hacer la eliminación de dicha fila. Si bien logro hacerlo no me estaria dando cuenta donde esta mi error ya que siempre me elimina la primera fila, luego la segunda y así sucesivamente.

Dejo el segmento de código.

var tid = "";
$(document).on('click', '.eliminar', function(event){
    tid = $('#tabla tbody tr').attr('id');
    alert('fila seleccionada: '+tid);
    $('#' + tid).remove();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>

<table id="tabla" class="table table-info table-responsive table-bordered table-hover">
	<thead id="head">
		<tr>
			<th class="text-center text-primary">N° de Estudio</th>
			<th class="text-center text-primary">Fecha</th>
			<th class="text-center text-primary">Estudio Medico</th>
			<th class="text-center text-primary">Resultado</th>
			<th class="text-center text-primary">Editar</th>
		</tr>
	</thead>
	<tbody id="tbody">
		<tr id="1">
			<td class="text-center">1</td>
			<td class="text-center">2019-02-20</td>
			<td class="text-center">Vaso De Cuello Ecodopler</td>
			<td class="text-center">asdasdasd</td><td id="celdastBodyButton1" class="text-center"><a class="eliminar" title=""><span class="glyphicon glyphicon-trash"></span></a></td>
		</tr>
		<tr id="2">
			<td class="text-center">2</td>
			<td class="text-center">2019-02-20</td>
			<td class="text-center">Vaso De Cuello Ecodopler</td><td class="text-center">asdasdasdas</td>
			<td id="celdastBodyButton2" class="text-center"><a class="eliminar" title="" ><span class="glyphicon glyphicon-trash"></span></a></td>
		</tr><tr id="3">
			<td class="text-center">3</td>
			<td class="text-center">2019-02-20</td>
			<td class="text-center">Vaso De Cuello Ecodopler</td>
			<td class="text-center">asdasdasd</td><td id="celdastBodyButton3" class="text-center"><a class="eliminar" title=""><span class="glyphicon glyphicon-trash"></span></a></td>
		</tr>
		<tr id="4">
			<td class="text-center">4</td>
			<td class="text-center">2019-02-19</td>
			<td class="text-center">Vaso De Cuello Ecodopler</td>
			<td class="text-center">asdasdasdasdsad</td>
			<td id="celdastBodyButton4" class="text-center"><a class="eliminar" title="" ><span class="glyphicon glyphicon-trash"></span></a></td>
		</tr>
	</tbody>
	<tfoot>										
	</tfoot>
</table>

Aprovecho también para preguntar como tengo que hacer para que en la tabla se muestre el formato dd/mm/YYYY para las fechas.

Muchas gracias.

1 respuesta 1

1

Necesitas especificar el contexto con this asi:

var tid = "";
$(document).on('click', '.eliminar', function(event){
    tid = $(this).parents('tr').attr('id');
    alert('fila seleccionada: '+tid);
    $('#' + tid).remove();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>

<table id="tabla" class="table table-info table-responsive table-bordered table-hover">
	<thead id="head">
		<tr>
			<th class="text-center text-primary">N° de Estudio</th>
			<th class="text-center text-primary">Fecha</th>
			<th class="text-center text-primary">Estudio Medico</th>
			<th class="text-center text-primary">Resultado</th>
			<th class="text-center text-primary">Editar</th>
		</tr>
	</thead>
	<tbody id="tbody">
		<tr id="1">
			<td class="text-center">1</td>
			<td class="text-center">2019-02-20</td>
			<td class="text-center">Vaso De Cuello Ecodopler</td>
			<td class="text-center">asdasdasd</td><td id="celdastBodyButton1" class="text-center"><a class="eliminar" title=""><span class="glyphicon glyphicon-trash"></span></a></td>
		</tr>
		<tr id="2">
			<td class="text-center">2</td>
			<td class="text-center">2019-02-20</td>
			<td class="text-center">Vaso De Cuello Ecodopler</td><td class="text-center">asdasdasdas</td>
			<td id="celdastBodyButton2" class="text-center"><a class="eliminar" title="" ><span class="glyphicon glyphicon-trash"></span></a></td>
		</tr><tr id="3">
			<td class="text-center">3</td>
			<td class="text-center">2019-02-20</td>
			<td class="text-center">Vaso De Cuello Ecodopler</td>
			<td class="text-center">asdasdasd</td><td id="celdastBodyButton3" class="text-center"><a class="eliminar" title=""><span class="glyphicon glyphicon-trash"></span></a></td>
		</tr>
		<tr id="4">
			<td class="text-center">4</td>
			<td class="text-center">2019-02-19</td>
			<td class="text-center">Vaso De Cuello Ecodopler</td>
			<td class="text-center">asdasdasdasdsad</td>
			<td id="celdastBodyButton4" class="text-center"><a class="eliminar" title="" ><span class="glyphicon glyphicon-trash"></span></a></td>
		</tr>
	</tbody>
	<tfoot>										
	</tfoot>
</table>

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.