tableBody = tableBody + '<tr><td>'+ obj.dataId +'</td><td>'+ obj.type +'</td><td>'+ obj.dataName +'</td><td><button class="info-btn" data-name="张三" data-age="20" data-gender="男">查看</button></td></tr>'文字居中

可以将每个 `<td>` 标签的样式设置为 `text-align: center;` 来使文字居中，如下所示：

tableBody = tableBody + '<tr><td style="text-align: center;">'+ obj.dataId +'</td><td style="text-align: center;">'+ obj.type +'</td><td style="text-align: center;">'+ obj.dataName +'</td><td style="text-align: center;"><button class="info-btn" data-name="张三" data-age="20" data-gender="男">查看</button></td></tr>'

相关问题

修改以下代码中表格样式，在table中增加分界线和每段文字之间距离 代码：var popup = document.createElement('div'); table.style.borderCollapse = 'collapse'; var tableHead = '<tr><th>映射对象id</th><th>映射对象类型</th><th>映射对象名称</th><th>操作</th></tr>'; let tableBody = '' for (let i = 0; i < dom.tableData.length; i++) { const obj = dom.tableData[i] tableBody = tableBody + '<tr><td>'+ obj.dataId +'</td><td>'+ obj.type +'</td><td>'+ obj.dataName +'</td><td><button class="info-btn" data-name="张三" data-age="20" data-gender="男">查看</button></td></tr>' } thead.innerHTML = tableHead; tbody.innerHTML = tableBody;

可以在代码中增加如下样式来实现表格中分界线和每段文字之间的距离：

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  border: 1px solid black;
  padding: 10px;
}

修改后的代码如下：

var popup = document.createElement('div');
table.style.borderCollapse = 'collapse';
table.style.borderSpacing = '0';
var tableHead = '<tr><th>映射对象id</th><th>映射对象类型</th><th>映射对象名称</th><th>操作</th></tr>';
let tableBody = ''
for (let i = 0; i < dom.tableData.length; i++) {
  const obj = dom.tableData[i]
  tableBody = tableBody + '<tr><td>'+ obj.dataId +'</td><td>'+ obj.type +'</td><td>'+ obj.dataName +'</td><td><button class="info-btn" data-name="张三" data-age="20" data-gender="男">查看</button></td></tr>'
}
thead.innerHTML = tableHead;
tbody.innerHTML = tableBody;

这样就可以在表格中增加分界线和每段文字之间的距离了。

修改以下代码增加表格分页 let popup = document.createElement('div'); let table = document.createElement('table'); let thead = document.createElement('thead'); let tbody = document.createElement('tbody'); let tableHead = '<tr><th>映射对象id</th><th>映射对象类型</th><th>映射对象名称</th><th>操作</th></tr>'; let tableBody = '' for (let i = 0; i < dom.tableData.length; i++) { const obj = dom.tableData[i] tableBody = tableBody + '<tr><td style="text-align: center;">'+ obj.dataId +'</td><td style="text-align: center;">'+ obj.type +'</td><td style="text-align: center;">'+ obj.dataName +'</td><td style="text-align: center;"><button class="info-btn" data-dataid="'+ obj.dataId +'" data-type="'+ obj.type +'" data-dataname="'+ obj.dataName +'">查看</button></td></tr>' } thead.innerHTML = tableHead; tbody.innerHTML = tableBody; table.appendChild(thead); table.appendChild(tbody); popup.appendChild(table);

可以使用第三方库或者手写实现分页功能。以下是手写实现的示例代码：

1. 在HTML中添加分页元素

<div id="pagination"></div>

2. 修改代码增加分页逻辑

let popup = document.createElement('div');
let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');

let currentPage = 1; // 当前页
let pageSize = 10; // 每页显示的数据量

// 根据当前页和每页显示的数据量，截取数据
let startIndex = (currentPage - 1) * pageSize;
let endIndex = startIndex + pageSize;
let tableData = dom.tableData.slice(startIndex, endIndex);

let tableHead = '<tr><th>映射对象id</th><th>映射对象类型</th><th>映射对象名称</th><th>操作</th></tr>';
let tableBody = '';
for (let i = 0; i < tableData.length; i++) {
  const obj = tableData[i];
  tableBody = tableBody + '<tr><td style="text-align: center;">'+ obj.dataId +'</td><td style="text-align: center;">'+ obj.type +'</td><td style="text-align: center;">'+ obj.dataName +'</td><td style="text-align: center;"><button class="info-btn" data-dataid="'+ obj.dataId +'" data-type="'+ obj.type +'" data-dataname="'+ obj.dataName +'">查看</button></td></tr>';
}

thead.innerHTML = tableHead;
tbody.innerHTML = tableBody;
table.appendChild(thead);
table.appendChild(tbody);
popup.appendChild(table);

// 计算总页数
let totalPages = Math.ceil(dom.tableData.length / pageSize);

// 生成分页按钮
let pagination = document.getElementById('pagination');
for (let i = 1; i <= totalPages; i++) {
  let btn = document.createElement('button');
  btn.innerText = i;
  btn.onclick = function() {
    currentPage = i;
    renderTable();
  }
  pagination.appendChild(btn);
}

function renderTable() {
  // 清空表格和分页按钮
  table.innerHTML = '';
  pagination.innerHTML = '';

  // 根据当前页和每页显示的数据量，截取数据
  let startIndex = (currentPage - 1) * pageSize;
  let endIndex = startIndex + pageSize;
  let tableData = dom.tableData.slice(startIndex, endIndex);

  let tableBody = '';
  for (let i = 0; i < tableData.length; i++) {
    const obj = tableData[i];
    tableBody = tableBody + '<tr><td style="text-align: center;">'+ obj.dataId +'</td><td style="text-align: center;">'+ obj.type +'</td><td style="text-align: center;">'+ obj.dataName +'</td><td style="text-align: center;"><button class="info-btn" data-dataid="'+ obj.dataId +'" data-type="'+ obj.type +'" data-dataname="'+ obj.dataName +'">查看</button></td></tr>';
  }

  tbody.innerHTML = tableBody;
  table.appendChild(tbody);
  popup.appendChild(table);

  // 重新生成分页按钮
  for (let i = 1; i <= totalPages; i++) {
    let btn = document.createElement('button');
    btn.innerText = i;
    btn.onclick = function() {
      currentPage = i;
      renderTable();
    }
    pagination.appendChild(btn);
  }
}

renderTable();