如何将 Html 表更改为链接
Posted
技术标签:
【中文标题】如何将 Html 表更改为链接【英文标题】：How to change Html table to Link 【发布时间】：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 【参考方案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 代码并粘贴。这样当我在浏览器中运行此页面时，它会给出所需的结果 亲爱的阿曼，我不这样做 :) 你可以试着弄清楚，因为代码很容易解释 :)以上是关于如何将 Html 表更改为链接的主要内容，如果未能解决你的问题，请参考以下文章
MS Access 将链接表更改为 AWS MySQL Db 会减慢表单/报告的速度