jQuery appendメソッドを使ってテーブルに行を追加するサンプル
環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
jquery 3.6.1
構文
$('テーブルのクラス名’).append('<tr><td>’ + 値1 + '</td><td>値2</td></tr>’);
appendメソッドを使ってテーブルを追加します。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border:1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
//tr要素をカウント
var cnt= $('.cft tr').length;
$('#btnchg').click(function(e){
//テーブルを追加する
$('.cft').append('<tr><td>' + (++cnt) + '</td><td>項目</td></tr>');
});
})
</script>
</head>
<body>
<table style="width:60%" class="cft">
<tr>
<td>1</td>
<td>東京</td>
</tr>
<tr>
<td>2</td>
<td>大阪</td>
</tr>
</table>
<p>
<button id="btnchg" >実行</button></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border:1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
//tr要素をカウント
var cnt= $('.cft tr').length;
$('#btnchg').click(function(e){
//テーブルを追加する
$('.cft').append('<tr><td>' + (++cnt) + '</td><td>項目</td></tr>');
});
})
</script>
</head>
<body>
<table style="width:60%" class="cft">
<tr>
<td>1</td>
<td>東京</td>
</tr>
<tr>
<td>2</td>
<td>大阪</td>
</tr>
</table>
<p>
<button id="btnchg" >実行</button></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border:1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
//tr要素をカウント
var cnt= $('.cft tr').length;
$('#btnchg').click(function(e){
//テーブルを追加する
$('.cft').append('<tr><td>' + (++cnt) + '</td><td>項目</td></tr>');
});
})
</script>
</head>
<body>
<table style="width:60%" class="cft">
<tr>
<td>1</td>
<td>東京</td>
</tr>
<tr>
<td>2</td>
<td>大阪</td>
</tr>
</table>
<p>
<button id="btnchg" >実行</button></p>
</body>
</html>
実行結果
「実行」ボタンを押すと、テーブルを追加します。