append a button with a link for each row

Question

I'm new to JavaScript so excuse me for this question,, when i use jQuery to append data from firebase to a table

i want to append a button but has a href url from variable

url_val = is a variable url i want when i click to the button go to website


  $("#data").append("<tr><td>" + title_val + "</td><td><button class='box'> " + url_val + "</button></td></tr>");

i was trying to do the fowling

  $("#data").append("<tr><td>" + title_val + "</td><td><a href="url_val"> <button class='box'> " + GO + "</button></a></td></tr>");

but i cant add a variable inside is there a solution for this

You're missing the `+` signs around `url_val` to concatenate the string properly. Other than that I'm not sure what you're asking. — abney317, Jul 22 '19 at 17:25
String concatenation behaves the same way regardless. Your second snippet is not doing concatenation correctly. Why are you trying to do it differently? Your first snippet shows you understand that ` + variable + ` is accurate. So I'm not sure why this is confusing you — Taplar, Jul 22 '19 at 17:25
You need to use `"` and `'` depending on what's on the outside, eg `var s = "a" + "'" + '"';` - see how the single quotes wrap a double and a double wraps a single - so your href concat becomes `"";` to give `href='http://...'`. There'll be (plenty of) duplicates in SO, so not given as a full answer. — freedomn-m, Jul 22 '19 at 17:30
Possible duplicate of [When to use double or single quotes in JavaScript?](https://stackoverflow.com/questions/242813/when-to-use-double-or-single-quotes-in-javascript) — freedomn-m, Jul 22 '19 at 17:31
Thank you very much for your share of knowledge , now its clear — A clear, Jul 23 '19 at 04:25

score 0 · Accepted Answer · answered Jul 22 '19 at 17:30

I think you've made two mistakes, the first is not using + to concantate strings appropriately as mentioned by @Taplar and @abney317.

Secondly you have unnecessarily taken 'GO' out of your hard coded string, but also not stored it as a variable or concatenated it appropriately.

I have fixed both of these and provided a demonstration.

Let me know if you were hoping for something else.

Demo

// Add click event to add row
$("#addRow").click(function() {

  // Store variables
  title_val = "Title";
  url_val = "www.google.com";
  
  // Append data
  $("#data").append("<tr><td>" + title_val + "</td><td><a href=" + url_val + "> <button class='box'>GO</button></a></td></tr>");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<button id="addRow">Add Row</button>

append a button with a link for each row

1 Answers1

Demo