Append row data with two condition using JavaScript or Jquery

I am trying to appending data with two conditions. It is not working properly::

Table 1: there are 2 field- a) input for employee id and b) drop-down for salary type

Table 2: Want to append data here with the condition of employee id and salary type

Condition would be prevent repeat data with id and salarytype. It is not working properly: for example I select

123 Basic 123 Normal 124 Basic 124 Normal => here it is not working. I want to add this row but failed to do that. I need to add row data and check employee id and salary type to prevent repeating.

Html

    <table>
        <tr>
            <td> 
                <input id="empid" placeholder="employeid">   
            </td>
            <td> 
                    <select id="salarytype">
                        <option value="Basic"> Basic</option> 
                        <option value="Normal"> Normal</option>
                    </select>    
            </td>
            <td><span id="button_add"> Add </span>  </td>
        </tr>
</table>


<table>
    <tbody id="test">
    </tbody>
</table>    

JavaScript

    var addedEmployeeId = [];
var addedSalaryType = [];

  $("#button_add").click(function () {

    ///getting data from a table 
    var tableData = $(this).closest("tr").find("td input").map(function () {
      return $(this).val();
    }).get();

    //getting salary type by dropdown
    var e = document.getElementById("salarytype");
    var salarytype = e.options[e.selectedIndex].value;

    var empid = document.getElementById("empid").value;
    var addedEmpid = $.trim(tableData[0]);

    //checking value in array
    var index = $.inArray(addedEmpid, addedEmployeeId);
    var salaryArray = $.inArray(salarytype, addedSalaryType);

    //appending data to another table
    if (index >= 0 && salaryArray >= 0) {
      alert("You already added Employee And Salary Type");
      exit;
    } else {
      if (empid == "") {
        alert("Please add Employee ID");
        exit;
      } else {
        $("#test").append(
          "<tr><td><input name='' value='" + $.trim(tableData[0]) + "' style='width: 120px;' readonly > </td><td><input value='" + salarytype + "' style='width: 100px;' readonly ></td></tr>");

        addedEmployeeId.push(addedEmpid);
        addedSalaryType.push(salarytype);
            }
        }   

    }); 

Helps are highly appreciated.

Answers


You need to make sure that the matched items in both arrays are at the same index..

Simply looping through the array as follows will solve the issue (assuming both have the same length):

for (var i = 0; i < addedEmployeeId.length; i++) {
    if (addedEmployeeId[i] == empid && addedSalaryType[i] == salarytype) {
        flag = true;
        break;
    }
}

Check this fiddle


I would use object structure for this job instead, it would simplify handling of it:

JavaScript:

var employees = {};

$("#button_add").click(function () {

   //getting data from a table 
   var tableData = $(this).closest("tr").find("td input").map(function () {
       return $(this).val();
   }).get();

   //getting salary type by dropdown
   var e = document.getElementById("salarytype");
   var salarytype = e.options[e.selectedIndex].value;

   var empid = document.getElementById("empid").value;
   var addedEmpid = $.trim(tableData[0]);

   // if employee added previous with addedEmpid and given salary, dont add!
   if(employees.hasOwnProperty(addedEmpid) && employees[addedEmpid].hasOwnProperty(salarytype)) {

      alert("You already added Employee And Salary Type");  

   } else if(empid == "") {

      alert("Please add Employee ID");

   } else {

      // if employee id unknown, we create the object
      if(!employees.hasOwnProperty(addedEmpid)) {
          employees[addedEmpid] = {};   
      }

      // adding salaratype for this id
      employees[addedEmpid][salarytype] = true;

      $("#test").append("<tr><td><input name='' value='" + $.trim(tableData[0]) + "' style='width: 120px;' readonly > </td><td><input value='" + salarytype + "' style='width: 100px;' readonly ></td></tr>");

      // for debugging...
      console.log(employees);

   }

});

When you have done adding all your given employees, for example:

123 Basic
123 Normal
124 Basic
124 Normal

Your resulting employees object will have the following structure:

{
   123: {
      Basic: true,
      Normal: true
   },
   124: {
      Basic: true,
      Normal: true
   }
}

This way you can even add another types easily than just Basic and Normal

See fiddle example, it works: js fiddle


Try This

JS

   var addedEmployeeId = [];
var addedSalaryType = [];

  $("#button_add").click(function () {

    ///getting data from a table 
    var tableData = $(this).closest("tr").find("td input").map(function () {
      return $(this).val();
    }).get();

    //getting salary type by dropdown
    var e = document.getElementById("salarytype");
    var salarytype = e.options[e.selectedIndex].value;

    var empid = document.getElementById("empid").value;
    var addedEmpid = $.trim(tableData[0]);

    //checking value in array
    var index = $.inArray(addedEmpid, addedEmployeeId);
    var salaryArray = $.inArray(salarytype, addedSalaryType);
var booltype=true;
    //appending data to another table
      $('#test tr').each(function(midex,mval){
          var empids=$(mval).find('td:eq(0)').find('input').val();
          var saltype=$(mval).find('td:eq(1)').find('input').val();
          if(parseInt(empids)==parseInt(addedEmpid) && (saltype==salarytype)){
                  booltype=false;

          }
      });
    if (booltype==false) {
      alert("You already added Employee And Salary Type");

    } else {
      if (empid == "") {
        alert("Please add Employee ID");

      } else {
        $("#test").append(
          "<tr><td><input name='' value='" + $.trim(tableData[0]) + "' style='width: 120px;' readonly > </td><td><input value='" + salarytype + "' style='width: 100px;' readonly ></td></tr>");

        addedEmployeeId.push(addedEmpid);
        addedSalaryType.push(salarytype);
            }
        }   

    });

DEMO HERE


Need Your Help

What's wrong with my Javascript regex?

javascript regex testing

I would like regex to match if and only if the string is none, family or work (but not my family, for example).