Невозможно отобразить данные JSON в раскрывающемся списке в HTML-таблице - PullRequest
Новая
       7

Невозможно отобразить данные JSON в раскрывающемся списке в HTML-таблице

0 голосов
/ 27 ноября 2018

У меня есть таблица HTML с 4 строками, в которой отключены столбцы «Идентификатор заказа» и «Комментарии к продукту», а в других столбцах пользователь может вводить данные и отправлять.Когда пользователь вводит данные и нажимает кнопку отправки, в качестве возвращаемого значения я получаю объект JSON, который я повторяю и отображаю в таблице.

У меня есть два дорожных блока, где требуется помощь.

  1. Когда пользователь нажимает на кнопку отправки , вызывается функция submitData()где я получаю jsonData, который повторяется и показывается в таблице, но с моим кодом Product1, столбцы Product2, которые являются раскрывающимися списками, не отображают данные.

  2. Другая проблемакогда пользователь нажимает кнопку «Отправить» и получает данные, показанные в таблице, я хочу сделать столбец «Комментарии к продукту» как редактируемый (включен), а все остальные столбцы - в отключенном режиме .

Демонстрация кода: https://plnkr.co/edit/CEAYKI1SGuobosye1Pqk?p=preview

Ниже приведен пример кода, который я пробовал: 

//populate dropdown with the value

function populateSelect() {
  var ids = [{
    "pid": "laptop",
    "des": "laptop"
  }, {
    "pid": "Mobile",
    "des": "Mobile"
  }, {
    "pid": "IPAD mini.",
    "des": "IPAD mini."
  }]
  var productDropdown1 = $(".product1");
  var productDropdown2 = $(".product2");
  $.each(ids, function(index, value) {
    $("<option />").text(value.des).val(value.pid).appendTo(productDropdown1);
    $("<option />").text(value.des).val(value.pid).appendTo(productDropdown2);
  });

  $("select").change(function() {
    var row = $(this).closest("tr");
    var product1_drop = $('.product1', row).val();
    var product2_drop = $('.product2', row).val();
    var descValue = $('input[name="description"]', row).val();
    if (product1_drop && product2_drop)
      validate(product1_drop, product2_drop, descValue);
  });

  $('input[name="description"]').on('input', function(e) {
    var row = $(this).closest("tr");
    var product1_drop = $('.product1', row).val();
    var product2_drop = $('.product2', row).val();
    console.log("-inut -product1_drop----- " + product1_drop);
    if (product1_drop && product2_drop)
      validate(product1_drop, product2_drop, $(this).val());
  });
}

function validate(prod1, prod2, desc) {
  if (desc && prod1 === prod2) {
    alert('Product1 and Product2 cannot have same value');
  }
}

function submitData() {
  var flag = true;
  if (flag) {
    //after getting the values from backend hide the table1 and show table2
    var jsonData = [{
        "oid": "1023",
        "Product1": "laptop",
        "description": "Silver color",
        "product2": "IPAD Mini",
        "comments": "user comments row1",
        "productComments": "Product comments row1"
      },
      {
        "oid": "1024",
        "Product1": "Mobile",
        "description": "Samsung",
        "product2": "IPAD Mini",
        "comments": "user comments row2",
        "productComments": "product comments row2"
      }
    ];

    //iterate and show the jsonData in the table2 when user click on submit button
    $.each(jsonData, function(key, val) {
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(0) input').val(val.oid);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(1) select').val(val.product1);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(2) input').val(val.description);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(3) select').val(val.product2);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(4) input').val(val.comments);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(5) input').val(val.productComments);
    });
  }
}

$(document).ready(function() {
  populateSelect();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table id="productTable" border="1">

  <tr>
    <th>Order ID</th>
    <th>Product1</th>
    <th>Description</th>
    <th>Product2</th>
    <th>Comments</th>
    <th>Product Comments</th>
  </tr>

  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum1" disabled></td>
    <td>
      <select class="product1" id="prod1">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2" id="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum2" disabled></td>
    <td>
      <select class="product1" id="prod2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum3" disabled></td>
    <td>
      <select class="product1" id="prod3">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum4" disabled></td>
    <td>
      <select class="product1" id="prod4">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
</table> <br>
<input type="submit" value="submit" onclick="submitData()">
</body>

</html>

--- Отредактировано ---- Еще одна проблема, с которой я сталкиваюсь, заключается в том, что jsonData, который я получаю, когда пользователь нажимает кнопку подтверждения, имеет нулевое значениезначение, я хочу отобразить данные в строке, но показать строку красным цветом и не хочу отключать поля, чтобы пользователь мог снова ввести данные ..

пример: 

   var jsonData = [{
          "oid": "1023", 
          "product1": "laptop",  
          "description": "Silver color",
          "product2": "Mobile", 
          "comments":"user comments row1",
          "productComments":"Product comments row1"
        },
        {
          "oid": null,
          "product1": "Mobile", 
          "description": "Samsung",
          "product2": "laptop",
          "comments":"user comments row2",
          "productComments":"product comments row2"
        } 
      ];

В приведенном выше jsonData значение oid второй строки равно нулю, поэтому я хочу, чтобы вторая строка была выделена красным цветом и не отключать поля.и сбросьте / очистите все входные данные, которые пользователь ввел до нажатия кнопки отправки.

Код, который я использовал для сброса введенных пользователем значений перед нажатием кнопки отправки: 

   $('#productTable input[type="text"]').val('');
   $('.product1').val('');

Обновленный плункер: https://plnkr.co/edit/aEEFFSndWOpbGHp43bQT?p=preview

1 Ответ

0 голосов
/ 27 ноября 2018

Для продукта1 он работает правильно.Для product2 это только грамматическая ошибка в «product2»: «IPAD Mini», что должно быть «product2»: «IPAD Mini».с точкой в ​​конце.

Чтобы изменить включение полей: 

$('#productTable input, #productTable select').attr("disabled", "disabled");

$('#productTable tr ').each(function(){
    $('td:eq(2) input', this).removeAttr("disabled");
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...