优化以下代码table样式，table文字之间增加分割线，并增加分页 代码： var tableHead = '<tr><th>映射对象id</th><th>映射对象类型</th><th>映射对象名称</th><th>操作</th></tr>'; let 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; // 将元素添加到页面中 popup.appendChild(table); table.appendChild(thead); table.appendChild(tbody); document.body.appendChild(popup);

这是一份比较基础的表格样式代码，以下是优化后的代码：

HTML:

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>映射对象id</th>
        <th>映射对象类型</th>
        <th>映射对象名称</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>类型1</td>
        <td>名称1</td>
        <td><button class="info-btn">查看</button></td>
      </tr>
      <tr>
        <td>2</td>
        <td>类型2</td>
        <td>名称2</td>
        <td><button class="info-btn">查看</button></td>
      </tr>
      <!-- 更多的数据行 -->
    </tbody>
  </table>
  <div class="pagination">
    <button class="prev-page-btn">上一页</button>
    <button class="next-page-btn">下一页</button>
  </div>
</div>

CSS:

.table-container {
  max-width: 800px;
  margin: 0 auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}

.info-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
}

.pagination {
  margin-top: 16px;
  text-align: center;
}

.prev-page-btn, .next-page-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
}

.prev-page-btn:hover, .next-page-btn:hover {
  background-color: #3e8e41;
}

JS:

const table = document.querySelector('table');
const tbody = table.querySelector('tbody');
const pagination = document.querySelector('.pagination');
const prevPageBtn = pagination.querySelector('.prev-page-btn');
const nextPageBtn = pagination.querySelector('.next-page-btn');
const rowsPerPage = 10; // 每页显示的行数
let currentPage = 1; // 当前页码

// 根据当前页码和每页显示的行数渲染数据行
function renderRows() {
  const start = (currentPage - 1) * rowsPerPage;
  const end = start + rowsPerPage;
  const rows = Array.from(tbody.querySelectorAll('tr'));
  rows.forEach((row, index) => {
    if (index >= start && index < end) {
      row.style.display = 'table-row';
    } else {
      row.style.display = 'none';
    }
  });
}

// 上一页按钮点击事件
prevPageBtn.addEventListener('click', () => {
  if (currentPage > 1) {
    currentPage--;
    renderRows();
  }
});

// 下一页按钮点击事件
nextPageBtn.addEventListener('click', () => {
  const rows = Array.from(tbody.querySelectorAll('tr'));
  const totalPages = Math.ceil(rows.length / rowsPerPage);
  if (currentPage < totalPages) {
    currentPage++;
    renderRows();
  }
});

// 初始化，显示第一页数据
renderRows();

说明：

1. 将表格和分页器放在一个容器内，方便样式控制。
2. 使用 CSS 的 `border-bottom` 属性为表格每行数据添加分割线。
3. 添加分页器并实现翻页功能，通过 JS 控制显示的数据行数来实现分页效果。