Converting the text into a clickable Link

Question

I have a web application, which displays the result parsed from an XML file in the form of table using ajax. It is working good, but the thing is, the data in the XML file is mostly URLs but I am seeing the result in the form of text. I want that text to be made/converted into a clickable link so that it would make my life easier. Is there any code which would make it possible? If yes, please let me know where should I place it. That code is in ASPX page which also has the html code which is responsible for the style of my webpage..

 <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

Here is a more complete example to show you. This is adding a anchor tag with the URL inside your table when you are creating your <td> in the loop.

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>