Преобразование текста в интерактивную ссылку - PullRequest
Новая
       4

Преобразование текста в интерактивную ссылку

0 голосов
/ 07 декабря 2018

У меня есть веб-приложение, которое отображает результат, проанализированный из файла XML, в форме таблицы с использованием ajax.Это работает хорошо, но дело в том, что данные в 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);

                }

            });
    }

1 Ответ

0 голосов
/ 07 декабря 2018

Вот более полный пример, чтобы показать вам.Это добавление тега привязки с URL-адресом внутри таблицы при создании <td> в цикле. 

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>
...