【问题标题】:Open table row on new window?在新窗口上打开表格行?
【发布时间】:2015-07-03 07:23:44
【问题描述】:

我有一张这样的桌子:

<tr>
  <td><a href="http://www.example.com/">example</a></td>
  <td>another cell</td>
  <td>one more</td>
</tr>

我正在使用这个 Javascript 代码:

$('tr').click( function() {
    window.location = $(this).find('a').attr('href');
}).hover( function() {
    $(this).toggleClass('hover');
});

这个 Javascript 工作正常,可以点击并打开一个完整的行,但我想在新窗口上打开选定大小的表格行链接。

我也有这个代码:

<td><a href="www.example.com" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,width=1000,height=600'); return false;">Example</a></td>

但它仅适用于定义的表格单元格。 那么如何在完整的行上创建链接,当用户单击该行时,它将在新窗口中以定义的大小打开?

【问题讨论】:

  • 您已经拥有在 onclick 属性中打开窗口的 javascript。将此移动到您的 jQuery 单击处理程序。 ?

标签: javascript html-table


【解决方案1】:

1) 从表行中删除所有onclick="。现在应该是这样的:

<td><a href="http://www.example.com">Example</a></td>

2) 更改 jQuery 中的 .click(。不要忘记返回false,否则链接会同时在新窗口和当前窗口打开。

$('tr, tr a').click( function() {
    window.open($(this).find('a').attr('href'),'targetWindow','toolbar=no,location=no,status=no,width=1000,height=600');
    return false;
})

【讨论】:

    【解决方案2】:

    除非我误解了你的问题,否则这会解决问题(结合你的 sn-ps):

    $('tr').click( function() {
         window.open($(this).find('a').attr('href'),'targetWindow','toolbar=no,location=no,status=no,width=1000,height=600');
    }).hover( function() {
        $(this).toggleClass('hover');
    });
    

    【讨论】:

      【解决方案3】:

      您可以添加一个标志来区分不同的行为。

       <tr><td><a href="http://demo.com">demo</a></td></tr>
       <tr data-flag="newWindow"><td><a href="http://demo2.com">demo2</a></td></tr>
      

      然后

      $('tr').click( function(e) {
      
          if($(this).attr('data-flag') == "newWindow") {
              window.open($(this).find('a').attr('href'),'targetWindow','toolbar=no,location=no,status=no,width=1000,height=600');
          } else {
               window.location = $(this).find('a').attr('href');
          }
      });
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-03-24
        • 1970-01-01
        • 1970-01-01
        • 2020-12-20
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多