How to insert link in to html href tag

Viewed 86

im curently working on a script that pulls data from google sheets and transforms it in to a html table. but i have links in my google sheets tabele so i want that these links get but in a button that looks nice but icant figure out how to do that. i curently have this loob

for (var i = 0; i < entry.length; i++) {
   html += '<tr>';
   html += '<td>' + entry[i]['gsx$komponente']['$t'] + '</td>';
   html += '<td>' + entry[i]['gsx$name']['$t'] + '</td>';
   html += '<td>' + entry[i]['gsx$hersteller']['$t'] + '</td>';
   html += '<td>' + entry[i]['gsx$preis']['$t'] + '</td>';
   html += '<td>' + entry[i]['gsx$link']['$t'] + '</td>';
   html += '</tr>';
 }
 html += '</table>';

the entry[i]['gsx$link']['$t'] gets me the links i just cant get it to work inside a button if you have any idea how i can solve this problem please help me

here is the Complete code

<!DOCTYPE html>
<meta charset="ISO-8859-1"> 
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

</script>

  
<script>


// ID of the Google Spreadsheet
var spreadsheetID = "1Xx0qGY_5Ic1KNB7m8Lu5mZqHE4XQzauvcugTVUGwgqk";
 
 // Make sure it is public or set to Anyone with link can view 
 var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/od6/public/values?alt=json";
 
// make JSON call to Google Data API
$.getJSON(url, function(data) {

  // set global html variable
  var html = '';

  // build table headings
  html += '<table>';
  html += '<tr>';
  html += '<th>Komponente</th>';
  html += '<th>Name</th>';
  html += '<th>Hersteller</th>';
  html += '<th>Preis</th>';
  html += '<th>Link</th>';
  html += '</tr>';
  
  // loop to build html output for each row
  var entry = data.feed.entry;
  /**
  ** Change to descending order
  ** for (var i = entry.length - 1; i >= 0; i -= 1) {
   */
  for (var i = 0; i < entry.length; i++) {
    html += '<tr>';
    html += '<td>' + entry[i]['gsx$komponente']['$t'] + '</td>';
    html += '<td>' + entry[i]['gsx$name']['$t'] + '</td>';
    html += '<td>' + entry[i]['gsx$hersteller']['$t'] + '</td>';
    html += '<td>' + entry[i]['gsx$preis']['$t'] + '</td>';
    html += '<td>' + entry[i]['gsx$link']['$t'] + '</td>';
    html += '</tr>';
  }
  html += '</table>';

  // output html
  $('.console').html(html);
});

// loading animation
var loading = $('.loading');
loading.hide();
$(document)
  .ajaxStart(function() {
    loading.show();
  })
  .ajaxStop(function() {
    loading.hide();
  });



</script>



<div class="console"></div>

<div class="loading">
  
</div>





</body>
</html> 
1 Answers

You just need to wrap the link inside <a> tag

for (var i = 0; i < entry.length; i++) {
    html += '<tr>';
    html += '<td>' + entry[i]['gsx$komponente']['$t'] + '</td>';
    html += '<td>' + entry[i]['gsx$name']['$t'] + '</td>';
    html += '<td>' + entry[i]['gsx$hersteller']['$t'] + '</td>';
    html += '<td>' + entry[i]['gsx$preis']['$t'] + '</td>';
    html += '<td><a href=' + entry[i]['gsx$link']['$t'] +  '>' +entry[i]['gsx$link']['$t'] + '</a></td>';
    html += '</tr>';
  }

Related