javascript - JQuery根据 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

首先请注意，您的 HTML 无效；你错过了 </a>用于关闭 table 中的 anchor 的标签.

其次，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>