如何将网页上的 SQL 数据转换为 URL 数据成为超链接？

Question

我有一个有桌子的网站。 该表显示来自 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);

Answer 1

感谢 droopsnoot 用单个=捕捉我的错误。

我做了一些额外的修改，代码运行良好。

您可以在此处查看 JSFiddle

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