Avoid duplication using jquery

Question

How to avoid duplication of data using jquery? My code is :

<button  id="gen">Generate</button>
<table id="report" border="1" style="visibility:hidden">
    <tr>
        <th>Sl.No.</th>
        <th>District Name</th>
    </tr>
</table>

js:

$("#gen").click(function(){
$("#report").css("visibility","visible");
for(var i=0; i<5; i++){
  var row='<tr><td>('+(i+1)+')</td></tr>'
  $("#report").append(row);
 }
});

Each time when i clicking the button, the same data were shown. How to avoid it? sqlfiddle: http://jsfiddle.net/etdx5o08/

I think this is what you are talking about - jsfiddle.net/etdx5o08/1 — Vigneswaran Marimuthu
– Vigneswaran Marimuthu, Commented Apr 23, 2015 at 6:58
You're not duplicating any data... you are adding 5 NEW rows every time. If you don't want to do that, either don't add 5 new rows every time (only do it once), or remove all the rows before adding new ones. — Hamza Kubba
– Hamza Kubba, Commented Apr 23, 2015 at 6:59

Wesley Smith · Accepted Answer · 2015-04-23 08:05:48Z

3

Do this:

$("#gen").click(function() {
       $("#report").parent().show();
       var rows='';
       for (var i = 0; i < 5; i++) {
         rows = rows+'<tr><td>(' + (i + 1) + ')</td><td></td></tr>'
       }
       $("#report").html(rows);
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="gen">Generate</button>
    <table border="1" style="display:none">
        <thead>
            <tr>
                <th>Sl.No.</th>
                <th>District Name</th>
            </tr>
        </thead>
        <tbody id="report"></tbody>
    </table>

edited Apr 23, 2015 at 8:05

answered Apr 23, 2015 at 6:58

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vigneswaran Marimuthu Over a year ago

How is this any different from code above ? I think Jack is talking about duplication of Sl.No

Wesley Smith Over a year ago

@VigneswaranMarimuthu It's different because it uses .html() which replaces all of the html in the element where as the OPs original code simply uses .append() to add each row to the element so when he clicks a second time, it appends the rows again under the first set duplicating the data...

jack rose Over a year ago

@DelightedD0D: Your code works fine. But in my question , at first, table was hidden and when the button clicked it must be visible.

Wesley Smith Over a year ago

@jackrose Ah, sorry, I removed that when testing and forgot to put it back, edited above

jack rose Over a year ago

@DelightedD0D: Thanks.. This is what I needed.! Thanks for spending time for me.

ozil · Accepted Answer · 2015-04-23 07:04:06Z

0

$("#gen").click(function(){
    $("#report").css("visibility","visible");
    var table = $("#report tbody tr");
    for(var i=0; i<5; i++){
        var row='<tr><td>('+(table.length+1+i)+')</td></tr>'
        $("#report").append(row);
    }
});

Demo

answered Apr 23, 2015 at 7:04

ozil

7,1639 gold badges38 silver badges62 bronze badges

Comments

Prem · Accepted Answer · 2015-04-23 07:26:46Z

0

To avoid duplicates, you can simply update js as below.

$("#gen").click(function(){
$("#report").css("visibility","visible");
$("#report").html('<tr><th>Sl.No.</th><th>District Name</th></tr>');
for(var i=0; i<5; i++)
    {
        var row='<tr><td>('+(i+1)+')</td></tr>'
        $("#report").append(row);
    }
});

Just adding the below line before loop starts.

$("#report").html('<tr><th>Sl.No.</th><th>District Name</th></tr>');

Here's jsFiddle.

Hope it helps :)

edited Apr 23, 2015 at 7:26

answered Apr 23, 2015 at 6:58

Prem

6,0043 gold badges27 silver badges24 bronze badges

2 Comments

Vigneswaran Marimuthu Over a year ago

This will add <tr><th>Sl.No.</th><th>District Name</th></tr> every time the button is clicked.

Wesley Smith Over a year ago

@VigneswaranMarimuthu no it wont, it will replace the element's html with <tr><th>Sl.No.</th><th>District Name</th></tr> every time the button is clicked, which solves the problem

Collectives™ on Stack Overflow

Avoid duplication using jquery

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related