如何将 Html 表更改为链接答案

【问题标题】：How to change Html table to Link如何将 Html 表更改为链接
【发布时间】：2020-02-24 22:55:24
【问题描述】：

我是 html 新手。
我正在分享我的 html 代码，该代码从服务器获取 Json 数据并以 Html 表格格式显示。

您能否更改我的 html 代码，使其具有 button 在视频链接和视频图像之间，当我单击该按钮时，它会播放具有同一行视频 ID 的相应 youtube 视频。

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

<script>

    $(function() {


   var people = [];

   $.getJSON('https://api.myjson.com/bins/hy7g0', function(data) {
       $.each(data.videoLectureListing, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.Id + "</td>" +
           "<td>" + f.videoName + "</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>"+ "</tr>"
           $(tblRow).appendTo("#userdata tbody");
     });

   });

});
</script>
</head>

<body>

<div class="wrapper">
<div class="profile">
   <table id= "userdata" border="25">
  <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>
        </thead>
      <tbody>

       </tbody>
   </table>

</div>
</div>

</body>
</html>

我在互联网上尝试了很多，但找不到任何相关信息，请认真对待并帮助我。谢谢

【问题讨论】：

欢迎来到 Stack Overflow。我们不是代码编写服务，所以不，我们不会只是更新您的代码以使其执行您希望它执行的操作。我们要求您在此处发布之前进行研究并尝试解决方案，然后，如果您确实发布，请发布特定问题以及任何尝试你成功了。
可以的话请试一试
不，我很抱歉，但你来错地方了。
嘿@Aman，你离得很近。搜索一些html标签，比如A和IMG

标签： javascript jquery html css json

【解决方案1】：

我有一些时间可以打发，所以这里有一个解决您问题的方法：

        const keys = ['Id', 'videoName', 'date', 'time', 'videoLink', 'image', 'videoDuration', 'liveStatus'];
    var tableBody = document.getElementById('myTableBody');

    fetch('https://api.myjson.com/bins/hy7g0').then(response => {
        return response.json().then(data => {
            buildTable(data.videoLectureListing);
        })
    });

    function buildTable(fullData) {
        if (fullData) {
            return fullData.forEach(videoData => {
                let newRow = buildRow(videoData);
                tableBody.appendChild(newRow)
            })
        }
    }

    function buildRow(videoData) {
        let newRow = document.createElement('tr');
        keys.forEach(key => {
            let domNode = undefined;
            if (key === 'videoLink') {
                domNode = buildAButton(videoData[key]);
            } else if (key === 'image') {
                domNode = buildAImage(videoData[key]);
            } else {
                domNode = videoData[key] ? videoData[key] : ' - ';
            }
            domNode = buildAColumn(domNode);
            newRow.appendChild(domNode);
        });
        return newRow;
    }

    function buildAButton(videoId) {
        let newButton = document.createElement('button');
        newButton.innerHTML = 'Watch';
        newButton.onClick = () => window.location.href = `url/path/${id}`;
        return newButton;
    }

    function buildAColumn(object) {
        let newColumn = document.createElement('td');
        if (typeof object === 'string') {
            newColumn.innerHTML = object;
        } else {
            newColumn.appendChild(object);
        }
        return newColumn;
    }

    function buildAImage(source) {
        let newImage = document.createElement('img');
        newImage.src = source;
        return newImage;
    }

【讨论】：

请不要提供不属于这里的问题的答案，因为它只会鼓励更多相同的问题。
我可能会这样做，但我从这个网站得到了很多帮助，我试图尽可能多地回馈它。我不想鼓励人们让我们做他们的工作，但我尽量提供帮助。但是我给出的代码应该被重构。它可以使用 switch() 语句而不是 if else 结构。函数名称不好，与书面字符串进行比较并且没有常量是一个坏主意。阿曼还有很多工作要做，但这是一个很好的线框图，如何实现他正在寻找的东西。干杯，祝斯科特愉快！
我们都非常感谢您愿意提供帮助。但是，最后，我们确实有我们尝试遵循的网站指南，以使我们的网站尽可能有用。当我们首先回答不属于这里的问题时，我们会鼓励更多此类问题，而在您知道之前，Stack Overflow 并不是它应有的高质量知识库。
@varjod 先生，正如我所说，我是编程新手，所以请您将代码放入我的 html 代码并粘贴。这样当我在浏览器中运行此页面时，它会给出所需的结果
亲爱的阿曼，我不这样做 :) 你可以试着弄清楚，因为代码很容易解释 :)