jQuery erstellen <td> Element mit href

Question

Ich bin zur Zeit dieses Stück Code verwendet:

for (var website in response) { 
    var row = $('<tr class="odd gradeX"/>'); 
    $('<td/>', { text: response[website]['website_name'] }).appendTo(row); 
    row.appendTo(tBody); 
} 

Nein ich die td wollen /website?id= zu verbinden, wo id gleich response[website] sein sollte. Was wird der kürzeste Weg sein, um das zu erreichen?

um es klarer zu machen. wenn zur Zeit das Ergebnis $('<td/>', { text: response[website]['website_name'] ist: <td>siteName</td> und der Wert innerhalb response[website] 2 zum Beispiel, als ich ein Element wie folgt aussehen erstellen möchten:

<td><a href="/website?id=2">siteName</a></td>.

hinweis: ich suche den kürzesten besten weg. nicht unbedingt eine Zeilenlösung.

Answer 1

Erstellen Sie einfach die td und a in ähnlicher Weise zu dem, was Sie bereits haben:

for (var website in response) { 
    var row = $('<tr class="odd gradeX"/>'); 
    var cell = $('<td/>'); 

    $('<a/>', { href: '/website?id=' + response[website], text: response[website]['website_name'] }) 
       .appendTo(cell); 
    cell.appendTo(row); 
    row.appendTo(tBody); 
} 

Answer 2

$(document).ready(function() { 
 
for (var website in response) { 
 
    var row = $('<tr class="odd gradeX"/>'); 
 
    $('<td><a id="'+response[website]+'" href="#">'+response[website]["website_name"]+'</a></td>').appendTo(row);'); 
 
    row.appendTo(tBody); 
 
} 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Sie können String Template Literal verwenden, um eine HTML-Zeichenfolge zu erstellen und verwenden Sie dann nur $.append Element einfügen.

var response={test:{website_name:"Test Website",id:2},foo:{website_name:"foo",id:3},bar:{website_name:"Bar Website",id:4}}; 
 

 
for (var website in response) { 
 
    var _html = `<tr class="odd gradeX"><td><a href="/website?id=${response[website]['id']}">${response[website]['website_name']}</a></td></tr>` 
 
    $('#table tbody').append(_html); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<table id="table"> 
 
    <tbody></tbody> 
 
</table>

Hinweis: String-Vorlage wird in allen Browsern nicht unterstützt. Dazu können Sie eine normale String-Verkettung verwenden, um eine HTML-Zeichenfolge zu erstellen.