Html 语言如何将文本更改为 LINK答案

【问题标题】：Html Language how change text to LINKHtml 语言如何将文本更改为 LINK
【发布时间】：2019-10-30 10:39:09
【问题描述】：

我有一个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>

【问题讨论】：

我给你做了一个 sn-p 并将 S 添加到 HTTP:// api。我还删除了一个流浪

标签： javascript jquery html json ajax

【解决方案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 中添加了一个锚标记。我创建了一个链接变量并将其作为链接传递到该锚标记中以避免链接添加重复。

如果您想在新标签页中打开链接，请将_blank 添加到锚标记，如果要在同一窗口中打开链接，请将其删除。

【讨论】：

这是正确的解决方案，但请说明您所做的更改以及更改的原因，以便 OP 和未来的访问者可以从您的答案中学到有用的东西。
谢谢先生，但它应该在同一个窗口中打开
您想在同一个窗口或另一个窗口中打开链接吗？
如果你想在新标签页中打开一个链接，添加_blank到锚标签，或者如果链接要在同一个窗口中打开，则删除它。检查我的更新答案
@RAMAN 你有你要找的东西吗？

【解决方案2】：

使用html超链接标签

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

【讨论】：

请编辑我的代码并粘贴先生，我试过但不工作

【解决方案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>

【讨论】：

【解决方案4】：

你是说这个吗？

使用锚标记

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

【讨论】：