2.创建一个四行五列的表格 但是数据来自于js中获取循环输出(3-5不同的做法)
时间: 2024-09-07 18:03:49 浏览: 19
创建一个四行五列的表格,并且使用JavaScript循环输出不同的数据,可以通过以下几种不同的方法实现:
1. 使用原生JavaScript操作DOM来创建和填充表格:
```html
<table id="myTable"></table>
<script>
var table = document.getElementById("myTable");
for (var i = 0; i < 4; i++) {
var tr = table.insertRow(); // 创建新行
for (var j = 0; j < 5; j++) {
var td = tr.insertCell(); // 创建新单元格
td.innerHTML = `数据 ${i * 5 + j}`; // 填充数据
}
}
</script>
```
2. 使用jQuery简化DOM操作来创建和填充表格:
```html
<table id="myTable"></table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var data = [];
for (var i = 0; i < 4; i++) {
var row = [];
for (var j = 0; j < 5; j++) {
row.push(`数据 ${i * 5 + j}`);
}
data.push(row);
}
$('#myTable').append(
data.map(row => `<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>`)
);
</script>
```
3. 使用ES6的模板字符串来创建表格:
```html
<script>
let table = ''; // 使用模板字符串拼接字符串
for (let i = 0; i < 4; i++) {
let row = '';
for (let j = 0; j < 5; j++) {
row += `<td>数据 ${i * 5 + j}</td>`; // 拼接行数据
}
table += `<tr>${row}</tr>`; // 拼接行
}
document.write(table); // 输出整个表格
</script>
```