Обновление JavaScript <tr>и <td>в зависимости от выбора ввода - PullRequest
Новая
       8

Обновление JavaScript <tr>и <td>в зависимости от выбора ввода

0 голосов
/ 04 марта 2019

Я столкнулся с довольно большой проблемой и не могу приблизиться к решению.Я не лучший в JS и пытаюсь выучить этот язык, и я верю, что вы сможете дать мне хотя бы несколько советов, если не полное решение.

Пример CodePen того, чего я пытаюсь достичь, может бытьнайдено ЗДЕСЬ .И ниже: 

<input type="search" id="myInput" onSearch="myFunction()" placeholder="scan sku id here">
<p id="mySearch"></p>
<table> 
<th>SKU ID</th>
    <th>QTY</th>
  <tBody>
    <tr>
      <td>SKU1</td>
      <td id="totalSKU">6</td>
    </tr>
    <tr>
      <td>SKU2</td>
      <td id="totalSKU">8</td>
    </tr>
  </tBody>
</table>
<br/>
<p>TOTAL:<p>
<p id="myVar">0</p>

<script>
  var x = document.getElementById("myInput");
  var y = document.getElementById('totalSKU').innerText;
  var z = 0;

function myFunction() {
  document.getElementById("mySearch").innerHTML = x.value;
    if(y>0)
    {
      document.getElementById('totalSKU').innerText = --y;
      document.getElementById('myVar').innerText = ++z;
    }
  else
    alert("Cannot Proceed!");
}
</script>

В общем, я ищу решение, которое позволило бы мне манипулировать данными на экране, представленном пользователю, без влияния на базу данных.

Мой отчет просто покажет несколько строкданных с sku_id, description и qty.

У пользователя будет запрошено два ввода.Идентификатор ящика, который будет отображать все SKU, содержащиеся в этом ящике - с этим проблем нет.После этого пользователю будет предложено отсканировать идентификатор SKU в поле sku.

Теперь у меня возникают следующие проблемы:

  1. Изменение / вычитание qty где sku_id = ввод пользователя sku_id
  2. Обновить фон всей строки, где qty = 0
  3. Должно отображать общее количество отсканированных элементов, но не допускать чрезмерного сканирования.

Надеюсь, я был достаточно ясен, но если выЕсли у вас есть дополнительные вопросы, не стесняйтесь спрашивать, и я с радостью помогу вам.

Заранее большое спасибо.

1 Ответ

0 голосов
/ 04 марта 2019

Первое, что я заметил, вы должны использовать parseInt () в своих вычислениях.Когда вы получаете innerText узла, он возвращается как String, а затем вам нужно проанализировать его, прежде чем выполнять какие-либо математические операции с ним (например, уменьшить его).

Далее у вас есть 2 идентификатора, которые являютсято же самое (totalSKU), идентификаторы должны быть уникальными.Поэтому я обновил их, чтобы иметь 1 и 2 в конце.Когда поиск проходит, он добавляет поиск к идентификатору, чтобы получить правильный.Вы должны добавить больше проверок вокруг этого (например, если поиск не является действительным числом).

Я также обновил некоторые имена переменных, чтобы было более понятно в приведенном ниже примере.В этом примере вы можете ввести 1 или 2 в поиске, и это уменьшит правильный SKU. 

var searchInput = document.getElementById("myInput");

function myFunction() {
  var totalVar = document.getElementById('myVar');
  var searchValue = parseInt(searchInput.value);
  var totalSKU = document.getElementById(`totalSKU${searchValue}`);
  
  if(totalSKU === null){
    alert("no SKU found");
    return;
  }
  
  var totalSKUNumber = parseInt(totalSKU.innerText);

  document.getElementById("mySearch").innerText = searchValue;

  if (totalSKUNumber > 0) {
    totalSKU.innerText = --totalSKUNumber;
    totalVar.innerText = parseInt(totalVar.innerText) - 1;
  } else {
    alert("Cannot Proceed!");
  }
}
<input type="search" id="myInput" onSearch="myFunction()" placeholder="scan sku id here">
<p id="mySearch"></p>
<table>
  <th>SKU ID</th>
  <th>QTY</th>
  <tBody>
    <tr>
      <td>SKU1</td>
      <td id="totalSKU1">6</td>
    </tr>
    <tr>
      <td>SKU2</td>
      <td id="totalSKU2">15</td>
    </tr>
  </tBody>
</table>
<br/>
<p>TOTAL:
  <p>
    <p id="myVar">21</p>
...