Javascript 如何将Html表更改为链接

我是html新手。
我正在共享从服务器获取

Json

数据并以html表格格式显示的html代码

你能改变我的html代码，使它有一个

按钮

在视频链接和视频图像之间，当我点击该按钮时，它会播放视频id为同一行的相应youtube视频

$（函数（）{
var people=[]；
$.getJSON（'https://api.myjson.com/bins/hy7g0，函数（数据）{
$。每个（数据、列表、函数（i、f）{
变量tblRow=“”+”+f.Id+“”+
“+f.videoName+++f.date+++f.time+++f.videoName+++f.image++”+
“+f.videoDuration+++f.liveStatus++”
$（tblRow）.appendTo（“#userdata tbody”）；
});
});
});
身份证件
视频名称
日期
时间
视频链接
视频图像
持续时间
生活状态

我有时间消磨，所以这里有一个解决您问题的方法：

        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;
    }

---

欢迎来到堆栈溢出。我们不是一个代码编写服务，所以不，我们不会只是更新你的代码，使它做你想做的事。我们要求您在发布之前进行研究并尝试解决方案，然后，如果您发布，请发布一个具体问题以及您所做的任何尝试。如果您不能，请尝试一下，对不起，但您来错地方寻求此类帮助。嘿@Aman，您离我们太近了。搜索一些html标签，例如和请不要提供不属于这里的问题的答案，因为这只会鼓励更多相同的问题。我可能会这样做，但我从这个网站收到了太多的帮助，我试图尽可能多地回馈。我不想鼓励人们让我们做他们的工作，但我会尽可能地提供帮助。但是我给出的代码应该被重构。它可以使用switch（）语句而不是if-else结构。函数名不好，与写字符串和不带常量进行比较是个坏主意。还有很多工作要做，但这是一个很好的线框如何实现他所寻找的。干杯，祝你今天愉快，斯科特！我们都很感激你乐于助人的愿望。但是，归根结底，我们确实有网站指南，我们会尽力遵循这些指南，以尽可能保持网站的帮助性。当我们首先回答不属于这里的问题时，我们鼓励更多这些问题，在你知道之前，堆栈溢出不是应该的高质量知识库。@varjod先生，正如我所说的，我是编程新手，所以请您将代码放入我的html代码中并粘贴。这样，当我在浏览器中运行此页面时，它会给出所需的结果，但不要这样做亲爱的Aman:）您可以尝试找出它，因为代码是不言自明的:)