如何向表格指定单元格添加数据？DataTable使用难题求助

一、基于DataTable的实现方式 #

核心思路是跟踪当前待填充的单元格列索引，点击按钮时获取目标行，通过DataTable API更新对应单元格内容，之后自动递增索引指向相邻下一个单元格。

示例代码 #

HTML结构

<table id="myTable" class="display" style="width:100%">
  <thead>
    <tr>
      <th>时间1</th>
      <th>时间2</th>
      <th>时间3</th>
      <th>时间4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
<button id="addTimeBtn">添加点击时间</button>

JavaScript逻辑

// 初始化DataTable
const table = $('#myTable').DataTable();
// 跟踪当前要填充的列索引（从0开始，对应第一列）
let currentColIndex = 0;
// 目标行索引（这里固定为第一行，索引0）
const targetRowIndex = 0;

$('#addTimeBtn').click(function() {
  // 检查是否还有未填充的单元格
  if (currentColIndex >= table.columns().count()) {
    alert('所有单元格已填充完毕');
    return;
  }
  
  // 获取当前时间，格式可自定义
  const currentTime = new Date().toLocaleString();
  
  // 通过DataTable API更新指定单元格
  table.cell(targetRowIndex, currentColIndex).data(currentTime).draw();
  
  // 索引自增，指向相邻下一个单元格
  currentColIndex++;
});

如果需要填充选中的行，只需把targetRowIndex改为table.row('.selected').index()，同时给表格添加行选中功能（可结合DataTable的select扩展实现）。

二、无表格的指定位置填充方案 #

如果不需要表格，可用多个<div>模拟可填充位置，同样通过跟踪索引控制填充顺序。

示例代码 #

HTML结构

<div class="time-container">
  <div class="time-slot"></div>
  <div class="time-slot"></div>
  <div class="time-slot"></div>
  <div class="time-slot"></div>
</div>
<button id="addTimeBtn">添加点击时间</button>

CSS（可选，美化布局）

.time-container {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}
.time-slot {
  width: 150px;
  height: 40px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript逻辑

const timeSlots = document.querySelectorAll('.time-slot');
let currentSlotIndex = 0;

document.getElementById('addTimeBtn').addEventListener('click', function() {
  if (currentSlotIndex >= timeSlots.length) {
    alert('所有位置已填充完毕');
    return;
  }
  
  const currentTime = new Date().toLocaleString();
  timeSlots[currentSlotIndex].textContent = currentTime;
  currentSlotIndex++;
});

内容的提问来源于stack exchange，提问作者Abd El Rahman Hanafy