如何转换网页上的 SQL 数据，使任何作为 URL 的数据都变成超链接？
Posted
技术标签:
【中文标题】如何转换网页上的 SQL 数据，使任何作为 URL 的数据都变成超链接？【英文标题】：How to convert SQL data on webpage so any data that is a URL becomes a hyperlink? 【发布时间】：2021-10-03 22:55:21 【问题描述】：我有一个有表格的网站。该表显示来自 mysql 的数据。表中有多个列。其中一列是 URL 列。
问题
目前该表格显示完整的 URL，并且不可点击。问题：
如何使文本可点击？ 我应该使用 javascript 来解决这个问题吗？还是 php？目标
检查类 ID 为“urlColumn”的列以查看是否... 单元格是blank
将单元格留空
单元格以<a href 开头
什么都不做，URL 已经是超链接了
单元格不是空白的，并且没有<a href
将此 URL 转换为超链接。
当前解决方案 它不工作。它只是将所有内容留空，或将该列中的所有内容转换为超链接（即使没有找到 URL）
setInterval(() =>
let urlColumn = document.getElementsByClassName('urlColumn');
for (let i = 0; i < urlColumn.length; i++)
//Checks to see if the URL cell is blank.
if (urlColumn[i].innerhtml = '')
//Do nothing.
//Checks to see if the URL is already hyperlinked.
else if (urlColumn[i].innerHTML = '<a href*')
//Do nothing. URL already converted to hyperlink.
//Cell is not blank, and has not yet been converted to hyperlink.
else
//Stores the current value of the cell (the URL)
var urlColumnInner = document.getElementsByClassName('urlColumn')[i];
//Adds <a href> tag and the URL value to create the hyperlink.
urlColumnInner = '<a href="' + urlColumnInner + '">OPEN</a>';
, 5000);
【问题讨论】：
别忘了您需要使用== 来比较变量，而不是像这里那样使用=。单个= 用于为变量赋值。您的第一个 if 条件为您的 urlColumn[i].innerHTML 分配一个空白，检查它是否有效（它会）所以什么都不做。
如果没有关于表格外观和实际内容的想法，很难回答这个问题。
【参考方案1】：
感谢 droopsnoot 发现我使用单个 = 的错误。
我做了一些额外的修改，代码运行良好。
可以查看JSFiddle here
HTML
<html>
<body>
<p>This table contains data pulled from a SQL database. The URL's are in plan text, and are not clickable. The javascript will scan through the URL column, and make the URLs into clickable hyperlinks every 5 seconds.</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>URL</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td class="urlColumn">https://1example.com</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td class="urlColumn"><a href="https://2example.com">OPEN</a></td>
</tr>
<td>Bob</td>
<td>Smith</td>
<td class="urlColumn">https://3example.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td class="urlColumn"></td>
</tr>
</table>
</body>
</html>
Javascript
//Runs every 5 seconds.
setInterval(() =>
//Gets the DOM element with class id urlColumn.
var urlColumn = document.getElementsByClassName('urlColumn');
//Loops through every element with the class id urlColumn.
for (var i = 0; i < urlColumn.length; i++)
//Checks every cell with the class id urlColumn, and if a blank one is found, do nothing.
if (urlColumn[i].innerHTML.length == 0)
//Checks every cell with the class id urlColumn, and if its already hyperlinked do nothing.
else if (urlColumn[i].innerHTML.indexOf('<a href') != -1)
//If the first 2 ifs are not true, we know the cell with class id urlColumn is not blank, and is not hyperlinked.
else
//Get the non hyperlink URL, and add hyperlink tags.
urlColumn[i].innerHTML = '<a href="' + urlColumn[i].innerHTML + '"' + 'target="_blank" rel="noopener noreferrer">OPEN</a>';
//Run this function every 5 seconds.
, 5000);
【讨论】：
以上是关于如何转换网页上的 SQL 数据，使任何作为 URL 的数据都变成超链接？的主要内容，如果未能解决你的问题，请参考以下文章
当点击网页上的任何链接或提交按钮时如何在 JavaScript 中检测