如何動態地使用jquery

-1

我要生成從1到70一個號碼錶中的與僅含有5個號碼的每一行，以產生表。我已經產生了這一點，但我不知道該怎麼第五</td>後，要關閉錶行。我也希望它產生<a>標籤。請幫幫我。如何動態地使用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請發表你已經什麼迄今爲止嘗試過。 –

嗯，一，你在每次循環附加在頁面上一樣'td'每'tr'。您應該預先創建所需的元素，然後在準備好所有內容時進行最後的插入。 – chazsolo

瓦利德汗你問了一個解決方案，並且提供2個解決方案。請需要時間來恢復，如果任何解決方案適用於你..欣賞人的努力幫助你.. –

我建議你使用jQuery追加這樣的代碼：

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

和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

回答

相關問題