求助：使用jQuery实现点击表格TD弹出含其ID的Alert功能

问题背景 #

需创建至少5行2列的表格，点击每个<td>元素时弹出显示该元素ID的alert对话框，现有代码无法实现此功能。

现有代码问题分析 #

• 所有<td>元素未设置id属性，无法获取对应ID值
• 未引入jQuery库（现有代码使用jQuery语法但未加载库，会导致执行报错）
• 未给<td>元素绑定点击事件的处理逻辑

修改后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>João Augusto</title>
  <meta charset="utf-8">
  
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <!-- 引入jQuery库 -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

</head>
<body>

<div class="p-5 text-black text-center bg-roxo">
  <h1 id="titulo">João Augusto</h1>
</div>

<div class="container mt-5">
    <div class="container">

        <div class="container">
            <h1 class="page-header">Tabela dinâmica</h1>
            
            <table id="details-table" class="table table-bordered">
              <tr>
                <th>Nome</th>
                <th>Idade</th>
                <th>CPF</th>
                <th>Email</th>
                <th>Opções</th>
              </tr>
              <tr>
                <td id="td-nome-1">&nbsp;</td>
                <td id="td-idade-1">&nbsp;</td>
                <td id="td-cpf-1">&nbsp;</td>
                <td id="td-email-1">&nbsp;</td>
                <td id="td-opcoes-1">
                  <button type="button" onclick="remove(this)" class="btn btn-danger btn-xs">Excluir</button> 
                  <input type="button" onclick="funcao1()" value="Exibir Alert" /> 
                </td>
            </tr>
              <tr>
                <td id="td-nome-2">&nbsp;</td>
                <td id="td-idade-2">&nbsp;</td>
                <td id="td-cpf-2">&nbsp;</td>
                <td id="td-email-2">&nbsp;</td>
                <td id="td-opcoes-2">
                  <button type="button" onclick="remove(this)" class="btn btn-danger btn-xs">Excluir</button>
                </td>
              </tr>
              <tr>
                <td id="td-nome-3">&nbsp;</td>
                <td id="td-idade-3">&nbsp;</td>
                <td id="td-cpf-3">&nbsp;</td>
                <td id="td-email-3">&nbsp;</td>
                <td id="td-opcoes-3">
                  <button type="button" onclick="remove(this)" class="btn btn-danger btn-xs">Excluir</button>
                </td>
              </tr>
              <tr>
                <td id="td-nome-4">&nbsp;</td>
                <td id="td-idade-4">&nbsp;</td>
                <td id="td-cpf-4">&nbsp;</td>
                <td id="td-email-4">&nbsp;</td>
                <td id="td-opcoes-4">
                  <button type="button" onclick="remove(this)" class="btn btn-danger btn-xs">Excluir</button>
                </td>
              </tr>
              <tr>
                <td id="td-nome-5">&nbsp;</td>
                <td id="td-idade-5">&nbsp;</td>
                <td id="td-cpf-5">&nbsp;</td>
                <td id="td-email-5">&nbsp;</td>
                <td id="td-opcoes-5">
                  <button type="button" onclick="remove(this)" class="btn btn-danger btn-xs">Excluir</button>
                </td>
              </tr>
            </table>
          </div>
    </div>
    <script type="text/javascript" src="js/functions.js"></script>
</body>
</html>

JavaScript代码（js/functions.js） #

(function($) {
    $(document).ready(function() {
        // 给表格内所有<td>绑定点击事件
        $('#details-table td').on('click', function() {
            const tdId = $(this).attr('id');
            alert(`ID do elemento: ${tdId}`);
        });

        // 保留原有删除行功能
        window.remove = function(item) {
            var tr = $(item).closest('tr');
            tr.fadeOut(400, function() {
                tr.remove();  
            });
            return false;
        }
    });
})(jQuery);

function funcao1() {
    alert("Olá!");
}

修改说明 #

• 引入jQuery库：在<head>中添加jQuery的CDN链接，确保jQuery语法能正常执行
• 添加的ID属性：给每个<td>设置唯一ID，格式为td-列名-行号，保证元素ID不重复
• 绑定点击事件：在$(document).ready()中，通过jQuery选择器选中目标表格内的所有<td>，绑定click事件，点击时获取当前元素的ID并弹出alert
• 修复函数作用域：将remove函数挂载到window对象上，确保HTML中的onclick="remove(this)"能正常调用原有删除功能

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