2017-12-27 423 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>