如何让表格第一列的每一行可点击以获取整行数据？JavaScript

步骤1：修正HTML结构并添加详情容器 #

先修复原HTML中错误的表格嵌套（tbody不能放在tr内部），同时新增一个用于展示订单详情的容器：

<div class="datatable">
    <div class="datatablecontent">
        <table class="jsontable">
            <thead>
                <tr id="jsontr">
                    <th>订单ID</th>
                    <th>客户ID</th>
                    <th>客户</th>
                    <th>发票地址</th>
                    <th>配送地址</th>
                    <th>配送日期</th>
                    <th>负责销售</th>
                </tr>
            </thead>
            <tbody id="jsonTable"></tbody>
        </table>
    </div>
</div>
<!-- 新增订单详情展示容器 -->
<div class="order-details">
    <h3>订单详情</h3>
    <div id="detailsContent">请选择一个订单查看详情</div>
</div>

步骤2：修改JavaScript代码，添加点击交互与详情渲染 #

调整原printData函数，给订单ID列添加可点击标记，通过事件委托绑定点击事件，同时编写详情渲染逻辑：

// 全局存储订单数据，用于点击时快速查询
let orderData;

function printData(jsonData) {
    orderData = jsonData;
    const myTable = document.getElementById("jsonTable");
    // 先清空表格，避免重复渲染数据
    myTable.innerHTML = "";
    
    for(let i = 0; i < jsonData.length; i++) {
        const row = `<tr>
                        <td class="clickable-order-id" data-orderid="${jsonData[i].orderid}">${jsonData[i].orderid}</td>
                        <td>${jsonData[i].customerid}</td>
                        <td>${jsonData[i].customer}</td>
                        <td>${jsonData[i].invaddr}</td>
                        <td>${jsonData[i].delivaddr}</td>
                        <td>${jsonData[i].deliverydate}</td>
                        <td>${jsonData[i].respsalesperson}</td>
                      </tr>`;
        myTable.innerHTML += row;
    }

    // 事件委托绑定点击事件，比逐个td绑定更高效
    myTable.addEventListener('click', function(e) {
        if(e.target.classList.contains('clickable-order-id')) {
            const targetOrderId = e.target.dataset.orderid;
            showOrderDetails(targetOrderId);
        }
    });
}

// 渲染选中订单的详情内容
function showOrderDetails(orderId) {
    const detailsContainer = document.getElementById('detailsContent');
    // 根据订单ID查找对应数据
    const targetOrder = orderData.find(item => item.orderid === orderId);
    
    if(targetOrder) {
        // 按需渲染更多字段，这里示例展示全部现有字段
        detailsContainer.innerHTML = `
            <p><strong>订单ID:</strong> ${targetOrder.orderid}</p>
            <p><strong>客户ID:</strong> ${targetOrder.customerid}</p>
            <p><strong>客户名称:</strong> ${targetOrder.customer}</p>
            <p><strong>发票地址:</strong> ${targetOrder.invaddr}</p>
            <p><strong>配送地址:</strong> ${targetOrder.delivaddr}</p>
            <p><strong>配送日期:</strong> ${targetOrder.deliverydate}</p>
            <p><strong>负责销售:</strong> ${targetOrder.respsalesperson}</p>
        `;
    } else {
        detailsContainer.innerHTML = '<p>未找到该订单的详情信息</p>';
    }
}

步骤3：添加CSS优化交互体验 #

给可点击的订单ID添加样式，让用户能直观识别可交互元素：

.clickable-order-id {
    color: #007bff;
    cursor: pointer;
    text-decoration: underline;
}

.clickable-order-id:hover {
    color: #0056b3;
}

.order-details {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
}

说明 #

• 采用事件委托代替逐个绑定点击事件，在订单数据量大时性能更优
• 通过data-orderid属性存储订单ID，避免HTML中拼接复杂逻辑
• 全局变量orderData缓存原始数据，点击时可快速匹配对应订单详情

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