html给table中的行或单元格加链接的方法

愿我们努力拼搏,征战沙场,不忘初心,努力成为一个浑身充满铜臭味的有钱人。

今天在做定制插件的时候,遇到个给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.rel="nofollow" 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.rel="nofollow" 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 rel="nofollow" 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>

本文html给table中的行或单元格加链接的方法到此结束。我是说阿里巴巴发现了金矿,那我们绝对不自我去挖,我们期望别人去挖,他挖了金矿给我一块就能够了。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
HTML标签之!DOCTYPE文档类型声明

如何使用html+css代码如何实现冰墩墩和雪容融效果

html中checkbox与radio样式美化的简单实例

div设置可编辑内容的方法

css设置placeholder的颜色样式的方法