是否使用javascript删除基于列中重复值的HTML表格行元素？
是否使用javascript删除基于列中重复值的HTML表格行元素？
提问于 2018-06-23 03:55:47
我有一个表，如果第一列中有任何值相同，我会尝试删除行。我如何使用javascript或jquery来实现这一点？
$("table tr").each(function () {
var tdText = $(this).text();
$("table tr")
.filter(function () {
return tdText == $(this).text();
})
.not(":first")
.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Product Code</th>
<th>Item Name</th>
<th>Long Description</th>
<th>Material</th>
<th>Style</th>
</tr>
</thead>
<tbody>
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
</tbody>
</table>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-23 04:13:58
function removeDuplicates() {
var tableRows = $('#myTable').find("tbody tr");
var seens = [];
for(var i = 0; i < tableRows.length; i++) {
var tRow = $(tableRows[i]);
var cell1Content = tRow.find("td:first-child input").val();
if(seens.indexOf(cell1Content) != -1) {
tRow.remove();
} else {
seens.push(cell1Content);
}
}
}
function addRow() {
$('#myTable').find("tbody").append(['<tr>',
' <td><input></td>',
' <td><input></td>',
' <td><input></td>',
' <td><input></td>',
' <td><input></td>',
' </tr>'].join(""));
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<thead>
<tr>
<th>Product Code</th>
<th>Item Name</th>
<th>Long Description</th>
<th>Material</th>
<th>Style</th>
</tr>
</thead>
<tbody>
<tr>
<td><input value="1"></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input value="3"></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input value="1"></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input value="2"></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input value="3"></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input value="4"></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
<tr>
<td><input value="5"></td>
<td><input></td>
<td><input></td>
<td><input></td>
<td><input></td>
</tr>
</tbody>
</table>
<div>
<button onclick="addRow()">Add Row</button>
<button onclick="removeDuplicates()">Remove Duplicates</button>
</div>
Stack Overflow用户
发布于 2018-06-23 04:05:06
您必须遍历各行，然后删除所遍历的每一行的重复项。
$('table').find('tr').each(function(){
const $row = $(this);
$row.nextAll('tr').each(function(){
const $next = $(this);
if($row.find('td:first').text() == $next.find('td:first').text()) {
$next.remove();
}
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Product Code</th>
<th>Item Name</th>
<th>Long Description</th>
<th>Material</th>
<th>Style</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>A</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>B</td>
<td>B</td>
<td>B</td>
<td>B</td>
<td>B</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>B</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>C</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50994794
复制相关文章
相似问题