0

Есть 2 таблицы:Товары и корзина

введите сюда описание изображения

При нажатии на кнопку "Добавить товар" добавляется запись во вторую таблицу. Так же, в корзине мы можем изменить "Количество", тогда должна тут же меняться "Сумма", именно этот момент и не получается реализовать

function addRow(id) {
  var name = document.getElementById("gds").value;
  var count = document.getElementById("cnt").value;
  var price = document.getElementById("prc").value;
  //кусок кода где пытался реализовать изменение
  var summa = price * count;
  var add_input = document.createElement("input");
  add_input.setAttribute("type", "number");
  add_input.setAttribute("name", "numb");
  add_input.setAttribute("value", count);
  add_input.setAttribute("onchange", "changeSum(count, price)");


  var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
  var row = document.createElement("TR");
  var td1 = document.createElement("TD");
  td1.appendChild(document.createTextNode(name));
  var td2 = document.createElement("TD");
  td2.appendChild(add_input);
  var td3 = document.createElement("TD");
  td3.appendChild(document.createTextNode(price));
  var td4 = document.createElement("TD");
  td4.appendChild(document.createTextNode(summa));
  row.appendChild(td1);
  row.appendChild(td2);
  row.appendChild(td3);
  row.appendChild(td4);

  var td5 = document.createElement("TD");
  row.appendChild(td5);
  td5.setAttribute('onmousedown', 'this.parentNode.parentNode.removeChild (this.parentNode);');
  td5.innerHTML = "Удалить";
  tbody.appendChild(row);
}
// пытался сделать функцию для изменения
function changeSum(count, price) {
  var summa;
  summa = price * count;
  return summa;
}
#add {
  border: 1px solid black;
  width: 300px;
  height: 150px;
}

#btn {
  margin-left: 70px;
  margin-top: 10px;
}

#basketForm {
  border: 1px solid black;
  display: inline-block;
}

#basketTable tr+tr:hover {
  background: #f3bd48;
  /* Цвет фона при наведении */
  color: #fff;
  /* Цвет текста при наведении */
}
Товары
<form id="add">
  <table>
    <tr>
      <td>Название товара: </td>
      <td>
        <select id="gds">
          <option>Молоко</option>
          <option>Хлеб</option>
          <option>Сигареты</option>
          <option>Алкоголь</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Количество товара: </td>
      <td><input type="number" id="cnt" /></td>
    </tr>
    <tr>
      <td>Цена товара: </td>
      <td><input type="number" id="prc" /></td>
    </tr>
  </table>
  <input type="button" id="btn" onclick="addRow('basketTable')" value="Добавить в корзину" />
</form>
<br />

<form id="basketForm">
  <table id="basketTable" border="1">
    <tr>
      <th>Товар</th>
      <th>Количество</th>
      <th>Цена</th>
      <th>Сумма</th>
      <th></th>
    </tr>
  </table>
</form>

1 ответ 1

3

Во-первых, в функцию передадим только текущий елемент события - текстовое поле

add_input.setAttribute("onchange", "changeSum(this)");
add_input.setAttribute("onkeyup", "changeSum(this)");
add_input.setAttribute("onmouseup", "changeSum(this)");

Так же будем запускать функцию не только при изменении, но и при отпускании кнопки мыши и клавиатуры.

Далее:

function changeSum(el) {
    // Количество - значение переданого елемента
    var count = el.value;

    // Елемент цены - берем родительский елемент input'а (tr) и следующий от него елемент
    var priceElement = el.parentElement.nextSibling;
    var total = count*priceElement.innerText;

    // Елемент "итого" - следующий после цены
    var totalElement = priceElement.nextSibling;
    totalElement.innerText = total;
}

function addRow(id) {
  var name = document.getElementById("gds").value;
  var count = document.getElementById("cnt").value;
  var price = document.getElementById("prc").value;

  //кусок кода где пытался реализовать изменение
  var summa = price * count;
  var add_input = document.createElement("input");
  add_input.setAttribute("type", "number");
  add_input.setAttribute("name", "numb");
  add_input.setAttribute("value", count);

  add_input.setAttribute("onchange", "changeSum(this)");
  add_input.setAttribute("onkeyup", "changeSum(this)");
  add_input.setAttribute("onmouseup", "changeSum(this)");


  var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
  var row = document.createElement("TR");
  var td1 = document.createElement("TD");
  td1.appendChild(document.createTextNode(name));
  var td2 = document.createElement("TD");
  td2.appendChild(add_input);
  var td3 = document.createElement("TD");
  td3.appendChild(document.createTextNode(price));
  var td4 = document.createElement("TD");
  td4.appendChild(document.createTextNode(summa));
  row.appendChild(td1);
  row.appendChild(td2);
  row.appendChild(td3);
  row.appendChild(td4);

  var td5 = document.createElement("TD");
  row.appendChild(td5);
  td5.setAttribute('onmousedown', 'this.parentNode.parentNode.removeChild (this.parentNode);');
  td5.innerHTML = "Удалить";
  tbody.appendChild(row);
}
// пытался сделать функцию для изменения
function changeSum(el) {
  var count = el.value;
  var priceElement = el.parentElement.nextSibling;
  var total = count*priceElement.innerText;

  var totalElement = priceElement.nextSibling;
  totalElement.innerText = total;
}
#add {
  border: 1px solid black;
  width: 300px;
  height: 150px;
}

#btn {
  margin-left: 70px;
  margin-top: 10px;
}

#basketForm {
  border: 1px solid black;
  display: inline-block;
}

#basketTable tr+tr:hover {
  background: #f3bd48;
  /* Цвет фона при наведении */
  color: #fff;
  /* Цвет текста при наведении */
}
Товары
<form id="add">
  <table>
    <tr>
      <td>Название товара: </td>
      <td>
        <select id="gds">
          <option>Молоко</option>
          <option>Хлеб</option>
          <option>Сигареты</option>
          <option>Алкоголь</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Количество товара: </td>
      <td><input type="number" id="cnt" /></td>
    </tr>
    <tr>
      <td>Цена товара: </td>
      <td><input type="number" id="prc" /></td>
    </tr>
  </table>
  <input type="button" id="btn" onclick="addRow('basketTable')" value="Добавить в корзину" />
</form>
<br />

<form id="basketForm">
  <table id="basketTable" border="1">
    <tr>
      <th>Товар</th>
      <th>Количество</th>
      <th>Цена</th>
      <th>Сумма</th>
      <th></th>
    </tr>
  </table>
</form>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.