JQuery создает гиперссылку на основе тега Text of Anchor

Question

У меня есть следующая таблица, и как лучше всего сделать ячейку таблицы <td> кликабельной / гиперссылкой на основе имеющегося у нее текста.

<table id="fresh-table" class="table">
    <thead>
        <th data-field="id" data-sortable="true">ID</th>
        <th data-field="URL" data-sortable="true">URL</th>
        <th data-field="Results">Results</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td><a href="#">https://google.com</td>
            <td>Woot</td>
        </tr>     
        <tr>
            <td>1</td>
            <td><a href="#">https://facebook.com</td>
            <td>Hax</td>
        </tr>     
    </tbody>
</table>   

$(document).ready(function(){
    var x = $('.clickme').getText();
    console.log(x);
});

Я хотел бы заменитьзначения href на основе полученного текста, например: https://google.com или https://facebook.com.

https://codepen.io/anon/pen/zyNdrZ

Answer 1

Вы можете достичь этого без jQuery всего за несколько строк кода:

document.addEventListener("DOMContentLoaded", () => {
  for (const element of document.querySelectorAll("a[href='#']")) {
    element.href = element.innerText;
  }
});

https://codepen.io/anon/pen/wRgqxB

Answer 2

Во-первых, обратите внимание, что ваш HTML неверен;вам не хватает тегов </a> для закрытия якорей внутри table.

Во-вторых, в jQuery нет метода getText().Я бы предположил, что вы намеревались использовать text().

Что касается вашего вопроса, вы можете использовать prop(), чтобы установить атрибут href элементов a равнымк их text().Самый простой способ сделать это - предоставить функцию для prop(), которая будет выполняться для каждого элемента в коллекции.Попробуйте это:

$('#fresh-table a').prop('href', function() {
  return $(this).text();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="fresh-table" class="table">
  <thead>
    <th data-field="id" data-sortable="true">ID</th>
    <th data-field="URL" data-sortable="true">URL</th>
    <th data-field="Results">Results</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a href="#">https://google.com</a></td>
      <td>Woot</td>
    </tr>
    <tr>
      <td>1</td>
      <td><a href="#">https://facebook.com</a></td>
      <td>Hax</td>
    </tr>
  </tbody>
</table>