当前位置：首页 > JavaScript

js实现点击实现合并

2026-04-07 03:53:42JavaScript

实现点击合并的JavaScript方法

使用事件委托和DOM操作可以实现点击合并功能。以下是一个常见的实现方式：

document.addEventListener('click', function(event) {
  const target = event.target;
  if (target.classList.contains('merge-button')) {
    const parentElement = target.closest('.merge-container');
    const elementsToMerge = parentElement.querySelectorAll('.merge-item');

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

    const mergedElement = document.createElement('div');
    mergedElement.className = 'merged-result';
    mergedElement.textContent = mergedContent.trim();
    parentElement.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 currentValue = table.rows[i].cells[columnIndex].textContent;

    if (currentValue === previousValue) {
      table.rows[i].cells[columnIndex].style.display = 'none';
      rowSpan++;
      table.rows[i - rowSpan + 1].cells[columnIndex].rowSpan = rowSpan;
    } else {
      rowSpan = 1;
      previousValue = currentValue;
    }
  }
}

基于数据属性的合并方案

使用HTML5数据属性可以更灵活地控制合并：

<div class="merge-group" data-merge-key="group1">
  <div class="item" data-merge-content="content1">Item 1</div>
  <div class="item" data-merge-content="content2">Item 2</div>
  <button class="merge-trigger">Merge</button>
</div>

document.querySelectorAll('.merge-trigger').forEach(button => {
  button.addEventListener('click', () => {
    const group = button.closest('.merge-group');
    const key = group.dataset.mergeKey;
    const items = group.querySelectorAll('.item');

    const mergedData = Array.from(items).map(item => 
      item.dataset.mergeContent).join(', ');

    items.forEach(item => item.remove());

    const mergedElement = document.createElement('div');
    mergedElement.className = 'merged-item';
    mergedElement.textContent = mergedData;
    group.insertBefore(mergedElement, button);
  });
});

动画效果的合并实现

为合并过程添加视觉反馈：

js实现点击实现合并

function mergeWithAnimation(selector) {
  const elements = document.querySelectorAll(selector);
  const targetPosition = elements[0].getBoundingClientRect();

  elements.forEach((el, index) => {
    if (index > 0) {
      const originalPosition = el.getBoundingClientRect();
      const clone = el.cloneNode(true);

      clone.style.position = 'absolute';
      clone.style.left = `${originalPosition.left}px`;
      clone.style.top = `${originalPosition.top}px`;
      clone.style.transition = 'all 0.5s ease';
      document.body.appendChild(clone);

      setTimeout(() => {
        clone.style.left = `${targetPosition.left}px`;
        clone.style.top = `${targetPosition.top}px`;
        clone.style.opacity = '0';

        setTimeout(() => {
          clone.remove();
          el.remove();
          if (index === elements.length - 1) {
            elements[0].textContent = Array.from(elements)
              .map(e => e.textContent).join(' ');
          }
        }, 500);
      }, 50);
    }
  });
}

这些方法提供了不同场景下的点击合并实现，可以根据具体需求选择或组合使用。

标签: js