table的tr设置为类似于button的形式

Question

问题描述

将table的tr设置为类似于按钮的形式，因为之前已经将数据拼接到table中的tr td中，所以想在不动table的前提下，用其他方式模拟这种形式

问题出现的环境背景及自己尝试过哪些方法

尝试过在tr中加<buttton>但是貌似不可以，非要用div代替table才能实现这种功能吗？望走过的大佬关照一下前端小白

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
此代码是html的table

    <table style="border:0">
        <thead>
        <tr>
            <td class="roadName">名称<br>（方向）</td>
            <td class="speed">时速<br>（km/h）</td>
            <td class="jamLen">拥堵长度<br>（km）</td>
            <td class="jamM">拥堵时长<br>（min）</td>
        </tr>
        </thead>
        <tbody id="my_tbody"></tbody>
    </table>

此代码是用js拼接的table数据

    strTT += `<tr>
            <td style="font-size:16px;font-weight:bold;" title="${data[i].sename}">${data[i].ename.substring(0, 7)}</td>
            <td></td>
            <td></td>
            <td style="font-weight:bold;font-size:14px;color:red;">${data[i].jamstatus}</td>
            </tr>`;

             strTT += `<tr>
            <td style="font-size:11px;border-bottom:1px dashed black; title="${data[i].sename}"">${data[i].sename.substring(0, 10)}</td>
            <td style="border-bottom:1px dashed black;">${data[i].speed}</td>
            <td style="border-bottom:1px dashed black;">${data[i].len}</td>
            <td style="border-bottom:1px dashed black;">${data[i].time}</td>
            </tr>`

你期待的结果是什么？实际看到的错误信息又是什么？

大概就是点击整个tr可以触发onclick事件

Answer 1

<tr onclick="Fun()"></tr>