使用 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
