js活动表格序号

<table id="activityTable">
  <thead>
    <tr>
      <th>序号</th>
      <th>活动名称</th>
      <!-- 其他列 -->
    </tr>
  </thead>
  <tbody>
    <!-- 数据行将通过JavaScript动态生成 -->
  </tbody>
</table>

// 假设你有一个活动数据数组
const activities = [
  { name: '活动1' },
  { name: '活动2' },
  // ...更多活动
];

const tableBody = document.querySelector('#activityTable tbody');

activities.forEach((activity, index) => {
  const row = document.createElement('tr');

  // 创建序号单元格
  const indexCell = document.createElement('td');
  indexCell.textContent = index + 1; // 序号从1开始
  row.appendChild(indexCell);

  // 创建活动名称单元格
  const nameCell = document.createElement('td');
  nameCell.textContent = activity.name;
  row.appendChild(nameCell);

  // ...添加其他单元格

  tableBody.appendChild(row);
});

const fragment = document.createDocumentFragment();

activities.forEach((activity, index) => {
  // ...与之前相同的代码，创建行和单元格

  fragment.appendChild(row);
});

tableBody.appendChild(fragment); // 一次性将所有行添加到表格中，减少DOM操作次数