How to delete and add back values in table using javascript

Question

In my scenario just select the list box options, that values and text going to append to the table rows, but i am facing small issues, user not allow to select same options (already selected options) and user not allow to append same values in the table.. if user select same option show alert messages like, 'you are already selected, select another option' like that..

but here now if i delete any rows and add back that same value, it showing alert 'its matching', i don't need that, if i delete and add back the same value into the table..

Full Fiddle here..

Fiddle here..

Sample code here..

// Small table

// Exiscisting supplier dropdown change function - for new method

$("#excist_supp").on("change", function() {

  if (!check()) {
    $(".indexDrop").hide();

    var newText = $("#excist_supp option:selected").text();
    var newValue = $("#excist_supp option:selected").val();
    console.log(newText, 'not yet to delete');
    console.log(newValue, 'not yet to delete');

    // delete button
    $("table.order-list").on("click", ".ibtnDel", function(_event) {
      var $row = $(this).closest("tr"); // Find the row
      var $text = $row.find(".newStyle1").val(''); // Find the text
      var $secTd = $row.find(".newStyle2").val('');
      $(this).closest("tr").remove();
    });


    $("#letterTable tbody").append('<tr><td><input type="text" id="sm_supp" value="' + newText + '" class="form-control newStyle1" name="sm_supp"></td><td><input type="text" id="sm_code" value="' + newValue + '" class="form-control newStyle2" name="sm_code"></td><td><button type="button" class="adRow ibtnDel newExcist" style="width:30%;position: relative;right: 25%; margin-bottom:0px">x</button></a></td></tr>');



    $("#letterTable tr").each(function(i) {

      var count = (i) - 1;
      // alert(count);
      if (i === 0) return;
      var input1 = $(this).find('.newStyle1');
      var input2 = $(this).find('.newStyle2');

      // id
      // Dropdowns increment
      input1.eq(0).attr("id", "sm_supp" + count); // Text fields
      input2.eq(0).attr("id", "sm_code" + count);
      input1.eq(0).attr("name", "reqpartys[" + count + "].pname"); // Text fields
      input2.eq(0).attr("name", "reqpartys[" + count + "].pacd");
    });
  }

});

/* compare two fields and not allow to selected options to select second time */

var temp = [];

function check() {
  var listVal = $('#excist_supp').val();
  var tableVal = $('.newStyle2').val();
  var nawTab = JSON.stringify(tableVal);

  if (temp.includes(listVal)) {
    alert('matching!');
    $(".notify").addClass("active");
    $("#notifyType").addClass("failure");

    setTimeout(function() {
      $(".notify").removeClass("active");
      $("#notifyType").removeClass("failure");
    }, 3000);
    return true;
  } else {
    // alert('Not matching!');
    temp.push(listVal)
    return false;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- List box -->

<div class="col-sm-6">
  <div class="col-12">
    <div class="row">
      <div class="col-12">
        <div class="selector">
          <select class="col-12 listbox newBox" name="List_0" size="20" id="excist_supp" style="height: 125px !important;">
            <option class="indexDrop">Choose Existing Suppliers</option>
            <option value="0000">Komal </option>
            <option value="0001">Ranjeet</option>
            <option value="0002">Vishal </option>
            <option value="0003">Gaurav</option>
            <option value="0004">Dhanpat</option>
            <option value="0005">Joe</option>
            <option value="0006">Gowri</option>
            <option value="0007">shankar</option>
            <option value="0008">Dhanpat</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Small table -->
<div class="col-5">
  <div class="container">
    <div class="row clearfix">
      <div class="table-wrapper">
        <div class="table-scroll">
          <table id="letterTable" class="table table-bordered table-striped order-scroll order-list">
            <thead>
              <tr style="background-color: #680f79;color: #fff;">
                <th class="text-center">Supplier Name</th>
                <th class="text-center">Supplier Code</th>
                <th class="text-center">Action</th>
              </tr>
            </thead>
            <tbody id="mytbody" style="text-align: center;">

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

The problem is with your temp array variable... you add the rows to it but never remove it from the array. In your delete function, check if row exist in temp array and if it does, delete it — GBWDev
– GBWDev, Commented Feb 25, 2020 at 9:23

GBWDev · Accepted Answer · 2020-02-25 09:38:36Z

It's like I stated in the comments. Your delete function runs a check to see if it already exists or not in the table and is storing them into a variable called temp. You need to remove the deleted row from this variable in the delete function otherwise it will think it always exists hence your problem....

  if(temp.includes($row.find(".newStyle2").val())){
      temp = temp.filter(v => v != $row.find(".newStyle2").val())
  }

// Small table

// Exiscisting supplier dropdown change function - for new method
var temp = [];
$("#excist_supp").on("change", function() {

  if (!check()) {
    $(".indexDrop").hide();

    var newText = $("#excist_supp option:selected").text();
    var newValue = $("#excist_supp option:selected").val();
    console.log(newText, 'not yet to delete');
    console.log(newValue, 'not yet to delete');

    // delete button
    $("table.order-list").on("click", ".ibtnDel", function(_event) {
      var $row = $(this).closest("tr"); // Find the row
      var $text = $row.find(".newStyle1").val(''); // Find the text
      
      if(temp.includes($row.find(".newStyle2").val())){
        temp = temp.filter(v => v != $row.find(".newStyle2").val())
      } 
      
      
      var $secTd = $row.find(".newStyle2").val('');
      $(this).closest("tr").remove();
      delete newText;
      delete newValue;

      console.log(newText, 'value deleted');
      console.log(newValue, 'value deleted');
    });


    $("#letterTable tbody").append('<tr><td><input type="text" id="sm_supp" value="' + newText + '" class="form-control newStyle1" name="sm_supp"></td><td><input type="text" id="sm_code" value="' + newValue + '" class="form-control newStyle2" name="sm_code"></td><td><button type="button" class="adRow ibtnDel newExcist" style="width:30%;position: relative;right: 25%; margin-bottom:0px">x</button></a></td></tr>');



    $("#letterTable tr").each(function(i) {

      var count = (i) - 1;
      // alert(count);
      if (i === 0) return;
      var input1 = $(this).find('.newStyle1');
      var input2 = $(this).find('.newStyle2');

      // id
      // Dropdowns increment
      input1.eq(0).attr("id", "sm_supp" + count); // Text fields
      input2.eq(0).attr("id", "sm_code" + count);
      input1.eq(0).attr("name", "reqpartys[" + count + "].pname"); // Text fields
      input2.eq(0).attr("name", "reqpartys[" + count + "].pacd");
    });
  }

});

/* compare two fields and not allow to selected options to select second time */



function check() {
  var listVal = $('#excist_supp').val();
  var tableVal = $('.newStyle2').val();
  var nawTab = JSON.stringify(tableVal);

  if (temp.includes(listVal)) {
    alert('matching!');
    $(".notify").addClass("active");
    $("#notifyType").addClass("failure");

    setTimeout(function() {
      $(".notify").removeClass("active");
      $("#notifyType").removeClass("failure");
    }, 3000);
    return true;
  } else {
    // alert('Not matching!');
    temp.push(listVal)
    return false;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- List box -->

<div class="col-sm-6">
  <div class="col-12">
    <div class="row">
      <div class="col-12">
        <div class="selector">
          <select class="col-12 listbox newBox" name="List_0" size="20" id="excist_supp" style="height: 125px !important;">
            <option class="indexDrop">Choose Existing Suppliers</option>
            <option value="0000">Komal </option>
            <option value="0001">Ranjeet</option>
            <option value="0002">Vishal </option>
            <option value="0003">Gaurav</option>
            <option value="0004">Dhanpat</option>
            <option value="0005">Joe</option>
            <option value="0006">Gowri</option>
            <option value="0007">shankar</option>
            <option value="0008">Dhanpat</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Small table -->
<div class="col-5">
  <div class="container">
    <div class="row clearfix">
      <div class="table-wrapper">
        <div class="table-scroll">
          <table id="letterTable" class="table table-bordered table-striped order-scroll order-list">
            <thead>
              <tr style="background-color: #680f79;color: #fff;">
                <th class="text-center">Supplier Name</th>
                <th class="text-center">Supplier Code</th>
                <th class="text-center">Action</th>
              </tr>
            </thead>
            <tbody id="mytbody" style="text-align: center;">

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Harsimranjit Singh · Accepted Answer · 2020-02-25 09:48:41Z

you need to remove the value from your array as well when you are deleteing element row from your table. here is the fixed code please check and let me know if you need any help. you are just adding too much script that is not required.

// Exiscisting supplier dropdown change function - for new method
$("table.order-list").on("click", ".ibtnDel", function(_event) {
      var $row = $(this).closest("tr"); // Find the row
        var listVal =  $row.find(".newStyle2").val();
        delete temp[temp.indexOf(listVal)];
       $(this).closest("tr").remove();
    });


$("#excist_supp").on("change", function() {
  if (!check()) {
    $(".indexDrop").hide();
    var newText = $("#excist_supp option:selected").text();
    var newValue = $("#excist_supp option:selected").val();
   
    $("#letterTable tbody").append('<tr><td><input type="text" id="sm_supp" value="' + newText + '" class="form-control newStyle1" name="sm_supp"></td><td><input type="text" id="sm_code" value="' + newValue + '" class="form-control newStyle2" name="sm_code"></td><td><button type="button" class="adRow ibtnDel newExcist" style="width:30%;position: relative;right: 25%; margin-bottom:0px">x</button></a></td></tr>');
    $("#letterTable tr").each(function(i) {
      var count = (i) - 1;
      if (i === 0) return;
      var input1 = $(this).find('.newStyle1');
      var input2 = $(this).find('.newStyle2');
      input1.eq(0).attr("id", "sm_supp" + count); // Text fields
      input2.eq(0).attr("id", "sm_code" + count);
      input1.eq(0).attr("name", "reqpartys[" + count + "].pname"); // Text fields
      input2.eq(0).attr("name", "reqpartys[" + count + "].pacd");
    });
  }

});
/* compare two fields and not allow to selected options to select second time */
var temp = [];
function check() {
  var listVal = $('#excist_supp').val();
  var tableVal = $('.newStyle2').val();
  var nawTab = JSON.stringify(tableVal);
  if (temp.includes(listVal)) {
  alert('matching!');
    $(".notify").addClass("active");
    $("#notifyType").addClass("failure");

    setTimeout(function() {
      $(".notify").removeClass("active");
      $("#notifyType").removeClass("failure");
    }, 3000);
    return true;
  } else {
    // alert('Not matching!');
    temp.push(listVal)
    return false;
  }
}

     .letterSub {
        position: relative;
        top: 25px;
    }
    
    .order-scroll table.order-scroll {
        width: 100%;
        /* border-collapse: collapse; */
        border-spacing: 0;
    }
    /* To display the block as level element */
    
    table.order-scroll tbody,
    table.order-scroll thead {
        display: block;
    }
    
    table.order-scroll tbody {
        /* Set the height of table body */
        height: 130px;
        /* Set vertical scroll */
        overflow-y: auto;
        /* Hide the horizontal scroll */
        overflow-x: hidden;
    }
    
    .listbox {
        background: white;
        background: -webkit-linear-gradient(#ccc, white);
        background: -o-linear-gradient(#ccc, white);
        background: -moz-linear-gradient(#ccc, white);
        background: linear-gradient(#fff, white);
        border: 1px solid #ced4da;
        overflow: auto;
    }
    
    .listbox option {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .listbox option {
        padding: 5px;
        cursor: pointer;
    }
    
    .listbox option:hover {
        background-color: #bbb;
    }
    
    .listbox option.active {
        background: rgb(77, 176, 82);
    }
    
    option {
        -webkit-transition: background-color 200ms linear;
        -moz-transition: background-color 200ms linear;
        -o-transition: background-color 200ms linear;
        -ms-transition: background-color 200ms linear;
        transition: background-color 200ms linear;
    }
    
    .listbox::-webkit-scrollbar {
        width: 8px;
        border: 1px solid #ced4da;
    }
    
    .listbox::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
    }
    
    .listbox::-webkit-scrollbar-thumb {
        background: gray;
    }
    
    
    #excist_supp {
        height: 440px;
        width: 100%;
        margin: 10px;
        text-align: center;
        margin-bottom: 0px;
    }
    
    .selector {
        position: relative;
        margin-bottom: 0px;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="col-sm-6">
  <div class="col-12">
    <div class="row">
      <div class="col-12">
        <div class="selector">
          <select class="col-12 listbox newBox" name="List_0" size="20" id="excist_supp" style="height: 125px !important;">
            <option class="indexDrop">Choose Existing Suppliers</option>
            <option value="0000">Komal </option>
            <option value="0001">Ranjeet</option>
            <option value="0002">Vishal </option>
            <option value="0003">Gaurav</option>
            <option value="0004">Dhanpat</option>
            <option value="0005">Joe</option>
            <option value="0006">Gowri</option>
            <option value="0007">shankar</option>
            <option value="0008">Dhanpat</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Small table -->
<div class="col-5">
  <div class="container">
    <div class="row clearfix">
      <div class="table-wrapper">
        <div class="table-scroll">
          <table id="letterTable" class="table table-bordered table-striped order-scroll order-list">
            <thead>
              <tr style="background-color: #680f79;color: #fff;">
                <th class="text-center">Supplier Name</th>
                <th class="text-center">Supplier Code</th>
                <th class="text-center">Action</th>
              </tr>
            </thead>
            <tbody id="mytbody" style="text-align: center;">

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

How to delete and add back values in table using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related