2017-05-24 125 views
1

当我从下拉列表中选择项目,并且如果用户将再次添加它将添加到表格中,它应该显示错误,该项目已被添加。重复记录不应该被允许

<select id="dropdownUsers"></select> 
<table border="1" id="tableshow"> 
    <thead> 
     <tr> 
      <td>ID</td> 
      <td>Name</td> 
      <td>unit Price</td> 
      <td>qunatity</td> 
      <td>total</td> 
      <td>Actions</td> 
     </tr> 
    </thead> 

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

Ajax调用绑定表

var val = $("#dropdownUsers").val(); 
          $.ajax({ 
           dataType: 'json', 
           type: 'POST', 
           contentType: "application/Json; charset=utf-8", 
           url: '/Home/fillDropdownbyids', 
           data: JSON.stringify({ id: val }), 
           success: function (response) { 
            $("#id").append(response.user.iUserInfoId + " ") 
            var tr = ''; 


            tr += '<tr class="row"><td class="rowid' + val + '">' + response.user.iUserInfoId + '</td><td>' + response.user.strFirstName + '</td><td><input type="text" id="unittextbox' + val + '"></td><td><input type="text" id="quantextbox' + val + '" onfocusout="get(' + val + ')"></td><td><input type="text" id="totaltextbox' + val + '" ></td><td><input type="button" value="Delete" onclick="deleteRow(this)"></td></tr>'; 


            $('#tabledata').append(tr); 
           }, 
          }); 

这将从表中提取了第一款TD行则返回ID的数组列表

$('#tableshow > tbody > tr ').each(function (index, td) { 
        arr = $(this).find('td'); 
        arrlist[index] = arr[0].innerHTML; 
        index++; 
       }); 

,我想将这个td值与下拉选择值进行比较,如果它匹配,则它应该显示该记录存在,否则它允许将数据插入到表中

+2

为什么不从下拉列表中删除选定的元素被添加到表后? – Gerard

+1

其实我允许用户删除该行,如果它是由错误.so添加,那么它会创建问题,我可以做到这一点,删除按钮,我已经做了一个Ajax调用,但我不希望它会去服务器端每时间并通过id获取该产品...所以可以使用其他解决方案 –

回答

0

试试这个:

var val = $("#dropdownUsers").val(); 
var isAvailiable = myFunction(val); 
if(isAvailiable){ 
$.ajax({ 
     dataType: 'json', 
     type: 'POST', 
     contentType: "application/Json; charset=utf-8", 
     url: '/Home/fillDropdownbyids', 
     data: JSON.stringify({ id: val }), 
     success: function (response) { 
         $("#id").append(response.user.iUserInfoId + " ") 
         var tr = ''; 
         tr += '<tr class="row"><td class="rowid' + val + '">' + response.user.iUserInfoId + '</td><td>' + response.user.strFirstName + '</td><td><input type="text" id="unittextbox' + val + '"></td><td><input type="text" id="quantextbox' + val + '" onfocusout="get(' + val + ')"></td><td><input type="text" id="totaltextbox' + val + '" ></td><td><input type="button" value="Delete" onclick="deleteRow(this)"></td></tr>'; 
         $('#tabledata').append(tr); 
          }, 
    }) 
} else { 
    //Show error message 
} 

//Call this before calling myFuction(); 
$('#tableshow > tbody > tr ').each(function (index, td) { 
    arr = $(this).find('td'); 
    arrlist[index] = arr[0].innerHTML; 
    index++; 
}); 

//Function to check that value is present array or not 
function myFunction(val){ 
    var isAvailiable = false 
    for(i=0;i<arrlist.length;i++){ 
     if(arrlist[i] === val){ 
      isAvailiable = true; 
     } 
    } 
    return isAvailiable; 
}