Estoy trabajando en una página JSP. Cuando la página se procesa en función de ciertas condiciones
1) Tengo que insertar una fila en una tabla existente que tiene una fila con un nombre de clase "detalles" O 2) eliminar la fila insertada si existe
La página también tiene que renderizarse en ie11. Entonces no puedo usar insertAfter() o cualquier método es6. No puedo agregar/eliminar en el nodo correcto
<table id="myTable"> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> <tr class="details"> <td>cell 3</td> <td>cell 4</td> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 7</td> <td>cell 8</td> <td>cell 1</td> <td>cell 2</td> </tr> </table> var newHtml = '<tr class="select__pcp"><td colspan="2"> </td><td class="txt-right">text Msg</td><td class="txt-right span2"></td></tr>'; if(condition) { // insert newHTML after <tr class="details"> } else { //if <tr> with class="select__pcp" exists then delete it }Debe usar appendChild : consulte esta página ( https://www.w3schools.com/jsreF/met_node_appendchild.asp )
y removeChild : consulte esta página ( https://www.w3schools.com/JSREF/met_node_removechild.asp )
y si agrega un nodo en un lugar especial, debe usar insertAdjacentElement : consulte esta página ( https://www.w3schools.com/jsref/met_node_insertadjacentelement.asp )
Para agregar: puede intentar configurar el outerHTML del elemento de details para incluir el nuevo elemento.
Para eliminar: puede establecer el outerHTML en una cadena vacía
---en la carga del fragmento: agrega el elemento a la tabla, espera 3 segundos y elimina el elemento.
var newHtml = '<tr class="select__pcp"><td colspan="2"> </td><td class="txt-right">text Msg</td><td class="txt-right span2"></td></tr>'; function removeOrAdd(action){ if(action) { document.querySelector('.details').outerHTML += newHtml } else { document.querySelector('.select__pcp').outerHTML = '' } } removeOrAdd(true) setTimeout(removeOrAdd, 3000, false) <table id="myTable"> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> <tr class="details"> <td>cell 3</td> <td>cell 4</td> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 7</td> <td>cell 8</td> <td>cell 1</td> <td>cell 2</td> </tr> </table>