jQuery：如何清空具有相同屬性值但保留第一個添加的 tds 的內容的重復表 tds 內容
[英]jQuery: how to empty repeated table tds content that have same attribute value but keep the content of the first added 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>
1 個解決方案
解決方案1
1 已采納 2022-04-30 14:27:09
看看這個解決方案是否可以滿足您的需求。
我在<tbody>行（ <tr> ）上使用了第一個循環，並且 - 對於每一行 - 在<td>元素上使用嵌套循環。
只是關於您的 HTML 的一個旁注：表頭應該在語義上保持在<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>
如何通過退出返回true將值與許多表行中的所有所有表頭tds進行比較？
[英]How to Compare a Value with all all table first tds in many table rows by returning true if exits?
如何獲取表tds的類名並將其寫入到使用jQuery的數組？
[英]How to get class names of table tds and write it to an array using jQuery?
jQuery：僅當第一個（：first）TD不包含文本（：empty）時，設置所有空子TD的樣式
[英]jQuery: Style all empty child TDs only if the first (:first) TD contains no text (:empty)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.