当前位置：首页 > JavaScript

js实现点击实现合并

2026-03-15 10:24:05JavaScript

实现点击合并的JavaScript方法

使用事件监听器捕获点击事件，通过DOM操作合并元素或数据。以下是一个常见的实现方式：

document.addEventListener('DOMContentLoaded', function() {
  const mergeButton = document.getElementById('mergeButton');
  const container = document.getElementById('container');

  mergeButton.addEventListener('click', function() {
    const elementsToMerge = document.querySelectorAll('.item-to-merge');
    let mergedContent = '';

    elementsToMerge.forEach(element => {
      mergedContent += element.textContent + ' ';
      element.remove();
    });

    const mergedElement = document.createElement('div');
    mergedElement.className = 'merged-item';
    mergedElement.textContent = mergedContent.trim();
    container.appendChild(mergedElement);
  });
});

合并表格行的实现方法

对于表格数据的合并，可以这样处理：

function mergeTableRows(tableId, columnIndex) {
  const table = document.getElementById(tableId);
  let previousValue = null;
  let rowspan = 1;

  for (let i = 1; i < table.rows.length; i++) {
    const currentCell = table.rows[i].cells[columnIndex];
    const currentValue = currentCell.textContent;

    if (currentValue === previousValue) {
      table.rows[i-1].cells[columnIndex].rowSpan = ++rowspan;
      currentCell.remove();
    } else {
      previousValue = currentValue;
      rowspan = 1;
    }
  }
}

合并数组的实现方法

点击按钮合并两个数组的示例：

const mergeArraysBtn = document.getElementById('mergeArrays');
mergeArraysBtn.addEventListener('click', () => {
  const array1 = [1, 2, 3];
  const array2 = [4, 5, 6];
  const mergedArray = [...array1, ...array2];
  console.log('Merged array:', mergedArray);
});

合并对象的实现方法

合并两个对象的点击事件处理：

js实现点击实现合并

document.getElementById('mergeObjects').addEventListener('click', () => {
  const obj1 = { a: 1, b: 2 };
  const obj2 = { b: 3, c: 4 };
  const mergedObj = { ...obj1, ...obj2 };
  console.log('Merged object:', mergedObj);
});