如何通过input checkbox绑定选择表格列，计算选中列差值并生成新表格

核心逻辑说明 #

• 直接通过checkbox的父元素th获取列索引，无需硬编码表头文本
• 维护一个选中列的存储对象，最多允许选中2列，选中数量达标后自动计算差值并生成新表格

可直接运行的代码修改 #

替换你原来的JS代码为以下内容即可：

// 存储选中的列数据 {列索引: {列名: '', 数值数组: []}}
let selectedCols = {}

// 给所有表头checkbox绑定选中事件
$('th input[type="checkbox"]').on('change', function() {
  const $th = $(this).parent()
  const colIndex = $th.index() + 1
  const colName = $th.text().trim()
  const isChecked = $(this).is(':checked')

  // 选中时存储列数据，取消选中时删除
  if (isChecked) {
    // 最多允许选2列
    if (Object.keys(selectedCols).length >= 2) {
      alert('最多只能选择2列计算差值')
      $(this).prop('checked', false)
      return
    }
    // 获取当前列所有数值
    const colValues = []
    $(`table tr td:nth-child(${colIndex})`).each(function() {
      colValues.push(Number($(this).text().trim()))
    })
    selectedCols[colIndex] = {
      name: colName,
      values: colValues
    }
  } else {
    delete selectedCols[colIndex]
  }

  // 选够2列时生成新表格
  if (Object.keys(selectedCols).length === 2) {
    generateDiffTable()
  } else {
    // 不足2列时清空已生成的差值表格
    $('#diff-table-wrap').remove()
  }
})

// 生成差值表格函数
function generateDiffTable() {
  const cols = Object.values(selectedCols)
  const col1 = cols[0]
  const col2 = cols[1]
  // 第一列是原来的序号列数据
  const indexColValues = []
  $('table tr td:nth-child(1)').each(function() {
    indexColValues.push($(this).text().trim())
  })

  // 拼接表格HTML
  let tableHtml = `
  <div id="diff-table-wrap" style="margin-top: 20px">
    <h3>选中列差值表</h3>
    <table border="1" cellpadding="6" cellspacing="0">
      <tr>
        <th>One</th>
        <th>${col1.name}</th>
        <th>${col2.name}</th>
        <th>${col1.name} - ${col2.name}</th>
      </tr>
  `
  indexColValues.forEach((indexVal, i) => {
    const diff = col1.values[i] - col2.values[i]
    tableHtml += `
      <tr>
        <td>${indexVal}</td>
        <td>${col1.values[i]}</td>
        <td>${col2.values[i]}</td>
        <td>${diff}</td>
      </tr>
    `
  })
  tableHtml += `
    </table>
  </div>
  `
  // 插入到原表格下方
  $('.table-scroll').after(tableHtml)
}

功能说明 #

• 勾选表头的checkbox即可选中对应列，最多允许选中2列
• 选中2列后会自动在原表格下方生成包含序号列、两个选中列、差值列的新表格
• 取消任意checkbox的选中状态，差值表格会自动消失

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