将文本转换为可点击的链接

Question

我有一个 Web 应用程序，它使用 ajax 以表格的形式显示从 XML 文件解析的结果。它运行良好，但问题是，XML 文件中的数据主要是 URL，但我看到的是文本形式的结果。我希望将该文本制作/转换为可点击的链接，以便让我的生活更轻松。是否有任何代码可以使它成为可能？如果是，请让我知道我应该把它放在哪里。该代码在 ASPX 页面中，该页面也有负责我网页样式的 html 代码..

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="Scripts/jquery-3.2.1.js"></script>
<script language="javascript" type="text/javascript">
    var CheckImage = "<img src='images/check.png' height='25' width='25'>";
    var CrossImage = "<img src='images/cross.png' height='25' width='25'>";
    var Fail = "<img src='images/fail.png' height='25' width='30'>";
    setInterval(url, 100);
    setInterval(redirects, 100);
    function url()
    {
     $.ajax(
            {

                url: "/XMLFile.xml",
                type: "GET",
                dataType: "xml",
                cache: false,
                success: function (xml)
                {

                    var tableContent1 = "<table border='1' cellspacing='0' cellpadding='5'>" +
                        "<tr>" +
                        "<th>SiteName</th>" +
                        "<th>URLType</th>" +
                        "<th>DNSStatus</th>" +
                        "<th>TargetStatus</th>" +
                        "<th>TTL</th>" +
                        "<th>SSL</th>" +
                        "<th>Force</th>" +
                        "</tr>";

                    $(xml).find('ProdURL').each(function ()
                    {

                        tableContent1 += "<tr>" +
                            "<td>" + $(this).attr('ProdHost') + "</td>" +
                            "<td>" + $(this).attr('URLType') + "</td>" +
                            "<td>" + ($(this).attr('DNSStatus') == "OK" ? CheckImage : CrossImage) + "</td>" +
                            "<td>" + ($(this).attr('TargetStatus') == "OK" ? CheckImage : CrossImage) + "</td>" +
                            "<td>" + $(this).attr('TTL') + "</td>" +
                            "<td>" + ($(this).attr('SSL') == "OK" ? CheckImage : CrossImage) + "</td>" +
                            "<td>" + $(this).attr('Force') + "</td>" +                           
                            "</tr>";
                    });

                    tableContent1 += "</table>";
                    $("#UpdatePanel").html(tableContent1)
                    getdata(tableContent1);
                }    
            });         
    }  
    function redirects()
    {
       //this ajax code parses the information from XML file and displays it on the table
        $.ajax(
            {
               //If the name of the XML file is changed, make sure to update that in the url:
                url: "/XMLFile.xml",
                type: "GET",
                dataType: "xml",
                contentType:"url",
                cache: false,
                success: function (xml)
                {


                var tableContent2 = "<table border='5' cellspacing='1' cellpadding='10'>" +
                "<tr>" +
                "<th>URL</th>" +
                "<th>Target</th>" +
                "<th>Status</th>" +
                "</tr>";

                    $(xml).find('Redirect').each(function ()
                    {
                        tableContent2 += "<tr>" +
                            "<td>" + $(this).attr('URL')+ "</td>" +
                            "<td>" + $(this).attr('Target') + "</td>" +
                            "<td>" + ($(this).attr('Status') == "Fail" ? Fail : CheckImage && $(this).attr('Status') == "OK" ? CheckImage : CrossImage) + "</td>" +
                            "</tr>";

                    });

                    tableContent2 += "</table>";
                    $("#UpdatePanel1").html(tableContent2)
                    getdata(tableContent2);

                }

            });
    }

Answer 1

这里有一个更完整的示例来向您展示。当您在循环中创建 <td> 时，这是在表格中添加带有 URL 的锚标记。

let tableContent2 = "";

$("div").each(function() {
  tableContent2 += "<tr>" +
    "<td> <a href='" + $(this).attr('URL') + "'>" + $(this).attr('URL') + "</a></td>" +
    "<td>" + $(this).attr('Target') + "</td>" +
    "<td>" + $(this).attr('Status') + "</td>" +
    "</tr>"
})

$("#UpdatePanel1").html(tableContent2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- this div is just for this example -->
<div URL="https://example.com" Target="I am a target" Status="OK"></div>

<table>
  <tbody id="UpdatePanel1">
  </tbody>
</table>