时间戳

首页 > 解决方案 > 使用 Javascript 在 onClick 调用中更新 td 单元格中的 href 链接文本

javascript - 使用 Javascript 在 onClick 调用中更新 td 单元格中的 href 链接文本

问题描述

我有一张如下表：

<table style="width: 100%;">
    <thead>
        <tr>
            <th>Source</th>
            <th>Url</th>
            <th>Referenceid</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td title="12345">12345</td>
            <td title="https://example1.com"><a href="https://example1.com">https://example1.com</a></td>
            <td title="2">2</td>
        </tr>
        <tr>
            <td title="12345">12345</td>
            <td title="https://example2.com"><a href="https://example2.com">https://example2.com</a></td>
            <td title="1">1</td>
        </tr>
    </tbody>
</table>

我正在尝试添加一个 onClick 处理程序，因此当单击作为 Url 的单元格时，它会更改文本本身。但是我已经尝试获取元素，然后使用element.innerText=<a href="https://example1.com>newUrl</a>aselement.textContent=...和设置它element.innerHtml，但是它们似乎都没有像我期望的那样更新 url（保持它是<a href>可点击的，只是更新的文本（有时它会出现 as[Object object]和其他时间它出现为转义的 HTML。

如何<a href>使用基本 javascript（没有 jQuery 或任何东西）在 onClick 处理程序中正确更新文本？谢谢。

标签： javascripthtml

解决方案

forEach()您可以在元素的节点列表上运行循环<td>并定位元素firstChild，使用eventlistenerfor click to 然后更改outerHTML...

我在表数据标签中添加了一个类来定位元素。forEach通过循环函数运行值和索引，并使用索引 -i获取被点击的事件和值 -v定位元素......

const td = document.querySelectorAll('.td');

td.forEach(function(v, i) {
  td[i].addEventListener('click', function() {
    // `this` can also be used here in substitute with the value passed through the forEach loop
    // this.firstChild.outerHTML = "some new link";
    // The following will change the actual HTML of the TD elements firstChild so the <a> tag will be the 
    // string of HTML defined in the quotes below... 
    v.firstChild.outerHTML = "<a href='stackoverflow.com' target='_blank'>StakOverflow</a>";
  })
})
<table style="width: 100%;">
  <thead>
    <tr>
      <th>Source</th>
      <th>Url</th>
      <th>Referenceid</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td title="12345">12345</td>
      <td class="td" title="https://example1.com"><a href="#">https://example1.com</a></td>
      <td title="2">2</td>
    </tr>
    <tr>
      <td title="12345">12345</td>
      <td class="td" title="https://example2.com"><a href="#">https://example2.com</a></td>
      <td title="1">1</td>
    </tr>
  </tbody>
</table>

注意：如果您只想更改<a>标签之间的文本，请定位textContent类似...

const td = document.querySelectorAll('.td');

td.forEach(function(v, i) {
  td[i].addEventListener('click', function() {
    this.firstChild.textContent = "StakOverflow";
  })
})
<table style="width: 100%;">
  <thead>
    <tr>
      <th>Source</th>
      <th>Url</th>
      <th>Referenceid</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td title="12345">12345</td>
      <td class="td" title="https://example1.com"><a href="#">https://example1.com</a></td>
      <td title="2">2</td>
    </tr>
    <tr>
      <td title="12345">12345</td>
      <td class="td" title="https://example2.com"><a href="#">https://example2.com</a></td>
      <td title="1">1</td>
    </tr>
  </tbody>
</table>

推荐阅读