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删除td中的a tag。

Answer 1

selector "#table td:not(:nth-child(2)) a"将遍历所有所需的链接，而remove方法将清除它们。

$('#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 2

您可以将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 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>

jQuery循环表并从td中移除href

4 个答案: