如何将超链接应用于现有HTML中的URL文本-使用JSFIDDLE和工作解决方案更新
更新：http://jsfiddle.net/daltontech/qfjr7e6a/ -感谢这两个人的帮助！
原始问题: JSON我从我的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
我希望能完成这两个row示例中的任何一个--要么工作，要么更倾向于后者：
<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>回答 2
Stack Overflow用户
发布于 2019-03-30 06:56:41
注释代码：
// 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>
Stack Overflow用户
发布于 2019-03-30 06:59:12
如果我没理解错的话，您希望使用客户端JS来修改已经生成的HTML表。
下面的代码适用于+200行的情况，所以我不认为使用.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>'
}
});https://stackoverflow.com/questions/55426246
复制相似问题