javascript - 使用 JavaScript 或 Jquery 附加具有两个条件的行数据

Question

我正在尝试附加两个条件的数据。它无法正常工作::

表 1:有 2 个字段 - a) 员工 ID 输入和 b) 薪资类型下拉列表

表2:想要在此处附加数据，条件是员工 ID 和薪资类型

条件是防止重复具有 id 和工资类型的数据。它无法正常工作:例如我选择

123 基本 123 正常 124 基础 124 正常 => 这里不起作用。我想添加这一行但未能做到这一点。我需要添加行数据并检查员工 ID 和工资类型以防止重复。

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);
            }
        }   

    }); 

非常感谢您的帮助。

Answer 1

您需要确保两个数组中的匹配项位于相同的索引处。

只需按如下方式循环数组即可解决问题(假设两者具有相同的长度):

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

检查这个fiddle