Unique strings in HTML using javascript
I am trying to display unique rows based on the values of the first column. I've tried this a lot, taking a cue from a similar question.
<table id="test" border="1">
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test5</td>
</tr>
<tr>
<td>test6</td>
<td>test2</td>
<td>test5</td>
</tr>
<tr>
<td>test6</td>
<td>test6</td>
<td>test9</td>
</tr>
</table
**BEFORE**
test1 test2 test3
test1 test2 test5
test6 test2 test5
test6 test6 test9
**AFTER**
test1 test2 test3
test6 test2 test5
Here is what I tried using codes from a similar situation
arr = [];
$('#test td').each(function(){
key = "" + $(this).index();
if(arr.indexOf( key ) == 1)
arr.push($.trim($(this).text()));
else
$(this).closest('tr').hide();
alert(arr[]);
});
**RESULT**:
test1 test2 test3
+3
source to share
2 answers
Finish every first td
addition of a value to the search object if it does not already exist. If present, hide the current line.
var found = {};
$('#test td:first-child').each(function(){
var td = $(this);
var value = td.text();
if (found[value])
td.closest('tr').hide();
else
found[value] = true;
});
var found = {};
$('#test td:first-child').each(function(){
var td = $(this);
var value = td.text();
if (found[value])
td.closest('tr').hide();
else
found[value] = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test" border="1">
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test5</td>
</tr>
<tr>
<td>test6</td>
<td>test2</td>
<td>test5</td>
</tr>
<tr>
<td>test6</td>
<td>test6</td>
<td>test9</td>
</tr>
</table>
+2
source to share
You can also use filter
to find lines to delete:
$('#test tr').filter(function() {
var text = $(this.cells[0]).text();
return $(this).prev('tr').filter(function() {
return $(this.cells[0]).text() === text;
}).length;
}).remove();
$('#test tr').filter(function() {
var text = $(this.cells[0]).text();
return $(this).prev('tr').filter(function() {
return $(this.cells[0]).text() === text;
}).length;
}).remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test" border="1">
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test5</td>
</tr>
<tr>
<td>test6</td>
<td>test2</td>
<td>test5</td>
</tr>
<tr>
<td>test6</td>
<td>test6</td>
<td>test9</td>
</tr>
</table>
+1
source to share