jQuery：如何清空具有相同屬性值但保留第一個添加的td的內容的知名表tds內容-有解無憂

我有以下表結構（請在下面找到它），我正在尋找只有具有相同屬性值但保留第一個添加的 td 的類檢查的 td 的重復內容。

表格行是根據一些嵌套回圈中的滑塊值更改事件添加的（因此重復，所以我在回圈外部清空，并且在添加行之后但仍在一些動態代碼內）。

在顯示的表格中，過濾后的期望結果應該只包括一個值為“1”的td、一個值為“2”的td和一個值為“3”的td的內容。我嘗試了下表代碼中顯示的解決方案，但沒有給出正確的結果。我也試過這個和這個，但結果并不完全是我想要的。

專案清單

jQuery 片段：

var seen = {};
$('.check').each(function() {
  var txt = $(this).attr('value');
  if (seen[txt])
    $(this).empty();
  else
    seen[txt] = true;
});

var map = {};
$(".check").each(function() {
  var value = $(this).attr('value');
  if (map[value] == null) {
    map[value] = true;
  } else {
    $(this).empty();
  }
});

var seen = '';
$('.check').each(function() {
  var see = $(this).attr('value');
  if (seen.match(see)) {
    $(this).empty();
  } else {
    seen = seen   $(this).text();
  }
});

var seen = {};
$('.check').each(function() {
  var $this = $(this);
  if (seen[$this.attr('value')]) {
    $this.closest("tr").next("tr").find("td.check").empty();
  } else {
    seen = seen   $this.text();
  }
});

var seen = {};
$('.check').each(function() {
  var $this = $(this);
  if (seen[$this.attr('value')]) {
    $this.closest("tr").next("tr").find(".check").empty();
  } else {
    seen[$this.attr('value')] = true;
  }
});

我的表：（小提琴）（行的順序無關緊要，因為我想保留第一個添加的內容并洗掉具有相同屬性值重復值的內容，如下所示：清空此）

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
    
    th,
    td {
      padding: 4px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function() {
        var seen = {};
        $('.check').each(function() {
          var $this = $(this);
          if (seen[$this.attr('value')]) {
            $this.closest("tr").next("tr").find("td.check").empty();
          } else {
            seen[$this.attr('value')] = true;
          }
        });
      });
    });
  </script>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <th>New ID</th>
        <th>Year</th>
        <th>Make</th>
        <th>Model</th>
        <th>Build</th>
        <th>Pay</th>
        <th>Date</th>
        <th>From</th>
        <th>To</th>
        <th>Max</th>
        <th>Used ID</th>
        <th>Year</th>
        <th>Make</th>
        <th>Model</th>
        <th>Name</th>
        <th>Phone</th>
        <th>Cell</th>
        <th>Email</th>
        <th>Address</th>
      </tr>
      <tr>
        <td>id</td>
        <td>year</td>
        <td>make</td>
        <td>model</td>
        <td>build</td>
        <td>pay</td>
        <td>date</td>
        <td>from</td>
        <td>to</td>
        <td>max</td>
        <td class="check" value="1">1<br /><a href="#">View</a></td>
        <td class="check" value="1">text1</td>
        <td class="check" value="1">text1</td>
        <td class="check" value="1">text1</td>
        <td>name</td>
        <td>phone</td>
        <td>cell</td>
        <td>email</td>
        <td>address</td>
      </tr>
      <tr>
        <td>id</td>
        <td>year</td>
        <td>make</td>
        <td>model</td>
        <td>build</td>
        <td>pay</td>
        <td>date</td>
        <td>from</td>
        <td>to</td>
        <td>max</td>
        <td class="check" value="2">2<br /><a href="#">View</a></td>
        <td class="check" value="2">text2</td>
        <td class="check" value="2">text2</td>
        <td class="check" value="2">text2</td>
        <td>name</td>
        <td>phone</td>
        <td>cell</td>
        <td>email</td>
        <td>address</td>
      </tr>
      <tr>
        <td>id</td>
        <td>year</td>
        <td>make</td>
        <td>model</td>
        <td>build</td>
        <td>pay</td>
        <td>date</td>
        <td>from</td>
        <td>to</td>
        <td>max</td>
        <td class="check" value="1">empty this</td>
        <td class="check" value="1">empty this</td>
        <td class="check" value="1">empty this</td>
        <td class="check" value="1">empty this</td>
        <td>name</td>
        <td>phone</td>
        <td>cell</td>
        <td>email</td>
        <td>address</td>
      </tr>
      <tr>
        <td>id</td>
        <td>year</td>
        <td>make</td>
        <td>model</td>
        <td>build</td>
        <td>pay</td>
        <td>date</td>
        <td>from</td>
        <td>to</td>
        <td>max</td>
        <td class="check" value="1">empty this</td>
        <td class="check" value="1">empty this</td>
        <td class="check" value="1">empty this</td>
        <td class="check" value="1">empty this</td>
        <td>name</td>
        <td>phone</td>
        <td>cell</td>
        <td>email</td>
        <td>address</td>
      </tr>
      <tr>
        <td>id</td>
        <td>year</td>
        <td>make</td>
        <td>model</td>
        <td>build</td>
        <td>pay</td>
        <td>date</td>
        <td>from</td>
        <td>to</td>
        <td>max</td>
        <td class="check" value="3">3<br /><a href="#">View</a></td>
        <td class="check" value="3">text3</td>
        <td class="check" value="3">text3</td>
        <td class="check" value="3">text3</td>
        <td>name</td>
        <td>phone</td>
        <td>cell</td>
        <td>email</td>
        <td>address</td>
      </tr>
      <tr>
        <td>id</td>
        <td>year</td>
        <td>make</td>
        <td>model</td>
        <td>build</td>
        <td>pay</td>
        <td>date</td>
        <td>from</td>
        <td>to</td>
        <td>max</td>
        <td class="check" value="2">empty this</td>
        <td class="check" value="2">empty this</td>
        <td class="check" value="2">empty this</td>
        <td class="check" value="2">empty this</td>
        <td>name</td>
        <td>phone</td>
        <td>cell</td>
        <td>email</td>
        <td>address</td>
      </tr>
    </tbody>
  </table>
  <br>
  <button>Click</button>
</body>

</html>

uj5u.com熱心網友回復：

看看這個解決方案是否可以滿足您的需求。

我<tbody> 在行( <tr>) 上使用了第一個回圈，并且 - 對于每一行 -<td>元素上的嵌套回圈。

只是關于您的 HTML 的旁注：表頭應該在語意上保持在 a<thead>中，而不是<tbody>.

$(document).ready(function() {
  $("button").click(function() {
    let seen = [];

    // loop on rows
    $('.table tbody tr').each(function(rowIndex, rowElement) {
      // for each row, loop on tds with value attribute
      $(rowElement).find('td.check[value]').each(function(tdIndex, tdItem) {
        const attrValue = $(tdItem).attr('value'); // check value attribute

        if (!seen.includes(attrValue)) {
          // if attribute value is not present in array, push it
          seen.push(attrValue);

          // and break the tds loop in this row
          return false;
        } else {
          // else empty tds
          $(tdItem).empty();
        }
      })
    })
  })
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='table'>
  <thead>
    <tr>
      <th>New ID</th>
      <th>Year</th>
      <th>Make</th>
      <th>Model</th>
      <th>Build</th>
      <th>Pay</th>
      <th>Date</th>
      <th>From</th>
      <th>To</th>
      <th>Max</th>
      <th>Used ID</th>
      <th>Year</th>
      <th>Make</th>
      <th>Model</th>
      <th>Name</th>
      <th>Phone</th>
      <th>Cell</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>id</td>
      <td>year</td>
      <td>make</td>
      <td>model</td>
      <td>build</td>
      <td>pay</td>
      <td>date</td>
      <td>from</td>
      <td>to</td>
      <td>max</td>
      <td class="check" value="1">1<br /><a href="#">View</a></td>
      <td class="check" value="1">text1</td>
      <td class="check" value="1">text1</td>
      <td class="check" value="1">text1</td>
      <td>name</td>
      <td>phone</td>
      <td>cell</td>
      <td>email</td>
      <td>address</td>
    </tr>
    <tr>
      <td>id</td>
      <td>year</td>
      <td>make</td>
      <td>model</td>
      <td>build</td>
      <td>pay</td>
      <td>date</td>
      <td>from</td>
      <td>to</td>
      <td>max</td>
      <td class="check" value="2">2<br /><a href="#">View</a></td>
      <td class="check" value="2">text2</td>
      <td class="check" value="2">text2</td>
      <td class="check" value="2">text2</td>
      <td>name</td>
      <td>phone</td>
      <td>cell</td>
      <td>email</td>
      <td>address</td>
    </tr>
    <tr>
      <td>id</td>
      <td>year</td>
      <td>make</td>
      <td>model</td>
      <td>build</td>
      <td>pay</td>
      <td>date</td>
      <td>from</td>
      <td>to</td>
      <td>max</td>
      <td class="check" value="1">empty this</td>
      <td class="check" value="1">empty this</td>
      <td class="check" value="1">empty this</td>
      <td class="check" value="1">empty this</td>
      <td>name</td>
      <td>phone</td>
      <td>cell</td>
      <td>email</td>
      <td>address</td>
    </tr>
    <tr>
      <td>id</td>
      <td>year</td>
      <td>make</td>
      <td>model</td>
      <td>build</td>
      <td>pay</td>
      <td>date</td>
      <td>from</td>
      <td>to</td>
      <td>max</td>
      <td class="check" value="1">empty this</td>
      <td class="check" value="1">empty this</td>
      <td class="check" value="1">empty this</td>
      <td class="check" value="1">empty this</td>
      <td>name</td>
      <td>phone</td>
      <td>cell</td>
      <td>email</td>
      <td>address</td>
    </tr>
    <tr>
      <td>id</td>
      <td>year</td>
      <td>make</td>
      <td>model</td>
      <td>build</td>
      <td>pay</td>
      <td>date</td>
      <td>from</td>
      <td>to</td>
      <td>max</td>
      <td class="check" value="3">3<br /><a href="#">View</a></td>
      <td class="check" value="3">text3</td>
      <td class="check" value="3">text3</td>
      <td class="check" value="3">text3</td>
      <td>name</td>
      <td>phone</td>
      <td>cell</td>
      <td>email</td>
      <td>address</td>
    </tr>
    <tr>
      <td>id</td>
      <td>year</td>
      <td>make</td>
      <td>model</td>
      <td>build</td>
      <td>pay</td>
      <td>date</td>
      <td>from</td>
      <td>to</td>
      <td>max</td>
      <td class="check" value="2">empty this</td>
      <td class="check" value="2">empty this</td>
      <td class="check" value="2">empty this</td>
      <td class="check" value="2">empty this2</td>
      <td>name</td>
      <td>phone</td>
      <td>cell</td>
      <td>email</td>
      <td>address</td>
    </tr>
  </tbody>
</table>
<button>Click</button>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/468656.html

標籤：javascript html jQuery css

上一篇：有沒有辦法讓每一行的css下劃線？[復制]

下一篇：在css中布局網格專案