通过 jquery 添加和删除 html 元素

Question

如何在单击 <tr <tr>后添加新的 < <tr> 。 单击此<tr>并在单击 jQuery 的其他<tr> （重复第一种情况）时创建删除？

我试过这样，但它不起作用：

 $("#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>

Answer 1

鉴于您的目标，您似乎想用新的 HTML 片段替换当前的tr 。 为此，您只需要调用after()来插入新的 HTML，然后remove()以清除原始tr ：

 $("#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>

但是，这样做的唯一效果是更改td中的文本，您可以调用text()代替：

 $("#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>