Ist es möglich, JavaScript-Array-Elemente als Hyperlinks in einer HTML-Tabelle auszugeben?

Dies ist der Code, den ich bisher gemacht habe. Ich möchte die Websites verlinken, damit die Websites, wenn sie als HTML-Tabelle ausgegeben werden, klickbar sind und auf die entsprechenden Webseiten verweisen können.Ist es möglich, JavaScript-Array-Elemente als Hyperlinks in einer HTML-Tabelle auszugeben?

JavaScript:

var beds = new Array(3); 
beds[0] = ["Spring Mattress",  "http://factorymattresstexas.com/specials/spring-air/"]; 
beds[1] = ["Rest Lumbar Support", "http://factorymattresstexas.com/specials/beautyrest-lumbar-support"]; 
beds[2] = ["Beauty Rest", "http://factorymattresstexas.com/specials/simmons-beautyrest/"];

HTML:

var table = document.getElementById("table"); 
var body = document.createElement("tbody"); 

table.appendChild(tbody); 
beds.forEach(function(items) { 
    var row = document.createElement("tr"); 
    items.forEach(function(item) { 
     var cell = document.createElement("td"); 
     cell.textContent = item; 
     row.appendChild(cell); 
    }); 
    table.appendChild(row); 
}); 




<table id="table"> 
    <tr id="tbody"> 
    <th>Mattress Type</th> 
    <th>Link</th> 
    </tr> 
</table>

Quelle

2017-08-17 Andrew C

Wie stattdessen etwa auf den 'Text' für die Zelle Einstellung, ein Verbindungselement erstellen und anhängen, dass anstelle – musefan

Ja, es auf jeden Fall möglich ist. Weißt du, wie man einen einzelnen Link ('A'-Element) aus einer einzelnen Zeichenfolge erzeugt? –

Hier ist, was Sie gefragt, gerade einen a Tag mit Inhalt erstellen und ändern sein href-Attribut.

<html> 
    <body> 
    <table id="table"> 
     <tr id="tbody"> 
     <th>Mattress Type</th> 
     <th>Link</th> 
     </tr> 
    </table> 

    <script type="text/javascript"> 
    var table = document.getElementById("table"); 
    var body = document.createElement("tbody"); 

    var beds = new Array(3); 
    beds[0] = ["Spring Mattress",  "http://factorymattresstexas.com/specials/spring-air/"]; 
    beds[1] = ["Rest Lumbar Support", "http://factorymattresstexas.com/specials/beautyrest-lumbar-support"]; 
    beds[2] = ["Beauty Rest", "http://factorymattresstexas.com/specials/simmons-beautyrest/"]; 

    table.appendChild(tbody); 
    beds.forEach(function(items) { 
     var row = document.createElement("tr"); 
     var cell1 = document.createElement("td"); 
     cell1.textContent = items[0]; 
     row.appendChild(cell1); 

     var cell2 = document.createElement("td"); 
     var link = document.createElement("a"); 
     link.text = items[1] 
     link.href = items[1] 
     cell2.append(link) 

     row.appendChild(cell2); 

     table.appendChild(row); 
    }); 

    </script> 

    </body> 
</html>

EDIT:

Hier ist eine Version mit nur einer Spalte, wählen Sie diejenige, die Sie pref:

<html> 
    <body> 
    <table id="table"> 
     <tr id="tbody"> 
     <th>Mattress Type</th> 
     </tr> 
    </table> 

    <script type="text/javascript"> 
    var table = document.getElementById("table"); 
    var body = document.createElement("tbody"); 

    var beds = new Array(3); 
    beds[0] = ["Spring Mattress",  "http://factorymattresstexas.com/specials/spring-air/"]; 
    beds[1] = ["Rest Lumbar Support", "http://factorymattresstexas.com/specials/beautyrest-lumbar-support"]; 
    beds[2] = ["Beauty Rest", "http://factorymattresstexas.com/specials/simmons-beautyrest/"]; 

    table.appendChild(tbody); 
    beds.forEach(function(items) { 
     var row = document.createElement("tr"); 

     var cell = document.createElement("td"); 

     var link = document.createElement("a"); 
     link.text = items[0]; 
     link.href = items[1] 

     cell.append(link); 

     row.appendChild(cell) 

     table.appendChild(row); 
    }); 

    </script> 
    </body> 
</html>

Quelle

2017-08-17 15:44:25 Nolyurn

Ich verwende den Code, den Sie oben angegeben haben, aber ich bekomme eine Fehlermeldung: Objekt unterstützt keine Eigenschaft oder Methode 'append', die sich auf cell2 bezieht.append (link) –

Verwenden Sie appendChild statt anhängen, wenn es nicht funktioniert, habe ich meinen Code in Google Chrome getestet. – Nolyurn

Sie wollen würden ein "Anker" Element erstellen sie ein klickbaren Link zu machen.

var hyperlink = document.createElement("a"); 
    hyperlink.textContent = items[0]; 
    hyperlink.href = items[1];

Ich bin mir nicht sicher, warum Sie wollen zwei separate Spalten für diese, so etwas wie die oben wird von beds ein „Artikel“ Array nehmen und einen lesbaren, klickbaren Link von ihm.

Quelle

2017-08-17 15:43:26 BooDooPerson

Sie sollten ein Verbindungselement erstellen und an die Zelle anzuhängen, statt nur den Text:

beds.forEach(function(item) { 
    var row = document.createElement("tr"); 
    var cell = document.createElement("td"); 
    var cell2 = document.createElement("td"); 
    var link = document.createElement("a"); 

    cell.textContent = item[0]; 
    link.href = item[1]; 
    link.textContent = "click me"; 

    cell2.appendChild(link); 
    row.appendChild(cell); 
    row.appendChild(cell2); 
    table.appendChild(row); 
});

Here is a working example

Quelle

2017-08-17 15:43:30 musefan

Vielen Dank, dieser Code funktioniert großartig! Eine kurze Frage: Was ist, wenn ich mehr Elemente zwischen den Spalten 0 und 1 habe? Sagen wir zum Beispiel, ich hätte andere Attribute über die Matratzen wie Größe, Gewicht, Dicke usw. Wie würde ich alle diese Attribute in einer Tabelle ausgeben, bevor ich die URL ausspreche? –

Ich bin auch nicht in der Lage, den Textinhalt zu erhalten, um irgendwelche Informationen in der Tabelle auszugeben (leere Zelle), jedoch funktioniert der Hyperlink. –

@AndrewC: Wenn Sie mehr Spalten haben, dann fügen Sie einfach eine neue Zelle für jeden hinzu und fügen Sie ein, was Sie wollen. Sie können stattdessen "innerText" versuchen: 'link.innerText =" click me ";' zum Beispiel – musefan

dies versuchen. Ich gehe davon aus, dass Artikel [0] werden zurückkehren Namen und Artikel [1] werden Link

items.forEach(function(item) { 
    var table = '<tr id="tbody"><th>"' + item[0] + '</th>' 
    '<th><a href="'+item[1]+'">Link</a></th>' 
    '</tr>'; 
    table.appendChild(table); 
    });

Quelle

2017-08-17 15:52:54

Seine ist eine Bearbeitung von @BooDooPerson Antwort zurück.

Quelle

2017-08-17 15:54:02

Zuerst müssen Sie die Tabelle mit der spezifischen ID setzen, BEVOR Sie das Skript schreiben. Sie müssen zuerst die ID eingeben, bevor Sie sie suchen.

Hier ist meine Version, ich hoffe, ich habe nicht zu viel geändert.

<table id="table"></table> 

<script> 
var table = document.getElementById("table"); 

var beds = new Array(3); 
beds[0] = ["Spring Mattress",  "http://factorymattresstexas.com/specials/spring-air/"]; 
beds[1] = ["Rest Lumbar Support", "http://factorymattresstexas.com/specials/beautyrest-lumbar-support"]; 
beds[2] = ["Beauty Rest", "http://factorymattresstexas.com/specials/simmons-beautyrest/"]; 

var addHTML = ` 
       <tr id="tbody"> 
       <th>Mattress Type</th> 
       <th>Link</th> 
       </tr> 
       `; 
beds.forEach(function(items) { 
    addHTML += ` 
       <tr> 
       <td>${items[0]}</td> 
       <td><a href="${items[1]}">${items[1]}</a></td> 
       </tr> 
       `; 
}); 
table.insertAdjacentHTML('beforeend',addHTML); 
</script>

Quelle

2017-08-17 16:02:09 liongrobert

Ist es möglich, JavaScript-Array-Elemente als Hyperlinks in einer HTML-Tabelle auszugeben?

Antwort

Verwandte Themen