How can I avoid having the same data in my table?
Here's the code:
var a = 0;
$(document).on("change", "#txtInput",function(){
var inputLength = this.value.length;
if (inputLength <= 9) { return; }
$("#contenido").append("<tr><td>" + this.value + "</td></tr>");
$("p").html('Total Bianuales: ' + (++a));
});
Store the values you've already added, and if the value of the input is already added, don't re-add it.
var a = 0;
var alreadyAdded = [];
$(document).on("change", "#txtInput",function(){
var inputLength = this.value.length;
if (inputLength <= 9) { return; }
if ($.inArray(this.value, alreadyAdded) !== -1) { return; }
$("#contenido").append("<tr><td>" + this.value + "</td></tr>");
$("p").html('Total Bianuales: ' + (++a));
alreadyAdded.push(this.value);
});
Basically, you need to browse the table twice, and check every row. Here a snippet with a example :
//Populate table
for(var i = 0; i<10; i++){
$('table tbody').append('<tr><td>Row '+i+'</td></tr>');
$('table tbody').append('<tr><td>Row '+i+'</td></tr>');
}
//Go along the table twice and check. Remove if the same content.
function cleanTable(){
for(var i = 0; i<$('table tbody tr').length; i++){
for(var j = 0; j<$('table tbody tr').length; j++){
if($('table tbody tr').eq(i).html() == $('table tbody tr').eq(j).html() && i != j){
$('table tbody tr').eq(j).remove();
}
}
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="cleanTable()">Clean</button>
<table>
<tbody>
</tbody>
</table>
<button onClick="cleanTable()">Clean</button>