Язык HTML, как изменить текст на ссылку

Question

У меня есть html code. Можете ли вы помочь мне кодировать, чтобы я мог сделать обычный текст в link. В основном я хочу изменить текст, который отображается в LINK-COLUMN, он будет реагировать как link, теперь это только текст.

Я пытаюсь, но ничего не помогло. Я новичок в программировании HTML.

$(function() {


  var people = [];

  $.get('https://api.myjson.com/bins/c307c', function(data) {
    $.each(data.video, function(i, f) {

      var tblRows = "<tr>" + "<td>" + f.Id + "</td>" +
        "<td>" + f.video + "</td>" + "<td>" + f.date + "</td>" + "<td>" + f.time + "</td>" + "<td>" + f.video + "</td>" + "<td>" + f.image + "</td>" +
        "<td>" + f.videoDuration + "</td>" + "<td>" + f.liveStatus + "</td>" + "<td>" + "https://www.youtube.com/embed/" + f.video + "</td>" + "<td><div><img src=" + f.image + "></div></td>" + "</tr>"
      $(tblRows).appendTo("#userdata tbody");

    });

  });

});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


<div class="wrapper">
  <div class="profile">
    <table id="userdata" width="50%" border="2">
      <thead>
        <th>ID</th>
        <th>VIDEO NAME</th>
        <th>DATE</th>
        <th>TIME</th>
        <th>VIDEO LINK</th>
        <th>VIDEO IMAGE</th>
        <th>DURACTION</th>
        <th>LIVE STATUS</th>
        <th>LINK </th>
        <th>PLAY</th>
      </thead>
      <tbody>

      </tbody>
    </table>

  </div>
</div>

Answer 1

  <script>

   $(function() {


  var people = [];

  $.get('https://api.myjson.com/bins/c307c',function(data) {
      $.each(data.video, function(i, f) {

        var link = "https://www.youtube.com/embed/"+ f.video;
         var tblRows = "<tr>" + "<td>" + f.Id + "</td>" +
          "<td>" + f.video + "</td>" + "<td>" + f.date + "</td>" + "<td>" + f.time + "</td>" + "<td>" + f.video + "</td>" + "<td>" + f.image + "</td>" +
          "<td>" + f.videoDuration + "</td>" + "<td>" + f.liveStatus + "</td>" + "<td><a target='_blank' href='"+link+"'>"+link+"</a></td>"  + "<td><div><img src=" + f.image + "></div></td>" + "</tr>";
          $(tblRows).appendTo("#userdata tbody");

    });

  });

});
</script>

Я только что добавил тег привязки в HTML, который создается динамически. и я создал переменную ссылки и передал ее как ссылку в этом теге привязки, чтобы избежать повторения добавления ссылки.

Если вы хотите открыть ссылку в новой вкладке, добавьте add_blank для тега привязки или ещеудалите его, если ссылка должна быть открыта в том же окне.

Answer 2

Вы имеете в виду это?

Использование тега привязки

"<td><a href=\"https://www.youtube.com/embed/" + f.video + "\">" + f.video + "</a></td>

вот так

$(function() {
  $.get('https://api.myjson.com/bins/c307c', function(data) {
    var tblRows = [];
    $.each(data.video, function(i, f) {
      tblRows.push("<tr><td>" + f.Id + "</td>" +
        "<td>" + f.video + "</td><td>" + f.date + "</td><td>" + f.time + "</td><td>" + f.video + "</td><td>" + f.image + "</td>" +
        "<td>" + f.videoDuration + "</td><td>" + f.liveStatus + "</td>" +
        "<td><a href=\"https://www.youtube.com/embed/" + f.video + "\">" + f.video + "</a></td><td><img src=" + f.image + "></td></tr>")

    });
    $(tblRows.join("")).appendTo("#userdata tbody");

  });

});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


<div class="wrapper">
  <div class="profile">
    <table id="userdata" width="50%" border="2">
      <thead>
        <th>ID</th>
        <th>VIDEO NAME</th>
        <th>DATE</th>
        <th>TIME</th>
        <th>VIDEO LINK</th>
        <th>VIDEO IMAGE</th>
        <th>DURACTION</th>
        <th>LIVE STATUS</th>
        <th>LINK </th>
        <th>PLAY</th>
      </thead>
      <tbody>

      </tbody>
    </table>

  </div>
</div>

Answer 3

Вы можете использовать элемент <a> (или якорный элемент) с атрибутом href

для дополнительной проверки DOCS

  <ul>
      <li><a href="https://example.com">Website</a></li>
      <li><a href="mailto:m.bluth@example.com">Email</a></li>
      <li><a href="tel:+123456789">Phone</a></li>
    </ul>

Answer 4

Использовать HTML-тег гиперссылки

 <a href="https://www.youtube.com/embed/..."></a>