Puede ser incómodo porque el inglés no es mi primer idioma.
Tengo una tarea para escribir código javascript puro que elimine la columna en la que se hizo clic cuando se hace clic en la tabla. Desafortunadamente no puedo usar jquery.
let cells = document.querySelectorAll("table td"); es el código que básicamente necesito usar.
window.onload = function () { function click(e) { let cells = document.querySelectorAll("table td"); let index = e.target.cellIndex; cells.forEach((td, i) => { if (td.cellIndex === index) { td.parentElement.querySelectorAll("td")[index].remove(); } }) } // set onclick event for the head of each column document.querySelectorAll('tr > td').forEach(td => td.onclick = click) }En mi fuente, elimino todas las columnas a la derecha de donde hice clic para ver dónde está el problema.
Solo se debe eliminar la columna del td en el que se hizo clic.
No se donde esta el problema ni como solucionarlo.
Puede seleccionar las celdas que desea eliminar a través del selector nth-child , según cellIndex . La siguiente tabla demuestra esto:
function click(e) { let index = e.target.cellIndex; document.querySelectorAll(`tr td:nth-child(${index + 1})`).forEach(cell => cell.remove()); } // set onclick event for the head of each column document.querySelectorAll('tr > td').forEach(td => td.onclick = click) <table border="1"> <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr> <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr> <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr> <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr> <tr><td>Column 1</td><td>Column 2</td><td>Column 3</td><td>Column 4</td><td>Column 5</td></tr> </table>Recoge todos los tr. Aplicar click eventListener a cada tr. EventHandler recopila todos los td por índice de columna. Luego use la función remove().
document.querySelectorAll('tr').forEach((c) => { c.addEventListener('click', (e) => { document.querySelectorAll('tr td:nth-child(' + (e.target.cellIndex + 1) + ')') .forEach((td) => { td.remove(); }); }) }); table { border: 1px solid #000; } <table> <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4</td></tr> <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4</td></tr> <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4</td></tr> <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4</td></tr> <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4</td></tr> <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4</td></tr> </table>