如何为<tr>元素添加链接以打开Turbo Frame

首先你之前的代码存在一个关键错误：获取data-link时用了$(this).parent().data("link")，但data-link是直接绑定在<tr>本身的，应该用$(this)来获取当前行的属性值。

下面是能实现需求的完整方案：

1. 修正HTML结构 #

确保<tr>标签上正确绑定所需属性：

<tr data-link="<%= project_path(@project) %>" data-turbo-frame="project_sidebar">
  <!-- 表格单元格内容 -->
</tr>

2. 编写正确的JS事件处理逻辑 #

替换原有JS代码，改用Turbo的API并指定目标Frame：

$("tr[data-link][data-turbo-frame]").on("click", function(e) {
  // 排除点击<tr>内部<a>标签时触发事件，避免冲突
  if ($(e.target).closest("a").length) return;

  const targetLink = $(this).data("link");
  const targetFrame = $(this).data("turbo-frame");
  
  Turbo.visit(targetLink, {
    frame: targetFrame,
    action: "replace" // 可根据需求选择replace/advance等动作类型
  });
});

核心说明 #

• 修正属性获取逻辑：直接从当前<tr>获取data-link和data-turbo-frame，之前的parent()调用会导致获取错误的属性值，这也是你之前Turbo.visit无效的主要原因。
• 增加内部链接排除逻辑：避免点击表格内的<a>标签时触发整行跳转，保证原有链接的正常功能。
• 指定Turbo Frame参数：在Turbo.visit的配置项中传入frame参数，Turbo就会将请求内容加载到对应ID的Turbo Frame中，而非全局页面跳转。

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