Jquery Dynami c проверка формы таблицы - PullRequest
Новая
       17

Jquery Dynami c проверка формы таблицы

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

Итак, я пытаюсь создать систему ранжирования. Для этого мне нужна форма, которую я генерирую по клику. На данный момент эта форма в основном имеет два поля ввода, а именно rankFrom и rankTo. что я хочу сделать, это проверить их. Например, поле rankTo должно быть равно единице или больше, чем rankFrom, после этого, когда пользователь нажимает кнопку, вставляется новая строка. Я хочу такую ​​же проверку и для этого поля. Но это В какой-то момент я хочу, чтобы вышеуказанное поле строки (rankTo) и новая вставленная строка rankFrom были проверены таким образом, чтобы rankTo (выше строки) был на единицу меньше, чем rankFrom (новая сгенерированная строка). Общий результат, который я хочу, должен быть в заданном формате, например, {1,2}, {2,3} {3,10}, {11,19}, и должен быть непрерывным.

Может быть, я не так ясно, поэтому я прилагаю документ для большей ясности. Здесь - это Документ.

И для добавления новой строки по клику сделано, я просто застрял в этой проверке. 

<body>
    <form id="myForm">
      <table id="dynamicTable1">
        <thead>
          <th>Id</th>
          <th>Name</th>
          <th>Age</th>
          <th>Place</th>
          <th>Skill</th>
        </thead>
        <tr id="0">
          <td><input type="text" id="fld1" class="rankFrom0" /></td>
          <td><input type="text" id="fld2" class="rankTo0" /></td>
          <!-- <td><input type="text" id="fld3" /></td>
        <td><input type="text" id="fld4" /></td>
        <td><input type="text" id="fld5" /></td> -->
          <td><button class="remove">Remove</button></td>
          <td><p class="values">Values</p></td>
        </tr>
      </table>
    </form>

    <input type="button" id="addrow" value="Add New Row" />

    <table class="samplerow" style="display:none">
      <tr>
        <td><input type="text" id="fld1" /></td>
        <td><input type="text" id="fld2" /></td>
        <!-- <td><input type="text" id="fld3" /></td>
        <td><input type="text" id="fld4" /></td>
        <td><input type="text" id="fld5" /></td> -->
        <td><button class="remove">Remove</button></td>
        <td><p class="values">Values</p></td>
      </tr>
    </table>
  </body>
  <script>
    jQuery(document).ready(function() {
      var id = 1;
      jQuery('#addrow').click(function() {
        id++;
        var row2 = $(this).parents('tr');

        var row = jQuery('.samplerow tr').clone(true);
        row.find('input:text').val('');
        row.attr('id', id);
        row.find('#fld1').addClass('rankFrom' + id);
        console.log(row.find('#fld2').addClass('rankTo' + id));
        row.appendTo('#dynamicTable1');
        return false;
      });

      $('.remove').on('click', function() {
        $(this)
          .parents('tr')
          .remove();
      });

      $('.values').on('click', function() {
        var abc = $(this).parents('tr');

        $('#myForm input[type=text').each(function(index, val) {
          console.log(val.val());
        });

        console.log(abc.find('#fld1'));
      });
    });
  </script>
</html>
...