使用 jQuery 建立表
Anika Tabassum Era
2023年1月30日
2022年7月18日
在 jQuery 庫的幫助下，我們可以將新的表格行新增到我們的內容中並建立表格元素。我們將進行基本的迴圈工作，以確保我們的資料或輸出模式以表格格式堆疊。
我們將檢查兩個示例，一個將表格標籤和內容作為字串。稍後，附加它會將其配置為 HTML 正文中的表格。
但是，將表格元素建立為字串可能會妨礙以後的自定義。因此，在我們的第二個示例中，我們將建立一個表格元素的例項，因此通過指定屬性（id、class），我們可以更改表格內容屬性。
讓我們進行徹底檢查以瞭解。
通過將表格內容作為字串使用 jQuery 建立表格
在這裡，我們將使用一個變數來儲存表格元素的開始標籤、新增內容和結束標籤。在下一步中，我們將把這個總和或字串集合附加到我們考慮的 div。
基本問題是我們無法重新初始化表資料或錶行的屬性。讓我們檢查一下程式碼行。
程式碼片段：
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="tab"> </div>
<script>
var content = "<table>"
for(i=0; i<3; i++){
content += '<tr><td>' + 'output ' + i + '</td></tr>';
}
content += "</table>"
$('#tab').append(content);
</script>
輸出：
使用 jQuery 通過建立表例項建立表
我們將考慮為表建立例項及其 id 和 class 屬性。稍後，根據偏好，我們可以更改屬性。
程式碼更明確地描述了這一點。
程式碼片段：
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="tab"> </div>
<script>
var table = $('<table>');
for(i=0; i<3; i++){
var row = $('<tr>').text('output ' + i).addClass('rows');
row.addClass('rows').css({'color':'red'});
table.append(row);
}
$('#tab').append(table);
</script>
輸出：
Author: Anika Tabassum Era
