jQuery Не добавлять в таблицу, если заданное значение c уже существует - PullRequest
Новая
       1

jQuery Не добавлять в таблицу, если заданное значение c уже существует

0 голосов
/ 28 января 2020

Мой код полностью работает нормально, но меня беспокоит только то, как я могу проверить, существует ли добавленное значение в таблице. Это то, что я сделал. 

<body>
<form>
    <select id="name">
        <option value="-">-</option>
        <option value="Mark">Mark</option>
        <option value="James">James</option>
        <option value="Steve">Steve</option>
    </select>
    <input type="button" class="add-row" value="Add Row">
</form>
<table id="dynamic_field"></table>

Меня беспокоит только часть if ($('#dynamic_field').has(name)). Я хочу проверить, если он уже существует. 

    $(document).ready(function(){
    var i = 0;  
    $(".add-row").click(function(){
        i++;
        var name = $("#name").val();
        var markup = '<tr id="row'+i+'"> <td> <button type="button" name="remove" id="'+i+'" class="btn_remove">Delete </button> </td> <td> <input type="text" value="'+name+'" name="owners"> '+name+'</td> </tr>';
        if(name != '-') {
            if ($('#dynamic_field').has(name)) {
                alert('already exists in the table');
            } else {
                $('#dynamic_field').append(markup);
            }
        }
    });
    $(document).on('click', '.btn_remove', function(){  
     var button_id = $(this).attr("id");   
     $('#row'+button_id+'').remove();  
 });  
});

Ответы [ 3 ]

0 голосов
/ 28 января 2020

.has () возвращает элемент jquery, поэтому вы должны проверить длину и, поскольку name является переменной, а не каким-либо селектором, поэтому вы должны связать атрибут value с ним. 

if( $('#dynamic_field').has(":input[value="+name+"]").length ) {
   alert('already exists in the table');
}
0 голосов
/ 28 января 2020

Если вы не возражаете против использования немного ванили JS, вы можете воспользоваться (относительно новым) методом querySelectorAll, который принимает строку селектора, аналогичную jQuery, и работает немного быстрее. так как, ну, это просто JS.

Поскольку вы называете входы, вы можете также использовать их атрибут name, чтобы выбрать их:

  • '#dynamic_field input[name=owners]' выбирает входы
  • document.querySelectorAll('#dynamic_field input[name=owners]') возвращает NodeList
  • Array.from(document.querySelectorAll('#dynamic_field input[name=owners]')) преобразует указанный NodeList в массив, поэтому мы можем использовать some() для него
  • Array.from(document.querySelectorAll('#dynamic_field input[name=owners]')).some(input => input.value === name); возвращает true, если есть хотя бы один элемент, удовлетворяющий условию input.value === name.

querySelectorAll

Array.from

некоторые 

$(document).ready(function(){
    var i = 0;  
    $(".add-row").click(function(){
        var name = $("#name").val();
        var markup = '<tr id="row'+i+'"> <td> <button type="button" name="remove" id="'+i+'" class="btn_remove">Delete </button> </td> <td> <input type="text" value="'+name+'" name="owners"> '+name+'</td> </tr>';
    
        if(name !== '-'){
          const exists = Array.from(
                             document.querySelectorAll(
                                 '#dynamic_field input[name=owners]'
                             )).some(input => input.value === name);
          
          if (exists) {
              alert('already exists in the table');
          } else {
            i++;
            $('#dynamic_field').append(markup);
          }
        }     
    });
    
    $(document).on('click', '.btn_remove', function(){  
     var button_id = $(this).attr("id");   
     $('#row'+button_id+'').remove();  
 });  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <select id="name">
        <option value="-">-</option>
        <option value="Mark">Mark</option>
        <option value="James">James</option>
        <option value="Steve">Steve</option>
    </select>
    <input type="button" class="add-row" value="Add Row">
</form>
<table id="dynamic_field"></table>
0 голосов
/ 28 января 2020

Вам просто нужно использовать селектор, чтобы получить значение, существующее в таблице. 

 $(document).ready(function(){
    var i = 0;  
    $(".add-row").click(function(){
        i++;
        var name = $("#name").val();
        var markup = '<tr id="row'+i+'"> <td> <button type="button" name="remove" id="'+i+'" class="btn_remove">Delete </button> </td> <td> <input type="text" value="'+name+'" name="owners"> '+name+'</td> </tr>';
        if(name != '-') {
            var isExists=false;
            $("#dynamic_field tr input").each(function(){
              var val=$(this).val();
              if(val==name)
                isExists=true;
            }).val()
            if (isExists) {
                alert('already exists in the table');
            } else {
                $('#dynamic_field').append(markup);
            }
        }
    });
    $(document).on('click', '.btn_remove', function(){  
     var button_id = $(this).attr("id");   
     $('#row'+button_id+'').remove();  
 });  
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <select id="name">
        <option value="-">-</option>
        <option value="Mark">Mark</option>
        <option value="James">James</option>
        <option value="Steve">Steve</option>
    </select>
    <input type="button" class="add-row" value="Add Row">
</form>
<table id="dynamic_field"></table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...