如何将超链接应用于现有HTML中的URL文本 - 使用JSFIDDLE进行更新

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (34)

更新:http//jsfiddle.net/daltontech/qfjr7e6a/ - 适用于Chrome,但不适用于IE (使用以下答案)

原始问题: 我从HelpDesk软件中的报告中获取JSON数据,我将其导入HTML表格(通过Python),其中一列是请求的地址,但不可点击。我可以编辑Python文件(虽然我不希望答案在那里)和HTML文件(和Javascript都很好并且预计会成为解决方案),但我无法更改JSON数据(很多)。

我可以使用JQuery,但如果vanilla Javascript可以做到这一点,那就是我的偏好。

我尝试了innerHTML(有和没有全局标志),但在大约20行之后,它在IE和Chrome(我测试的所有)中都非常失败,这个列表通常是50+。

我在其他地方成功使用innerHTML,主要是将技术人员姓名链接到他们的请求(更短的列表),如:

    { document.body.innerHTML = document.body.innerHTML.replace('Jenny', '<a 
    href="https://helpdesk.domain.com/jenny">Jenny</a>'); }

要做的事情:

    <table class="Requests" id="Requests">
    <thead><tr><th>URL</th><th>Title</th><th>Technician</th></tr></thead>
    <tr><td>https://helpdesk.domain.com/8675309</td><td>I need a phone number</td><td>Jenny</td></tr>
    <tr><td>https://helpdesk.domain.com/8675310</td><td>Some other issue</td> 
    <td>John</td></tr>
    </table>

数字之前的所有内容始终相同,因此提供了一些灵活性,我可以让JSON文件提供一些选项(只是不是<a>标签...),如:1.8675309 2. https://helpdesk.domain.com / 8675309 3. sometext8675309 4. sometext8675309someothertext

我希望完成两行示例中的任何一行 - 无论是作品还是更喜欢后者:

    <table class="Requests" id="Requests">
    <thead><tr><th>URL</th><th>Title</th><th>Technician</th></tr></thead>
    <tr><td><a href="https://helpdesk.domain.com/8675309">https://helpdesk.domain.com/8675309</a></td><td>I need a phone number</td><td>Jenny</td></tr>
    <tr><td><a href="https://helpdesk.domain.com/8675310">link</a></td><td>Some other issue</td><td>John</td></tr>
    </table>
提问于
用户回答回答于

你是想使用客户端JS来修改已经生成的HTML表吗?

我不认为使用.innerHTML是问题,也许还有其他东西导致你的代码崩溃?

编辑(IE):

let rows = document.querySelectorAll('#Requests tr');

for (let i = 1; i < rows.length; i++) {
      rows[i].getElementsByTagName('td')[0].innerHTML = '<a href="' + rows[i].getElementsByTagName('td')[0]
          .innerHTML + '">' + rows[i].getElementsByTagName('td')[0].innerHTML + '</a>';
}
let rows = document.querySelectorAll('#Requests tr');

rows.forEach(function(r, i) {
    if (i > 0) {
      r.getElementsByTagName('td')[0].innerHTML = '<a href="' + r.getElementsByTagName('td')[0].innerHTML + '">' +  r.getElementsByTagName('td')[0].innerHTML + '</a>'
    }

});
用户回答回答于

注释代码:

// get the elements

document
  .querySelectorAll(".Requests > tbody > tr > td:first-child")

// for each element remove the text and
// replace it with an anchor tag
// use the original element's text as the link

.forEach(c => {
   let a = Object.assign(document.createElement("a"), {
      href: c.textContent,
      textContent: c.textContent
    });
    c.textContent = "";
    c.appendChild(a);
  });

示例代码

document
  .querySelectorAll(".Requests > tbody > tr > td:first-child")
  .forEach(c =>
    c.parentNode.replaceChild(Object.assign(document.createElement("a"), {
      href: c.textContent,
      textContent: c.textContent
    }), c)
  );
  <table class="Requests" id="Requests">
  <thead>
    <tr>
      <th>URL</th>
      <th>Title</th>
      <th>Technician</th>
    </tr>
  </thead>
  <tr>
    <td>https://helpdesk.domain.com/8675309</td>
    <td>I need a phone number</td>
    <td>Jenny</td>
  </tr>
  <tr>
    <td>https://helpdesk.domain.com/8675310</td>
    <td>Some other issue</td>
    <td>John</td>
  </tr>
</table>

扫码关注云+社区

领取腾讯云代金券