Question

是否可以仅使用JavaScript将下表中的一个<td>转换为链接？

例如，我想使用JavaScript将＆＃34; Jill＆＃34;更改为超链接，而不是对我的html文件进行更改。

有没有人有办法做到这一点？

<html>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
   <td>Smith</td>       
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>

</body>
</html>

Answer 1

这会将所有<td>个元素放在一个数组中，您可以迭代它并根据需要为每个元素分配一个URL。

<table style="width:100%">
  <tr>
    <td>Jill</td>
   <td>Smith</td>       
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>

<button onclick="change()">Change</button>

<script>
function change() {
    var tdElements = document.getElementsByTagName('td');
    var oldStuff = tdElements[0].innerHTML;
    console.log(oldStuff);
    tdElements[0].innerHTML = '<a href="#">' + oldStuff + '</a>';
}
</script>

Answer 2

使用CSS：Demo

<style type="text/css">
   td a { display: block; width: 100%; height: 100%; }
</style>

<td><a href="#">Jill</a></td>

Answer 3

业务规则对于找到要替换的td的模式并不十分清楚，因此我这样做是为了您可以轻松修改自定义过滤器功能。

$('table tr td')
    .filter(function() {
        return ($(this).text() === 'Jill');
    }).first().html('<a href="http://www.google.com">Jill</a>');

可以使用javascript将html td更改为链接？

3 个答案: