为动态生成的表格行添加事件监听器，按单元格内容处理点击

我来帮你搞定这个动态表格行的点击事件需求～结合你提供的代码片段，这里给出两种适配不同场景的实现方案，尤其考虑到你后续要从数据库加载数据的需求。

推荐方案：事件委托（适配静态+动态数据） #

这种方式只需要给表格父元素绑定一次事件，不管是现在的静态数组，还是以后从数据库动态加载的新行，都能自动响应点击，非常灵活高效。

var routeTable = document.getElementById('routeTable');
var routes = [
 ['北京', '上海', '高铁', "https://example.com/route1"],
 ['上海', '广州', '飞机', "https://example.com/route2"],
 ['广州', '深圳', '动车', "https://example.com/route3"],
 ['深圳', '成都', '火车', "https://example.com/route4"],
];

// 生成表格内容
for (let r = 0; r < routes.length; r++) {
  const route = routes[r];
  const row = routeTable.insertRow();
  // 循环插入单元格，把URL存到行的自定义属性里（也可以隐藏URL列）
  for (let c = 0; c < route.length; c++) {
    const cell = row.insertCell();
    cell.textContent = route[c];
    // 如果是最后一列的URL，我们可以隐藏它，同时把值存在行的data属性中
    if (c === route.length - 1) {
      cell.style.display = 'none';
      row.dataset.routeUrl = route[c];
    }
  }
}

// 给表格绑定点击事件（事件委托）
routeTable.addEventListener('click', function(e) {
  // 找到被点击的行元素（点击单元格时向上追溯到tr）
  const targetRow = e.target.closest('tr');
  if (!targetRow) return; // 没点击到行的话直接返回

  // 获取当前行对应的URL
  const targetUrl = targetRow.dataset.routeUrl;
  if (targetUrl) {
    // 这里可以根据需求做操作：跳转页面/打开新窗口/弹窗详情等
    window.location.href = targetUrl;
    // 示例：打开新窗口 → window.open(targetUrl, '_blank');
    console.log('点击行，跳转地址：', targetUrl);
  }
});

备选方案：生成行时直接绑定事件（仅适合静态数据） #

如果暂时只处理静态数组，也可以在生成每行时直接绑定点击事件，代码更直观，但后续动态加行时需要重复绑定事件：

var routeTable = document.getElementById('routeTable');
var routes = [
 ['北京', '上海', '高铁', "https://example.com/route1"],
 ['上海', '广州', '飞机', "https://example.com/route2"],
];

// 生成表格并给每行绑定点击事件
for (let r = 0; r < routes.length; r++) {
  const route = routes[r];
  const row = routeTable.insertRow();
  const targetUrl = route[route.length - 1]; // 提取当前行的URL
  // 插入单元格
  for (let c = 0; c < route.length; c++) {
    const cell = row.insertCell();
    cell.textContent = route[c];
    if (c === route.length - 1) cell.style.display = 'none';
  }
  // 给当前行绑定点击逻辑
  row.addEventListener('click', function() {
    if (targetUrl) window.location.href = targetUrl;
  });
}

额外优化小技巧 #

给行加个hover效果，让用户知道这行可点击：

#routeTable tr:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

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