动态生成表格<td>值保存至列表的代码问题求助

我通过API获取数据并填充到表格中，为每一行动态添加了保存按钮。希望点击该按钮时，将该行第一个表格单元格（<td>）的值保存到列表中，后续可存入本地存储或数据库。

以下是我的代码：

jQuery(function ($) { 
  $(document).on('click', '#save-btn', function () { 
    console.log("Clicked!"); 
    mytr = $(this).closest("tr"), 
    mytd = mytr.find("td:first-child"); 
    $.each(mytd, function () { 
      console.log($(this).text()); 
      $('.saved-list').append(`'<li>'`+mytd+`'</li>'`); 
    }); 
  }); 
});

目前我能在控制台正确输出对应的值，但无法将值追加到目标列表中，页面显示内容为[object Object]，恳请协助解决该问题。

问题原因分析 #

你看到的[object Object]是因为直接把jQuery对象mytd当成字符串进行拼接了——当你把一个JavaScript对象和字符串相加时，它会自动调用对象的toString()方法，而jQuery对象的toString()返回的就是[object Object]。另外，这里的$.each其实是多余的：mytr.find("td:first-child")只会返回当前行的第一个<td>元素，是单个元素的jQuery对象，不需要循环遍历。

解决方案 #

修改代码，核心是拿到单元格的文本内容而非jQuery对象，同时简化不必要的循环：

jQuery(function ($) { 
  $(document).on('click', '#save-btn', function () { 
    console.log("Clicked!"); 
    // 获取当前按钮所在的行
    const mytr = $(this).closest("tr"); 
    // 获取该行第一个td的文本内容（trim()去除多余空格）
    const tdText = mytr.find("td:first-child").text().trim(); 
    
    // 把文本内容追加到列表中
    $('.saved-list').append(`<li>${tdText}</li>`); 
  }); 
});

关键修改点说明 #

1. 获取文本内容：用.text()方法拿到单元格的实际文本，而不是直接操作mytd这个jQuery对象；加上.trim()可以避免文本前后的多余空格影响显示。
2. 简化循环：去掉不必要的$.each，因为我们只需要单个单元格的内容。
3. 修正模板字符串写法：模板字符串（`...`）可以直接包裹HTML结构，不需要手动转义</>，也不需要用多余的单引号拼接，直接用${变量名}插入文本即可。

现在点击保存按钮，就能正确把单元格的文本内容追加到目标列表里了，后续你可以把这个文本存入本地存储（比如localStorage.setItem()）或者数据库。

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