jQuery在表的中间位置添加一行_Jquery

jQuery在表的中间位置添加一行

jquery

jQuery在表的中间位置添加一行,jquery,Jquery,为什么第3行之后的插入不起作用？我还应该用其他方法吗 <html> <head> <title>Table Add Row</title> <script type="text/javascript" src="../jquery.js"></script> <script language="JavaScript"> $("document").ready(function() {

为什么第3行之后的插入不起作用？
我还应该用其他方法吗

<html>
<head>
    <title>Table Add Row</title>

<script type="text/javascript" src="../jquery.js"></script>
<script language="JavaScript">

    $("document").ready(function() {
        //alert("document ready");

        $("#EditComp tr:first").after('<tr><td>This row added after first</td></tr>');
        $("#EditComp tr:last").after('<tr><td>This row added after last</td></tr>');

        $('#EdRow3 tr').after('<tr><td>This row added after 3</td></tr>');

    });
</script>
</head>
<body>
    <table id="EditComp">
        <tbody>
            <tr id="EdRow1"><td>Row 1</td></tr>
            <tr id="EdRow2"><td>Row 2</td></tr>
            <tr id="EdRow3"><td>Row 3</td></tr>
            <tr id="EdRow4"><td>Row 4</td></tr>
            <tr id="EdRow5"><td>Row 5</td></tr>
        </tbody>
    </table>
</body>
</html>


表添加行
$（“文档”）.ready（函数（）{
//警报（“文件准备就绪”）；
$（“#EditComp tr:first”）.after（'此行添加在first之后'）；
$（“#EditComp tr:last”）.after（'此行添加在last之后'）；
$（'#EdRow3 tr'）。after（'此行在3'之后添加'）；
});
一排
第2排
第3排
第4排
第5行

为什么第3行之后的插入不起作用？
我应该使用其他方法吗？

$（'EdRow3 tr'）

应该是

$（'EdRow3'）

<html>
<head>
    <title>Table Add Row</title>

<script type="text/javascript" src="../jquery.js"></script>
<script language="JavaScript">

    $("document").ready(function() {
        //alert("document ready");

        $("#EditComp tr:first").after('<tr><td>This row added after first</td></tr>');
        $("#EditComp tr:last").after('<tr><td>This row added after last</td></tr>');

        $('#EdRow3 tr').after('<tr><td>This row added after 3</td></tr>');

    });
</script>
</head>
<body>
    <table id="EditComp">
        <tbody>
            <tr id="EdRow1"><td>Row 1</td></tr>
            <tr id="EdRow2"><td>Row 2</td></tr>
            <tr id="EdRow3"><td>Row 3</td></tr>
            <tr id="EdRow4"><td>Row 4</td></tr>
            <tr id="EdRow5"><td>Row 5</td></tr>
        </tbody>
    </table>
</body>
</html>

您选择的

tr

s是

#EdRow3

的后代

$（'tr#EdRow3'）

也可以工作，但是有

tr

是不必要的，因为元素

id

s是唯一的。

更改此项

$('#EdRow3 tr').after('<tr><td>This row added after 3</td></tr>');

$（'#EdRow3 tr'）。之后（'此行在3'之后添加'）；

对此

$('tr#EdRow3').after('<tr><td>This row added after 3</td></tr>');

$（'tr#EdRow3'）。之后（'3'之后添加此行）；

您的选择器不正确

$('#EdRow3').after('<tr><td>This row added after 3</td></tr>');

$（'#EdRow3'）。之后（'此行在3'之后添加'）；

只需在javascript代码中删除#EdRow3之后的tr。检查以下代码

<html>
<head>
    <title>Table Add Row</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="JavaScript">

    $("document").ready(function() {
        //alert("document ready");

        $("#EditComp tr:first").after('<tr><td>This row added after first</td></tr>');
        $("#EditComp tr:last").after('<tr><td>This row added after last</td></tr>');

        $('#EdRow3').after('<tr><td>This row added after 3</td></tr>');

    });
</script>
</head>
<body>
    <table id="EditComp">
        <tbody>
            <tr id="EdRow1"><td>Row 1</td></tr>
            <tr id="EdRow2"><td>Row 2</td></tr>
            <tr id="EdRow3"><td>Row 3</td></tr>
            <tr id="EdRow4"><td>Row 4</td></tr>
            <tr id="EdRow5"><td>Row 5</td></tr>
        </tbody>
    </table>
</body>
</html>


表添加行
$（“文档”）.ready（函数（）{
//警报（“文件准备就绪”）；
$（“#EditComp tr:first”）.after（'此行添加在first之后'）；
$（“#EditComp tr:last”）.after（'此行添加在last之后'）；
$（'#EdRow3'）。之后（'此行在3'之后添加'）；
});
一排
第2排
第3排
第4排
第5行