今天在做定制插件的时候,遇到个给table表格中的行添加链接的问题,以前没有遇到过此需求,就参考了下别人写的代码,记录一下。

html给table中的行添加链接

给table表格中的行添加链接一般是使用的js代码来实现的,可以参考下面的示例!

例1:

给table表格的行添加链接

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        table{
            width: 400px;
            border-collapse: collapse;
        }
        td{
            padding: 0.6em;
            border: 1px solid #ccc;
        }
        tr{
            cursor: pointer;
        }
    </style>
</head>
<body>
<table>
    <!--在当前的页面打开链接-->
    <tr onclick="location.href='https://www.feiniaomy.com';">
        <td>内空一</td>
        <td>内空一</td>
        <td>内空一</td>
    </tr>
    <!--在新开的页面打开链接-->
    <tr onclick="window.open('https://www.feiniaomy.com');">
        <td>内空一</td>
        <td>内空一</td>
        <td>内空一</td>
    </tr>
</table>
</body>
</html>

例2:

给table表格的单元格添加链接

<table>
    <tr>
        <td onclick="location.href='https://www.feiniaomy.com';">我是链接</td>
        <td>内空一</td>
        <td>内空一</td>
    </tr>
    <tr>
        <td onclick="window.open('https://www.feiniaomy.com');">我是链接</td>
        <td>内空一</td>
        <td>内空一</td>
    </tr>
</table>

例3:

使用jquery插件来实现table表格行链接,并处理表格内含有的a链接的方法

<table>
    <tr data-url="http://baidu.com">
        <td >我是链接</td>
        <td>内空一</td>
        <td>内空一</td>
    </tr>
    <tr data-url="https://feiniaomy.com">
        <td>我是链接</td>
        <td>内空一</td>
        <td><a href="https://qq.com" target="_blank">这是链接</a></td>
    </tr>
    <tr>
        <td>我是链接</td>
        <td>内空一</td>
        <td>内空一</td>
    </tr>
</table>
<script>
    $('body').on('click','tr',function(){
        var url = $(this).attr('data-url');
        if ( url != undefined ){
        //  location.href = url;  //当前页打开
            window.open(url);  //新开页打开
        }
    });
    //点击表格中的a链接时,阻止冒泡事件
    $('body').on('click','tr td a',function(event){
        event.stopPropagation(); 
    });
</script>