HTML表格点击按钮复制数据库输出对应行功能失效求助

问题核心原因 #

• HTML规范要求页面内元素id必须唯一，你所有表格都复用了id="tabelle"，浏览器执行document.getElementById('tabelle')时只会返回第一个匹配的元素（也就是你单独写的表头表格），所以永远只能复制表头。
• 你将表头和每一条数据都拆成了独立的<table>元素，既会导致列宽对齐异常，也提升了行内容提取的成本。

修复方案 #

1. 调整逻辑说明

把表头和所有数据行合并到同一个<table>中，同时修改按钮点击事件，直接获取当前按钮所属的行元素，不再通过固定id查找，即可实现点击按钮复制对应行内容的需求。

2. 完整修改后代码

PHP后端代码

<?php
// 输出表头和表格容器
echo '<table id="tabelle" border="1" cellspacing="0" cellpadding="2" style="table-layout:fixed;">';
echo '<tr>';
echo '<th style="width: 15%">Übertragen</th>';      
echo '<th style="width: 12%">Datum</th>';
echo '<th style="width: 8%">Uhrzeit</th>';
echo '<th style="width: 50%">Von</th>';
echo '<th style="width: 50%">Nach</th>';
echo '<th style="width: 7%">Pa.</th>';
echo '<th style="width: 8%">Preis</th>';
echo '<th style="width: 7%">BZ</th>';
echo '<th style="width: 25%">Kunde</th>';
echo '<th style="width: 18%">Telefonnr.</th>';
echo '<th style="width: 20%">Fahrer</th>';
echo '<th style="width: 20%">Unternehmer</th>';
echo '<th style="width: 10%">Prov.</th>';
echo '<th style="width: 50%">Nachricht</th>';
echo '<th style="width: 12%">Datum</th>';
echo '</tr>';

// 循环输出数据行
foreach ($nachrichten as $nachricht){
    echo '<tr class="data-row">';
    // 复制按钮：点击时将当前tr元素传入复制函数
    echo '<td style="width: 15%;"><div style="width: 100%; height: 100%; overflow : auto;"><button onclick="copyRow(this.closest(\'tr\'))">Kopieren</button></td>';   
    
    sscanf($nachricht->datu, "%4s-%2s-%2s", $j, $m, $t);
    echo '<td style="width: 12%"><div style="width: 100%; height: 100%; overflow : auto;">'. $t . '.' . $m . '.' . $j .'</td>';
    echo '<td style="width: 8%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->uhrzeit .'</td>';
    echo '<td style="width: 50%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->von .'</td>';
    echo '<td style="width: 50%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->nach .'</td>';
    echo '<td style="width: 7%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->personenanzahl .'</td>';
    echo '<td style="width: 8%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->preis .'</td>';
    echo '<td style="width: 7%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->bezahlart .'</td>';
    echo '<td style="width: 25%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->kunde .'</td>';
    echo '<td style="width: 18%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->telefonnummer .'</td>';
    echo '<td style="width: 20%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->fahrer .'</td>';
    echo '<td style="width: 20%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->unternehmer .'</td>';
    echo '<td style="width: 10%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->provision .'</td>';
    echo '<td style="width: 50%"><div style="width: 100%; height: 100%; overflow : auto;">'.$nachricht->nachricht .'</td>';
    sscanf($nachricht->datum, "%4s-%2s-%2s", $jahr, $monat, $tag);
    echo '<td style="width: 12%"><div style="width: 100%; height: 100%; overflow : auto;">'. $tag . '.' . $monat . '.' . $jahr .'</td>';
    echo '</tr>';
}
echo '</table>';
?>

前端JS代码（放在页面任意位置即可）

<script>
function copyRow(rowElement) {
    // 提取行内所有单元格的文本内容，用制表符分隔方便粘贴到Excel等工具
    let rowText = Array.from(rowElement.cells)
        // 跳过第一个单元格（按钮所在列），如果需要包含按钮列可以删掉下面的.slice(1)
        .slice(1)
        .map(cell => cell.textContent.trim())
        .join('\t');
    
    // 写入剪贴板
    navigator.clipboard.writeText(rowText).then(() => {
        // 可选：复制成功提示，1秒后恢复原按钮文本
        const copyBtn = rowElement.querySelector('button');
        const originalText = copyBtn.textContent;
        copyBtn.textContent = '已复制';
        setTimeout(() => copyBtn.textContent = originalText, 1000);
    }).catch(err => {
        console.error('复制失败:', err);
    });
}
</script>

如果要保留你原来的单行单表格结构，只需要把按钮的点击事件改成onclick="selectElementContents(this.closest('table'))"即可，不需要修改其他结构，但还是建议合并为同一个表格，显示效果更统一。

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