Добавить кнопку со ссылкой для каждой строки

Я новичок в JavaScript, так что извините за этот вопрос, когда я использую jQuery для добавления данных из firebase в таблицу

я хочу добавить кнопку, но имею URL-адрес href из переменной

url_val = это переменный URL-адрес, который я хочу, когда я нажимаю кнопку, чтобы перейти на веб-сайт


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

я пытался заняться охотой

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

но я не могу добавить переменную внутри есть ли решение для этого

Вам не хватает знаков + вокруг url_val, чтобы правильно объединить строку. Кроме этого, я не уверен, что вы спрашиваете.

abney317 22.07.2019 19:25

Конкатенация строк ведет себя одинаково независимо. Ваш второй фрагмент неправильно выполняет конкатенацию. Почему вы пытаетесь сделать это по-другому? Ваш первый фрагмент показывает, что вы понимаете, что <string> + variable + <string> является точным. Так что я не уверен, почему это смущает вас

Taplar 22.07.2019 19:25

Вам нужно использовать " и ' в зависимости от того, что находится снаружи, например var s = "a" + "'" + '"'; — посмотрите, как одинарные кавычки оборачивают двойные, а двойные оборачивают одинарные — так что ваш href concat становится "<a href='" + url_val + "'>";, чтобы дать href='http://...'. В SO будет (много) дубликатов, поэтому не дается полный ответ.

freedomn-m 22.07.2019 19:30

Большое спасибо за вашу долю знаний, теперь все ясно

A clear 23.07.2019 06:25
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
5
100
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, что вы сделали две ошибки, первая из которых заключается в том, что вы не используете + для правильного объединения строк, как упоминалось @Taplar и @abney317.

Во-вторых, вы без необходимости удалили 'GO' из своей жестко закодированной строки, но также не сохранили ее как переменную или не объединили ее соответствующим образом.

Я исправил оба из них и предоставил демонстрацию.

Дайте мне знать, если вы надеялись на что-то другое.


Демо

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

Другие вопросы по теме