¿Cómo puedo agregar un nuevo <tr> después de hacer clic en <tr> ? ¿Al hacer clic en este <tr> y eliminar ahora creado al hacer clic en otro <tr> (con repetir el primer escenario) por jQuery?
Intenté así, pero no funciona:
$("#test_table tr").click(function() { $(this).prev().remove(); $(this).closest('tr').append('<tr><td>2.2</td></tr>'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="test_table"> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> </table>Dado su objetivo, parece que desea reemplazar el tr actual con el nuevo fragmento de código HTML. Para hacer eso, solo necesita llamar a after() para insertar el nuevo HTML, luego remove() para borrar el tr original:
$("#test_table tr").click(function() { $(this).after('<tr><td>2.2</td></tr>').remove(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="test_table"> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> </table> Sin embargo, como el único efecto de esto es cambiar el texto dentro de la td , puede simplemente llamar a text() en su lugar:
$("#test_table tr").click(function() { $(this).find('td').text('2.2'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="test_table"> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> </table>