如何用jQuery实现HTML表格单元格双向联动填充及自动插入行

实现逻辑说明 #

你需要的账号与账户名双向联动填充功能可以通过原生JavaScript实现，不需要额外引入第三方库。

步骤1：定义账号映射关系 #

首先补充账号和对应账户名的映射字典，可根据实际业务数据扩展：

const accountMap = {
  "101001": "现金账户",
  "101002": "银行存款-工商银行",
  "101003": "银行存款-建设银行",
  "168001": "固定资产"
}

步骤2：绑定双向联动事件 #

固定单行表格的写法 #

如果你的表格只有固定一行数据，直接绑定对应输入框的change事件即可：

// 账号输入后自动填充账户名
document.querySelector('input[name="Account"]').addEventListener('change', function() {
  const inputNum = this.value.trim()
  document.querySelector('input[name="AcountName"]').value = accountMap[inputNum] || ''
})

// 账户名输入后自动反向填充账号
document.querySelector('input[name="AcountName"]').addEventListener('change', function() {
  const inputName = this.value.trim()
  let matchedNum = ''
  for (const [num, name] of Object.entries(accountMap)) {
    if (name === inputName) {
      matchedNum = num
      break
    }
  }
  document.querySelector('input[name="Account"]').value = matchedNum
})

支持动态新增行的写法 #

如果后续表格支持新增多行数据，使用事件委托的方式绑定事件，确保新增行也能触发联动：

document.querySelector('#tbl tbody').addEventListener('change', function(e) {
  const currentRow = e.target.closest('tr')
  const accountInput = currentRow.querySelector('input[name="Account"]')
  const nameInput = currentRow.querySelector('input[name="AcountName"]')

  // 账号联动账户名逻辑
  if (e.target.matches('input[name="Account"]')) {
    nameInput.value = accountMap[e.target.value.trim()] || ''
  }

  // 账户名反向联动账号逻辑
  if (e.target.matches('input[name="AcountName"]')) {
    const inputName = e.target.value.trim()
    let matchedNum = ''
    for (const [num, name] of Object.entries(accountMap)) {
      if (name === inputName) {
        matchedNum = num
        break
      }
    }
    accountInput.value = matchedNum
  }
})

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