2017-12-27 276 views
2

我想插入一行到多个表的问题上插入一排表

$('table > tbody > tr:first').before('<tr><td>Stuff</td></tr>'); 

是增加新tr只有第一个表和

$("tbody").each(function() { 
     $('table > tbody > tr:first').before('<tr><td>Stuff</td></tr>'); 
    }); 

的开头开始再次将所有新的tr s添加到第一个表。你能让我知道如何解决这个问题吗?

$("tbody").each(function() { 
 
    $('table > tbody > tr:first').before('<tr><td>Stuff</td></tr>'); 
 
}); 
 

 
$('table > tbody > tr:first').before('<tr><td>Stuff</td></tr>');
table, 
 
th, 
 
td { 
 
    border: 1px solid #eee; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

回答

4

使用$(this)来引用每个表。

$("tbody ").each(function() { 
 
    $(this).before('<tr><td>Stuff</td></tr>'); 
 
});
table, 
 
th, 
 
td { 
 
    border: 1px solid #eee; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

PS - 如果你想这里面tbody您可以使用$(this).find("tr:first").before('<tr><td>Stuff</td></tr>');

+0

你已经将它插入到表格中,但是在tbody之外。糟糕!你会想找到那个tbody的第一行,并使用before()在THAT之前插入。 – Snowmonkey

1

您使用的是相同的选择,而不是tbody

$("tbody").each(function() { 
    $(this).before('<tr><td>Stuff</td></tr>'); 
}); 
+0

你做同样做到这一点 - 你在tbody标签之前插入它。你可能想要找到那个tbody中的第一个字符,并在它之前插入它。 – Snowmonkey

2

$("tbody").each(function() { 
 
    // I don't want to insert before the tbody, 
 
    // I want to insert before the first row. 
 
    $(this).find("tr:first").before('<tr><td>Stuff</td></tr>'); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>January</td> 
 
     <td>$100</td> 
 
    </tr> 
 
    <tr> 
 
     <td>February</td> 
 
     <td>$80</td> 
 
    </tr> 
 
    </tbody> 
 
</table>