如何通过JS实现第二次点击按钮时修改表格随机单元格内容

前置检查 #

你贴出的arraytotable函数末尾缺少闭合的}，请先补上避免运行报错。

修改后的secondClick函数代码 #

var cnt = -1;
// 定义随机备选内容，和原有表格字段匹配，你可以自行扩展
const randomContents = {
  model: ["A6", "Q5", "320Li", "X3", "Accord", "CRV", "Model 3", "汉EV"],
  brand: ["Audi", "BMW", "Honda", "Tesla", "比亚迪", "丰田", "奔驰"],
  year: ["2010", "2013", "2016", "2018", "2020", "2022", "2023"],
  engineNo: [Math.floor(Math.random()*10000).toString().padStart(4, '0')]
}

function secondClick(){
  cnt += 1;
  // 只有第二次及之后点击才执行修改逻辑
  if (cnt >= 1) {
    // 1. 获取表格DOM对象
    const table = document.getElementById('myTable');
    // 2. 计算可用数据行总数（排除第一行表头）、列总数
    const totalRows = table.rows.length - 1;
    const totalCols = table.rows[0].cells.length;
    // 3. 生成随机行、列索引
    const randomRowIndex = Math.floor(Math.random() * totalRows) + 1;
    const randomColIndex = Math.floor(Math.random() * totalCols);
    // 4. 定位目标单元格
    const targetCell = table.rows[randomRowIndex].cells[randomColIndex];
    // 5. 根据列属性取对应随机内容替换
    let newContent;
    switch(randomColIndex) {
      case 0: // 第一列是型号
        newContent = randomContents.model[Math.floor(Math.random() * randomContents.model.length)];
        break;
      case 1: // 第二列是品牌
        newContent = randomContents.brand[Math.floor(Math.random() * randomContents.brand.length)];
        break;
      case 2: // 第三列是年份
        newContent = randomContents.year[Math.floor(Math.random() * randomContents.year.length)];
        break;
      case 3: // 第四列是发动机号
        newContent = Math.floor(Math.random()*10000).toString().padStart(4, '0');
        break;
    }
    targetCell.innerHTML = newContent;
  }
}

功能说明 #

• 点击次数判断逻辑沿用你的原有设计：第一次点击cnt变为0，不触发修改；第二次点击cnt变为1，开始触发随机修改逻辑，之后每次点击都会随机修改一个单元格内容
• 代码兼容你页面上的Add another line新增行功能，后续新增的行也会被纳入随机修改的范围
• 随机内容和原有表格字段匹配，你可以根据需求自行扩展randomContents里的备选值

内容的提问来源于stack exchange，提问作者Dimensijus