JQuery之在不同的a標籤中添加不同的href屬性值（Part5）

最新推荐文章于 2024-04-26 15:46:49 发布

那是遇知吧

最新推荐文章于 2024-04-26 15:46:49 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript插件库

本文链接：https://blog.youkuaiyun.com/weixin_41406727/article/details/88970022

javascript插件库专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了如何在工作中处理一个需求，即在HTML table中使用JQuery为带有相同class的a标签动态添加不同的href属性，实现点击后跳转到不同链接的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在工作中遇到一個案列就是要在一個table中添加中添加a標籤要帶有跳轉功能，在相同的class名跳轉為相同的href的簡單功能。

HTML:

 <div class="banner_div">
        <table border="1">
            <tr>
                <td rowspan="2">week</td>
                <td><a class="link0">w1</a></td>
                <td><a class="link0">30000</a></td>
                <td><a class="link0">28900</a></td>
                <td><a class="link1">w2</a></td>
                <td><a class="link1">5000</a></td>
                <td><a class="link1">2550</a></td>
            </tr>
            <tr>
                <td><a class="link0">w3</a></td>
                <td><a class="link0">20000</a></td>
                <td><a class="link0">17500</a></td>
                <td><a class="link1">w4</a></td>
                <td><a class="link1">5000</a></td>
                <td><a class="link1">2550</a></td>
            </tr>
            <tr>
                <td rowspan="2">month(月)</td>
                <td><a class="link2">m1</a></td>
                <td><a class="link2">30000</a></td>
                <td><a class="link2">28900</a></td>
                <td><a class="link3">m3</a></td>
                <td><a class="link3">5000</a></td>
                <td><a class="link3">2550</a></td>
            </tr>
            <tr>
                <td><a class="link2">m2</a></td>
                <td><a class="link2">20000</a></td>
                <td><a class="link2">17500</a></td>
                <td><a class="link3">m4</a></td>
                <td><a class="link3">5000</a></td>
                <td><a class="link3">2550</a></td>
            </tr>
        </table>
    </div>

script:

  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <script>
        $(document).ready(function () {
            $("table tr td a").mousemove(function () {
                $(this).attr('target', '_blank');
            }); 
            var jsonDateone = [
                { classname:'link0', hrefs: 'https://www.baidu.com/' },
                { classname: 'link1', hrefs: 'https://www.baidu.com1/' },
                { classname: 'link2', hrefs: 'https://www.baidu.com2/' },
                { classname: 'link3', hrefs: 'https://www.baidu.com3/' }                        
            ];
            $("table tr td a").mousemove(function () {               
                for (let i = 0; i < 28; i++) {
                    var aname = "link" + i;
                    if (aname == jsonDateone[i].classs) {
                        $('.' + aname).attr('href', jsonDateone[i].hrefs)
                    }

                };
            })  
        })
    </script>

鼠標還沒劃過之前：