如何将HTML表格LINK列的纯文本转换为可点击链接？

嘿，刚入门HTML编程遇到这个小问题很正常，我来帮你搞定！你现在的LINK列只是把URL以纯文本形式输出，没有用HTML的<a>标签包裹，所以自然没法点击跳转。

核心修改点 #

只需要把生成LINK列的那行代码，替换成包含<a>超链接标签的版本就行。我们给<a>标签加上href属性指定跳转地址，再加上target="_blank"让链接在新窗口打开（这样用户浏览的时候不会离开当前页面，体验更好）：

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

修改后的完整可运行代码 #

我已经帮你把所有代码调整好，你可以直接复制使用（顺便修正了原代码里的几个小问题，不然表格可能没法正常生成）：

JavaScript部分

$(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><a href='https://www.youtube.com/embed/" + f.video + "' target='_blank'>https://www.youtube.com/embed/" + f.video + "</a></td>" + 
                "<td><div><img src='" + f.image + "'></div></td>" + 
                "</tr>"; 
            $(tblRows).appendTo("#userdata tbody"); 
        }); 
    }); 
});

HTML部分

<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>DURATION</th> 
                <th>LIVE STATUS</th> 
                <th>LINK</th> 
                <th>PLAY</th> 
            </thead> 
            <tbody> 
            </tbody> 
        </table> 
    </div> 
</div>

额外小优化 #

我还顺手做了两个小优化：

• 给<img>标签的src属性加上了单引号，避免图片路径包含空格或特殊字符时加载失败；
• 修正了表头里的拼写错误（DURACTION改成了正确的DURATION）。

这样修改后，LINK列的文本就会变成可点击的超链接，点击后会在新窗口打开对应的YouTube嵌入页面啦！

内容的提问来源于stack exchange，提问作者RAMAN