html - CSS で id なしで各要素を識別する

Question

以下のサンプル HTML から、CSS で各<td>要素にクリック イベントを追加することは可能ですか? またはCSSでどの<td>要素がクリック/ホバーされているかを識別しますか? <td>列内の数を増やすことができます。

<table>
<tr class="tr-format">
    <td>
        Data1
        <div>PopUp</div>
    </td>
    <td>
        Data2
        <div>PopUp</div>
    </td>
</tr>
<tr class="tr-format">
    <td>
        Data1
        <div>PopUp</div>
    </td>
    <td>
        Data2
        <div>PopUp</div>
    </td>
</tr>
</table>

をクリックすると、PopUp または PopOver を表示する予定です。<td>これらのポップアップには、それぞれの異なるデータが含まれます<td>。

Answer 1

これを試して：

$(".tr-format td").each().on('click', function() { /**magic here**/ });

Answer 2

.tr-format td このセレクターを CSS に使用します。イベントを添付するには、Javascript または Jquery が必要です。

$('.tr-format td').on('click',function(){//do something here });