jQuery循环表并从TD中删除HREF

Question

我有一个表结构。

<table id="table">
    <tr>
        <td><a href="/one">One</a></td>
        <td><a href="/two">Two</a></td>
        <td><a href="/three">Three</a></td>
        <td><a href="/four">Four</a></td>
        <td><a href="/five">Five</a></td>
    </tr>
    <tr>
        <td><a href="/one">One</a></td>
        <td><a href="/two">Two</a></td>
        <td><a href="/three">Three</a></td>
        <td><a href="/four">Four</a></td>
        <td><a href="/five">Five</a></td>
    </tr>
    <tr>
        <td><a href="/one">One</a></td>
        <td><a href="/two">Two</a></td>
        <td><a href="/three">Three</a></td>
        <td><a href="/four">Four</a></td>
        <td><a href="/five">Five</a></td>
    </tr>
</table>

现在我想编写jQuery代码。

它将循环表并从TD中删除a tag，除了第二个TD。

Answer 1

您可以将each用于TD和find标签，然后使用removeAttr删除HREF

$("#table tr").each(function(index, item){
  $(item).find('td').eq(0).find('a').removeAttr("href");
  $(item).find('td').eq(2).find('a').removeAttr("href");
  $(item).find('td').eq(3).find('a').removeAttr("href");
  $(item).find('td').eq(4).find('a').removeAttr("href");
});

$("#table tr").each(function(index, item){
  $(item).find('td').eq(0).find('a').removeAttr("href");
  $(item).find('td').eq(2).find('a').removeAttr("href");
  $(item).find('td').eq(3).find('a').removeAttr("href");
  $(item).find('td').eq(4).find('a').removeAttr("href");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
    <tr>
        <td><a href="/one">One</a></td>
        <td><a href="/two">Two</a></td>
        <td><a href="/three">Three</a></td>
        <td><a href="/four">Four</a></td>
        <td><a href="/five">Five</a></td>
    </tr>
    <tr>
        <td><a href="/one">One</a></td>
        <td><a href="/two">Two</a></td>
        <td><a href="/three">Three</a></td>
        <td><a href="/four">Four</a></td>
        <td><a href="/five">Five</a></td>
    </tr>
    <tr>
        <td><a href="/one">One</a></td>
        <td><a href="/two">Two</a></td>
        <td><a href="/three">Three</a></td>
        <td><a href="/four">Four</a></td>
        <td><a href="/five">Five</a></td>
    </tr>
</table>

Answer 2

选择器"#table td:not(:nth-child(2)) a"将通过所有所需链接循环，删除方法将清除它们。

$('#table td:not(:nth-child(2)) a').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
    <tr>
        <td><a href="/one">One</a></td>
        <td><a href="/two">Two</a></td>
        <td><a href="/three">Three</a></td>
        <td><a href="/four">Four</a></td>
        <td><a href="/five">Five</a></td>
    </tr>
    <tr>
        <td><a href="/one">One</a></td>
        <td><a href="/two">Two</a></td>
        <td><a href="/three">Three</a></td>
        <td><a href="/four">Four</a></td>
        <td><a href="/five">Five</a></td>
    </tr>
    <tr>
        <td><a href="/one">One</a></td>
        <td><a href="/two">Two</a></td>
        <td><a href="/three">Three</a></td>
        <td><a href="/four">Four</a></td>
        <td><a href="/five">Five</a></td>
    </tr>
</table>

Answer 3

这将删除A标签：

$('#table tr').each(function() {
    $(this).find('td').each (function(index) {
  if(index != 1)
  {
    let str = $(this).find('a').html();
    $(this).html('');
    $(this).html(str);
  }
});  
})  

https://jsfiddle.net/d8fz4h1v/

Answer 4

基于.replacewith((或.empty((的简化解决方案：

$('#table tr>td:not(:nth-child(2)) a').replaceWith((idx, ele) => ele);

$('#table tr>td:not(:nth-child(2))').empty();

// $('#table tr>td:not(:nth-child(2)) a').replaceWith((idx, ele) => ele);
$('#table tr>td:not(:nth-child(2))').empty();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
    <tr>
        <td><a href="/one">One</a></td>
        <td><a href="/two">Two</a></td>
        <td><a href="/three">Three</a></td>
        <td><a href="/four">Four</a></td>
        <td><a href="/five">Five</a></td>
    </tr>
    <tr>
        <td><a href="/one">One</a></td>
        <td><a href="/two">Two</a></td>
        <td><a href="/three">Three</a></td>
        <td><a href="/four">Four</a></td>
        <td><a href="/five">Five</a></td>
    </tr>
    <tr>
        <td><a href="/one">One</a></td>
        <td><a href="/two">Two</a></td>
        <td><a href="/three">Three</a></td>
        <td><a href="/four">Four</a></td>
        <td><a href="/five">Five</a></td>
    </tr>
</table>