实现复制表格<td>内容按钮遇错：copyText.select()不是函数

错误原因 #

1. 文本获取方式错误：<td>元素没有text属性，正确获取元素文本应使用textContent或innerText。
2. 字符串无select()方法：你拿到的copyText是字符串类型，而select()是<input>/<textarea>这类表单元素的专属方法，因此调用copyText.select()会触发is not a function错误。
3. 剪贴板写入逻辑错误：navigator.clipboard.writeText(copyText.text)中，copyText已经是字符串，无需再追加.text，否则会将undefined写入剪贴板。

修复方案 #

方案1：直接使用剪贴板API（推荐）

既然能直接获取目标文本，无需通过选中元素复制，直接调用剪贴板API写入即可：

function copyFunction() {
    // 获取目标元素文本，trim()去除冗余空格
    const copyText = document.getElementById("availCode").textContent.trim();
    console.log(copyText);
    
    // 写入剪贴板并处理结果
    navigator.clipboard.writeText(copyText)
        .then(() => {
            alert(`Copied the text: ${copyText}`);
        })
        .catch(err => {
            console.error('复制失败:', err);
            alert('复制失败，请手动复制');
        });
}

方案2：兼容旧浏览器（创建临时输入元素）

如果需要兼容不支持navigator.clipboard的旧环境，可创建临时<textarea>模拟选中复制：

function copyFunction() {
    const copyText = document.getElementById("availCode").textContent.trim();
    
    // 创建临时textarea并设置内容
    const tempTextarea = document.createElement('textarea');
    tempTextarea.value = copyText;
    // 隐藏临时元素避免影响页面
    tempTextarea.style.position = 'absolute';
    tempTextarea.style.left = '-9999px';
    document.body.appendChild(tempTextarea);
    
    // 选中文本（适配移动端）
    tempTextarea.select();
    tempTextarea.setSelectionRange(0, 99999);
    
    try {
        // 执行复制命令
        document.execCommand('copy');
        alert(`Copied the text: ${copyText}`);
    } catch (err) {
        console.error('复制失败:', err);
        alert('复制失败，请手动复制');
    }
    
    // 移除临时元素
    document.body.removeChild(tempTextarea);
}

额外HTML结构修正 #

你的HTML存在不符合规范的问题：<th>内部嵌套了<td>，这是不允许的（th和td均为表格单元格元素，不能互相嵌套）。建议将内部<td>替换为<div>，并把id="availCode"移至该div上，修正后代码如下：

<tr key={key} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
    <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
        {key + (pagesVisited - usersPerPage) + 1}{" "}
    </td>
    <th scope="row" className="flex items-center px-6 py-4 text-gray-900 whitespace-nowrap dark:text-white">
        <div 
            className="pl-3 text-base font-semibold" 
            id="availCode"
        >
            {tempoArray}
        </div>
    </th>
    <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
        <div className="flex items-center gap-1">
            <div className="flex h-2.5 w-2.5 rounded-full bg-green-500"></div>
            <div className="text-lg text-black"></div>
            {"AVAILABLE"}
        </div>{" "}
    </td>
    <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
        <div className="flex items-center justify-evenly">
            <button
                onClick={copyFunction}
                className="text-white bg-green-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
            >
                Copy
            </button>
            <button
                type="button"
                className="text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
            >
                Delete
            </button>
        </div>
    </td>
</tr>

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