在新窗口打开表格行?

时间:2015-07-03 07:23:44

标签: javascript html-table

我有一张表:

<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>

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

3 个答案:

答案 0 :(得分:2)

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;
})

答案 1 :(得分:0)

除非我误解了你的问题,否则这将解决问题(结合你的片段):

$('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');
});

答案 2 :(得分:0)

您可以为不同的行为添加标记。

 <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');
    }
});