Javascript显示url作为超链接

时间:2017-10-23 16:27:14

标签: javascript html url hyperlink

所以我有一个URL,显示它是否存在于javascript表中。

我希望这个URL是一个超链接,用户可以点击但不能完全得到它。

我已经尝试但无法正确使用它无法使其正常工作。任何帮助将不胜感激。

它可能很简单,但我的脑袋现在已经油炸了

<script type="text/javascript">
    //var memos;

    if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari
        var xmlhttp = new XMLHttpRequest();
    } else { // IE6, IE5
        var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "memos.xml", false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML;
    memos = xmlDoc.getElementsByTagName("memo");  

    // Function to get values from xml and print in a table
    function showTable() {
        // For loop to iterate through each memo in XML. 
        for (var count = 0; count < memos.length; count++) {
            // Get attribute 'id' from xml and assign to id variable.
            id = memos[count].getAttribute("id");
            // Get element title from XML and get its value and assign to 'title' variable.
            title = memos[count].getElementsByTagName("title")[0].childNodes[0].nodeValue;
            sender = memos[count].getElementsByTagName("sender")[0].childNodes[0].nodeValue;
            recipient = memos[count].getElementsByTagName("recipient")[0].childNodes[0].nodeValue;
            date = memos[count].getElementsByTagName("date")[0].childNodes[0].nodeValue;
            message = memos[count].getElementsByTagName("message")[0].childNodes[0].nodeValue;
            urlNode = memos[count].getElementsByTagName("url")[0];
            //Check if URL element is empty. If empty then populate with "" else print out the URL value
            if (urlNode.hasChildNodes()) {
                url = urlNode.childNodes[0].nodeValue;
            } else {
                url = "";
            }
            // Print out the table
            document.write("<tr><td>" + id + "</td> " +
                " <td>" + title + "</td> " +
                " <td class='center'>" + sender + "</td> " +
                " <td class='center'>" + recipient + "</td> " +
                " <td class='center'>" + date + "</td> " +
                " <td class='center'>" + message + "</td> " +
                " <td class='center'>" + url + "</td></tr>");
        }
    }
</script>
</head>

<body>
    <h1>List of Memos!</h1>
    <br>

    <script type="text/javaScript">
        document.write("
        <h2 align='center'>There are currently " + memos.length + " memos altogether</h2>"); document.write("
        <br>");
    </script>

    <table class="table2">
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Sender</th>
            <th>Recipient(s)</th>
            <th>Date</th>
            <th>Message</th>
            <th>URL</th>
        </tr>

        <!-- Javascript to display the table -->
        <script type="text/javascript">
        <!-- Call the showTable function created in Javascript above -->
            showTable();
        </script>

    </table>

</body>

</html>

1 个答案:

答案 0 :(得分:0)

变化:

" <td class='center'>" + url + "</td></tr>");

" <td class='center'><a href='#" + url + "'>" + url  + "</a></td></tr>");

更新以处理空白网址

变化:

" <td class='center'>" + url + "</td></tr>");

" <td class='center'><a href='" + ((url == null || url == "")  ? "#" : url) + "'>" + url  + "</a></td></tr>");