2017-10-23 4 views
0

So habe ich eine URL, die angezeigt wird, wenn es in einer Javascript-Tabelle vorhanden ist.Javascript Anzeige URL als Hyperlink

Ich möchte, dass diese URL ein Hyperlink ist, auf den der Benutzer klicken kann, aber nicht ganz bekommen kann.

Ich habe versucht, aber kann es nicht richtig und kann es nicht zur Arbeit bekommen. Jede Hilfe wäre willkommen.

Es ist wahrscheinlich etwas einfach, aber mein Kopf ist gebraten jetzt

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

Antwort

0

Wechsel:

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

zu

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

aktualisierenden blank Urls

Griff

Wechsel:

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

zu

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

Ich wusste, dass ich Stupi d wurde zu sein!. Ich habe Variationen versucht, aber nie die richtige Kombination gefunden. Danke –

+0

Seien Sie sich bewusst, wenn URL leer ist, erhalten Sie '' IOW: ein leeres Anchor-Tag, wird höchstwahrscheinlich keine Probleme verursachen, aber etwas zu beachten. – Keith

+0

Ich aktualisierte meine Antwort, um eine leere href zu behandeln. Vielen Dank! –