jqueryを使用してテーブルを動的に生成する方法

-1

1から70までの数値を、各行が5つの数値しか含まないテーブルで生成したいとします。私はこれを生成しましたが、5行目の後にテーブル行を閉じる方法はわかりません。</td>私はまたそれが<a>タグを生成したい。私を助けてください。jqueryを使用してテーブルを動的に生成する方法

$('tbody').append(
    $('<tr>').append(
    $('td').append(
     $('a').attr('data-index', i) 
    ) 
    ) 
)

を、あなたのためのjQuery自動的に閉じタグ：

flag = false; 
 
for (var i = 1; i <= 15; i++) { 
 
    if (!flag) { 
 
    $("tbody").append("<tr>") 
 
    flag = true; 
 
    } 
 

 
    $('tr').append('<td><a data-index=' + i + '>' + i + '</a></td>'); 
 

 
    if (i % 5 == 0) { 
 
    $("td:nth-child(5n)").insertAfter('</tr>'); 
 
    flag = false; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <h2>Bordered Table</h2> 
 
    <p>The .table-bordered class adds borders to a table:</p> 
 
    <table class="table table-bordered location"> 
 
     <tbody></tbody> 
 
    </table> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-07-17 Waleed Khan

のまわりでそれを包むことにより、tbodyに追加しますこれまでに試みた。 –

まあ、1つは、すべてのループ反復でページのすべての 'tr 'に同じ' td'を追加しています。あなたは、必要な要素を作成してから、すべての準備ができたら最後に挿入する必要があります。 – chazsolo

Waleed Khanあなたは解決策を求めてきましたが、2つの解決策があります。解決策があれば元に戻してください。 –

私はjQueryのは、このようなコードを追加使用することをお勧めします。

出典

2017-07-17 15:05:36 Grynets

これは小さなロジック変更です。アイデアは、変数内のすべてのtdタグを構築することであり、あなたが5で数倍に達したとき、あなたがたもの投稿してくださいtr

var $tableBody = $('tbody'); // use a Id selector here 
 
var rowHTML = ''; 
 

 
for (var i = 1; i <= 15; i++) { 
 
    rowHTML += '<td><a data-index=' + i + '>' + i + '</a></td>'; 
 

 
    if (i % 5 == 0) { 
 
    $tableBody.append('<tr>' + rowHTML + '</tr>'); 
 
    rowHTML = ''; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <h2>Bordered Table</h2> 
 
    <p>The .table-bordered class adds borders to a table:</p> 
 
    <table class="table table-bordered location"> 
 
     <tbody></tbody> 
 
    </table> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-07-17 15:14:41

jqueryを使用してテーブルを動的に生成する方法

答えて

関連する問題