tengo la siguiente tabla:
<table border="1" cellpadding="5" class="test"> <tr> <td id="1">aaa</td> <td id="2">bbb</td> <td id="3">ccc</td> </tr> <tr> <td id="4">ddd</td> <td id="5">eee</td> <td id="6">fff</td> </tr> <tr> <td id="7">ggg</td> <td id="8">hhh</td> <td id="9">iii</td> </tr> </table>La condición debe ser que solo puede seleccionar una celda de la tabla por fila y columna.
En este momento, mi secuencia de comandos está administrando que solo es posible una selección por columna de la tabla, pero ¿cómo puedo agregar además que solo se puede seleccionar una celda por fila de la tabla?
Este es mi script y el JS Fiddle :
$(document).on("click", ".test td", function() { let index = $(this).index()+1; $(this) .closest('table') .find('tr>td:nth-child('+index+')') .removeClass('selected'); var col1 = $(this).addClass('selected').text(); });elimine toda la clase active en la fila en la que se hizo clic. Inserte la siguiente fila en su código
$(this).closest('tr').find('td').removeClass('selected');Asi que,
$(document).on("click", ".test td", function() { let index = $(this).index()+1; $(this) .closest('table') .find('tr>td:nth-child('+index+')') .removeClass('selected'); $(this).closest('tr').find('td').removeClass('selected'); // remove 'active' class of the row var col1 = $(this).addClass('selected').text(); });Una solución para seleccionar " una celda por fila de tabla "
$(document).on("click", ".test td", function() { let index = $(this).index()+1; console.log(index) $(this) .closest('tr').children('td') .removeClass('selected'); $(this).addClass('selected') });