但是我的表格数据是js列表获取的,数据不固定,怎么渲染表格并增加按钮
时间: 2023-12-14 13:39:57 浏览: 31
如果数据是通过 JavaScript 列表获取的并且不固定,您可以使用 JavaScript 动态地生成表格。以下是一个简单的示例:
```html
<table id="myTable">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 假设您已经从服务器获取了数据列表
var dataList = [
{ col1: '数据1', col2: '数据2', col3: '数据3' },
{ col1: '数据4', col2: '数据5', col3: '数据6' },
{ col1: '数据7', col2: '数据8', col3: '数据9' }
];
// 获取表格的 tbody 元素
var tableBody = document.getElementById('myTable').getElementsByTagName('tbody')[0];
// 循环遍历数据列表,创建表格行并追加到 tbody 中
for (var i = 0; i < dataList.length; i++) {
// 创建表格行
var tableRow = document.createElement('tr');
// 创建表格单元格并添加数据
var cell1 = document.createElement('td');
cell1.innerHTML = dataList[i].col1;
var cell2 = document.createElement('td');
cell2.innerHTML = dataList[i].col2;
var cell3 = document.createElement('td');
cell3.innerHTML = dataList[i].col3;
// 创建操作按钮单元格
var actionsCell = document.createElement('td');
var editButton = document.createElement('button');
editButton.innerHTML = '编辑';
var deleteButton = document.createElement('button');
deleteButton.innerHTML = '删除';
// 将按钮添加到单元格中
actionsCell.appendChild(editButton);
actionsCell.appendChild(deleteButton);
// 将单元格添加到行中
tableRow.appendChild(cell1);
tableRow.appendChild(cell2);
tableRow.appendChild(cell3);
tableRow.appendChild(actionsCell);
// 将行添加到表格中
tableBody.appendChild(tableRow);
}
</script>
```
这个例子中,我们创建了一个空的表格,然后使用 JavaScript 动态地将数据列表渲染到表格中。我们为表格添加了一个操作列,并在每一行中添加了编辑和删除按钮。