javascript - 如何根据 Url 中的查询字符串以编程方式更改 Url

标签 javascript jquery html asp.net

GridView生成为表格:

<table id="ctl00_centerContent_GridView1">
        <tr>
            <th scope="col">
                <!-- COLUMN INFORMATION -->
            </th>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=908">Insurance 1</a></td> <!-- link color by default is blue and turns orange on hover -->
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=542">Insurance 2</a></td>
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=587">Insurance 3</a></td>
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=125">Insurance 4</a></td>
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
</table>

如何添加一个 JQuery 脚本，该脚本从每一行获取 url 并检查 ccid值，如果它是 542或587 ，那么链接不应链接到任何地方，字体颜色应为黑色，光标应为默认值(箭头)。

例如，对于第二行，<a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=542">Insurance 2</a>应该是<a href="javascript:void(0);" style="color: #000; cursor: default;">Insurance 2</a>

脚本(开始编写但需要一些帮助):

$("#ctl00_centerContent_GridView1 tr td").each(function() {
    var url = $(this).attr("href");
    var cid = getParameterByName('ccid');
    /* HOW CAN I REPLACE THE URL OF THE ANCHOR to "javascript:void(0);" IF "cid" is 542 or 587? */
    $(this).closest('a').css('color', 'black'); //will this work?
    $(this).closest('a').css('cursor', 'default'); //will this work?
});

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
  • 如何将 anchor 的网址替换为 Javascript:void(0);如果 cid是 542 或 587。
  • 如何将文本颜色更改为黑色并将光标更改为默认值 箭头。

最佳答案

您可以使用.attr设置属性(也不需要两次调用.css):

$(this).closest('a')
       .attr('href','javascript:void(0)')
       .css({color:'black',cursor:'default'});
<小时/>

您的代码需要进行一些更改才能完成您想要的操作，因为当前它在当前页面的 url 中查找 ccid 变量 - 而不是href 属性。

首先，将 each 更改为仅查看 a 元素:

$("#ctl00_centerContent_GridView1 tr td a").each(function() {
----------------------------------------^ here

接下来，更改您的 getParameterByName 以获取您要查找的网址和参数:

function getParameterByName(url, name) {
    console.log(url)
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(url);
    return results ? decodeURIComponent(results[1].replace(/\+/g, " ")) : "";
}

最后，如果 ccid 符合您的要求，则将您的代码更改为仅执行此答案中最初指定的操作(请注意删除 closest('a') 作为我们现在只查看 a 元素):

$("#ctl00_centerContent_GridView1 tr td a").each(function() {
    var url = $(this).attr("href");
    var cid = getParameterByName(url, 'ccid');
    if (cid == "542" || cid == "587"){
        $(this)
            .attr('href','javascript:void(0)')
            .css({color:'black',cursor:'default'});
    }
});

下面的实例。

$("#ctl00_centerContent_GridView1 tr td a").each(function() {
    var url = $(this).attr("href");
    var cid = getParameterByName(url, 'ccid');
    if (cid == "542" || cid == "587"){
        $(this)
       		.attr('href','javascript:void(0)')
       		.css({color:'black',cursor:'default'});
    }
});

function getParameterByName(url, name) {
    console.log(url)
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(url);
    return results ? decodeURIComponent(results[1].replace(/\+/g, " ")) : "";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="ctl00_centerContent_GridView1">
        <tr>
            <th scope="col">
                <!-- COLUMN INFORMATION -->
            </th>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=908">Insurance 1</a></td> <!-- link color by default is blue and turns orange on hover -->
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=542">Insurance 2</a></td>
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=587">Insurance 3</a></td>
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td style="font-weight:bold;"><a href="icard.aspx?cid=34&amp;cpid=345&amp;ccid=125">Insurance 4</a></td>
            <td align="center">&nbsp;</td>
            <td align="center">Y</td>
            <td>908 as ave</td>
            <td align="center">N</td>
            <td align="center">N</td>
            <td align="center">Y</td>
            <td>Electronic</td>
            <td style="white-space:nowrap;">090-093-2311</td>
            <td>&nbsp;</td>
        </tr>
</table>

关于javascript - 如何根据 Url 中的查询字符串以编程方式更改 Url，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32358066/

上一篇：javascript - 更改父类的功能未按预期工作

下一篇：javascript - 通过id更新多维数组？

相关文章：

c# - 网络网格中的可点击行，使用 razor/javascript

javascript - 距坐标最近的街景照片

javascript - scala Liftweb - 检索标签的内容

javascript - Jquery 不适用于通过 AJAX 调用的 HTML 标签

python - flask 不读取或解释 css 文件

html - 如何防止文本区域重叠

javascript - 通过辅助功能扩展定位器剧作家

javascript - 静止图像重​​叠 jquery 图像幻灯片

jquery - 获取数组中的背景颜色？

html - 从html中获取具体内容并在Perl中打印到txt文件

©2024 IT工具网  联系我们