0

I have a list of button from a table (table1) that if I clicked the button, it will append to another table (table2), and the button will be hide. At the table2, there's a button too to remove/delete from this table2 and then the button at table1 will be displayed again. Here's my code so far:

var rowNum = 0;
$('.addrow').on('click', function () {
        rowNum++;
        var barang = $(this).parent().find("input[name='rfdn']").val();
        var barangid = $(this).parent().find("input[name='rfdid']").val();
        var price = $(this).parent().find("input[name='rfdp']").val();
        var harga = $(this).parent().find("input[name='rfdpx']").val();
        var qty = $(this).parent().find("input[name='rfdq']").val();

        var row = '<tr id="rowNum' + rowNum + '">';
        row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
        row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
        row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
        row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
        jQuery('#refunds2').append(row);
        $(this).hide();
    });

    function removeRow(rnum) {
        jQuery('#rowNum' + rnum).remove();
        rowNum--;
        $(this).show();
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="list">
 <thead>
  <tr>
   <td>Product</td>
   <td>Refund</td>
   <td>Model</td>
   <td>Quantity</td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td class="left">Flesh Out</td>
   <td class="center">
    <input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
    <input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
    <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
    <a class="button addrow">Refund</a>
   </td>
   <td class="left">9786023759774</td>
   <td class="right">1</td>
  </tr>
  <tr>
   <td class="left">#About Love</td>
   <td class="center">
    <input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
    <input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
    <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
    <a class="button addrow">Refund</a>
   </td>
   <td class="left">9786020317786</td>
   <td class="right">1</td>
  </tr>
 </tbody>
</table>
<table id="refunds2" class="list">
    <thead>
        <tr>
            <td class="left">Product</td>
            <td>Refund Qty</td>
            <td>Price</td>
            <td></td>
        </tr>
    </thead>
</table>

To append new row it's already worked. But when I click delete button, the 'refund' button at table1 isn't coming up again. My data may be various, not only 2. Sometimes can be 5 or 10 or maybe 100

Cross Vander
  • 2,077
  • 2
  • 19
  • 33
  • can you have unique ID? it seem that you had duplicate id in there, which is not recommended, can you provide jsfiddle for ease of troubleshoot? – Se0ng11 Sep 12 '17 at 04:47
  • @CrossVander I have added an answer. see if that is what you want. – ab29007 Sep 12 '17 at 04:51

4 Answers4

1

The rowNum you are adding should be related to the addrow button which was hidden. so that after deleting you know which this button correponded to.

See the code below. I have added bootstrap just for styling purposes.

var rowNum = 0;
$('.addrow').on('click', function () {
        rowNum = $('.addrow').index(this);
        var barang = $(this).parent().find("input[name='rfdn']").val();
        var barangid = $(this).parent().find("input[name='rfdid']").val();
        var price = $(this).parent().find("input[name='rfdp']").val();
        var harga = $(this).parent().find("input[name='rfdpx']").val();
        var qty = $(this).parent().find("input[name='rfdq']").val();

        var row = '<tr id="rowNum' + rowNum + '">';
        row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
        row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
        row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
        row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
        jQuery('#refunds2').append(row);
        $(this).hide();
    });

    function removeRow(rnum) {
        jQuery('#rowNum' + rnum).remove();
        $('.addrow').eq(rnum).show();
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<table class="list table">
 <thead>
  <tr>
   <td>Product</td>
   <td>Refund</td>
   <td>Model</td>
   <td>Quantity</td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td class="left">Flesh Out</td>
   <td class="center">
    <input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
    <input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
    <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
    <a class="button addrow">Refund</a>
   </td>
   <td class="left">9786023759774</td>
   <td class="right">1</td>
  </tr>
  <tr>
   <td class="left">#About Love</td>
   <td class="center">
    <input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
    <input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
    <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
    <a class="button addrow">Refund</a>
   </td>
   <td class="left">9786020317786</td>
   <td class="right">1</td>
  </tr>
 </tbody>
</table>
<table id="refunds2" class="list table">
    <thead>
        <tr>
            <td class="left">Product</td>
            <td>Refund Qty</td>
            <td>Price</td>
            <td></td>
        </tr>
    </thead>
</table>
ab29007
  • 7,611
  • 2
  • 17
  • 43
  • magnificent! thank you very much... and thanks for the bootstrap... I just know can add bootstrap at snippet.. I already use bootstrap at my website... – Cross Vander Sep 12 '17 at 04:59
0

$(this).show() refers to removeRow function, not to addrow class . so, the easiest way is to change your html as <a class="button" >Refund</a> and then $(".addrow").show() instead of $(this).show()

like this:

var rowNum = 0;
$('.addrow').on('click', function () {
        rowNum++;
        var barang = $(this).parent().find("input[name='rfdn']").val();
        var barangid = $(this).parent().find("input[name='rfdid']").val();
        var price = $(this).parent().find("input[name='rfdp']").val();
        var harga = $(this).parent().find("input[name='rfdpx']").val();
        var qty = $(this).parent().find("input[name='rfdq']").val();

        var row = '<tr id="rowNum' + rowNum + '">';
        row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
        row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
        row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
        row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
        jQuery('#refunds2').append(row);
        $(this).hide();
    });

    function removeRow(rnum) {
        jQuery('#rowNum' + rnum).remove();
        rowNum--;
        $(".addrow").show();
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="list">
 <thead>
  <tr>
   <td>Product</td>
   <td>Refund</td>
   <td>Model</td>
   <td>Quantity</td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td class="left">Flesh Out</td>
   <td class="center">
    <input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
    <input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
    <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
    <a class="button addrow">Refund</a>
   </td>
   <td class="left">9786023759774</td>
   <td class="right">1</td>
  </tr>
  <tr>
   <td class="left">#About Love</td>
   <td class="center">
    <input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
    <input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
    <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
    <a class="button addrow">Refund</a>
   </td>
   <td class="left">9786020317786</td>
   <td class="right">1</td>
  </tr>
 </tbody>
</table>
<table id="refunds2" class="list">
    <thead>
        <tr>
            <td class="left">Product</td>
            <td>Refund Qty</td>
            <td>Price</td>
            <td></td>
        </tr>
    </thead>
</table>
SalmanAA
  • 552
  • 1
  • 6
  • 13
0

Add two id refund0 <a class="button addrow" id="refund0">Refund</a> and refund1<a class="button addrow" id="refund1">Refund</a> , then show those id at your removeRow 

function removeRow(rnum) {
            jQuery('#rowNum' + rnum).remove();
            rowNum--;
            $("#refund0").show();
            $("#refund1").show();
        }

function.

var rowNum = 0;
$('.addrow').on('click', function () {
        rowNum++;
        var barang = $(this).parent().find("input[name='rfdn']").val();
        var barangid = $(this).parent().find("input[name='rfdid']").val();
        var price = $(this).parent().find("input[name='rfdp']").val();
        var harga = $(this).parent().find("input[name='rfdpx']").val();
        var qty = $(this).parent().find("input[name='rfdq']").val();

        var row = '<tr id="rowNum' + rowNum + '">';
        row += '<td class="left"><input type="hidden" name="pitem[]" value="' + barangid + '" />' + barang + '</td>';
        row += '<td style="text-align:right;"><input type="number" min="1" max="' + qty + '" name="qty[]" value="1" class="form-control" /></td>';
        row += '<td style="text-align:right;"><input type="hidden" name="price[]" value="' + price + '" />' + harga + '</td>';
        row += '<td><a class="form-control btn btn-info btn-flat" onclick ="removeRow(' + rowNum + ')"><i class="fa fa-minus fa-fw"></i> Delete</a></td></tr>';
        jQuery('#refunds2').append(row);
        $(this).hide();
    });

    function removeRow(rnum) {
        jQuery('#rowNum' + rnum).remove();
        rowNum--;
        $("#refund0").show();
        $("#refund1").show();
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="list">
 <thead>
  <tr>
   <td>Product</td>
   <td>Refund</td>
   <td>Model</td>
   <td>Quantity</td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td class="left">Flesh Out</td>
   <td class="center">
    <input type="hidden" class="rf" value="12101" id="rfdid" name="rfdid">
    <input type="hidden" class="rf" value="Flesh Out" id="rfdn" name="rfdn">
    <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
    <a class="button addrow" id="refund0">Refund</a>
   </td>
   <td class="left">9786023759774</td>
   <td class="right">1</td>
  </tr>
  <tr>
   <td class="left">#About Love</td>
   <td class="center">
    <input type="hidden" class="rf" value="3413" id="rfdid" name="rfdid">
    <input type="hidden" class="rf" value="#About Love" id="rfdn" name="rfdn">
    <input type="hidden" class="rf" value="1" id="rfdq" name="rfdq">
    <a class="button addrow" id="refund1">Refund</a>
   </td>
   <td class="left">9786020317786</td>
   <td class="right">1</td>
  </tr>
 </tbody>
</table>
<table id="refunds2" class="list">
    <thead>
        <tr>
            <td class="left">Product</td>
            <td>Refund Qty</td>
            <td>Price</td>
            <td></td>
        </tr>
    </thead>
</table>
Minar Mnr
  • 1,376
  • 1
  • 16
  • 23
  • Hello, thanks for answer. Sounds like impossible. My data right now only 2, but it can be various... Maybe 3,4,5, even 100... By the way, when I click delete at 1 data, it shows up all refund button :) – Cross Vander Sep 12 '17 at 04:42
  • in that case you need to use data-id . Below link may help you : https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute quote "when I click delete at 1 data, it shows up all refund button" .... can you explain this line little bit more ... actually what are you looking for at that time ? – Minar Mnr Sep 12 '17 at 04:48
  • Well, so I need an increment ID for my data? There's no way to use just a class? WHat I mean about that words is: when I run your snippet, I try to press refund at data1 and data2, when I click delete data1 at table2, data2 refund button coming up too... – Cross Vander Sep 12 '17 at 04:50
  • yes you will need an increment data or unique data for each row ... i will edit my answer , then that problem will solve. – Minar Mnr Sep 12 '17 at 04:54
0

Instead of $(this).show() you only need to replace "this" to ".addrow".

function removeRow(rnum) {
    jQuery('#rowNum' + rnum).remove();
    rowNum--;
    $('.addrow').show();
}
rahulkoriya
  • 141
  • 4