0

Здравствуйте. Помогите пожалуйста реализовать механизм, который при условии наличия строк в таблице будет добавлять в конце строку с общей суммой по колонке Price? Спасибо!

function insertRow(id) {
  var tbody = document.getElementById(id),
    row = document.createElement("tr"),
    cellCounter = document.getElementById("myTable").rows.length;

  var checkbox = document.createElement("input");
  checkbox.type = 'checkbox';
  checkbox.className = 'checkbox_done';
  checkbox.setAttribute('onclick', 'deleteRow(event)');

  var btnEdit = document.createElement("input");
  btnEdit.type = 'image';
  btnEdit.className = 'btnEdit';
  btnEdit.src = 'icons/edit.png';
  btnEdit.addEventListener('click', function() {
    editButton();
    return false;
  });

  var btnDelete = document.createElement("input");
  btnDelete.type = 'image';
  btnDelete.className = 'btnDelete';
  btnDelete.src = 'icons/delete.png';
  btnDelete.setAttribute('onclick', 'delButton(event)');

  var tdNum = document.createElement("td");
  tdNum.setAttribute("id", "td1_id");
  tdNum.appendChild(document.createTextNode(cellCounter));

  var tdDone = document.createElement("td");
  tdDone.appendChild(checkbox);

  var tdItem = document.createElement("td");
  tdItem.appendChild(document.createTextNode(document.getElementById("add_id").value));

  var tdQuant = document.createElement("td");
  tdQuant.appendChild(document.createTextNode(document.getElementById("quant_id").value));

  var tdPrice = document.createElement("td");
  tdPrice.appendChild(document.createTextNode(document.getElementById("price_id").value));

  var tdAction = document.createElement("td");
  tdAction.setAttribute('colspan', '2');
  tdAction.appendChild(btnEdit);
  tdAction.appendChild(btnDelete);

  row.appendChild(tdNum);
  row.appendChild(tdDone);
  row.appendChild(tdItem);
  row.appendChild(tdQuant);
  row.appendChild(tdPrice);
  row.appendChild(tdAction);

  tbody.appendChild(row);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="css/style.css" rel="stylesheet">
  <title>Cart - Shopping List</title>
</head>

<body class="body">
  <div class="menu">
    <ul class="list">
      <li class="li_index"><a class="link_index" href="index.html">Shopping list</a></li>
      <li class="li"><a class="link" href="done.html">Done</a></li>
      <li class="li"><a class="link" href="deleted.html">Deleted</a></li>
    </ul>
  </div>
  <div class="main">
    <h1 class="h1">Shopping List</h1>
    <hr class="hr">
    <div class="inputs">
      <input class="input_add" type="text" id="add_id" placeholder="Add items to you Shopping List">
      <input class="input_quant" type="text" id="quant_id" placeholder="Quant.">
      <input class="input_price" type="text" id="price_id" placeholder="Price">
      <button class="input_button" type="button" onclick="insertRow('myTable');return false;">Add</button>
    </div>
  </div>

  <div class="table">
    <table class="mytable" id="myTable" cellspacing="0" border="1">
      <tbody id="tbody">
        <tr id="tr_id" class="tr">
          <td>#</td>
          <td>Done</td>
          <td>Item</td>
          <td>Quantity</td>
          <td>Price $</td>
          <td colspan="2" width="100">Action</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>
<script src="js/main.js"></script>

</html>

2
  • 1
    подход неправильный. нужно по нажатии Add не добавлять строки в таблицу и из инпутов добавлять ячейкам значения, а надо заносить данные в массив/объект, и уже на основе массива/объекта строить таблицу. Тогда и Итого можно будет добавить основываясь банально на array.length ........отправить данные на сервер тоже будет явно проще 24 дек 2017 в 15:43
  • К сожалению, подход хоть и не правильный, но пока приходится работать с тем, что имеем... И реализовать "итого" по сумме нужно именно исходя из имеющейся реализации. Если оставить все так "рукожопно" как есть? Что в таком случае нужно делать чтобы получить результат? 26 дек 2017 в 9:52

1 ответ 1

1

Например так:

В таблицу class="table", в конец, руками добавляем строку id="sum-row" в которой есть столбец id="show-sum". А при каждом сабмите вставляем новую строку перед строкой id="sum-row" с помощью insertBefore (столбцу Price назначаем общий класс price), суммируем class="price", вставляем в столбец id="show-sum".

function insertRow(id) {
  var tbody = document.getElementById(id),
    row = document.createElement("tr"),
    cellCounter = document.getElementById("myTable").rows.length;

  var checkbox = document.createElement("input");
  checkbox.type = 'checkbox';
  checkbox.className = 'checkbox_done';
  checkbox.setAttribute('onclick', 'deleteRow(event)');

  var btnEdit = document.createElement("input");
  btnEdit.type = 'image';
  btnEdit.className = 'btnEdit';
  btnEdit.src = 'icons/edit.png';
  btnEdit.addEventListener('click', function() {
    editButton();
    return false;
  });

  var btnDelete = document.createElement("input");
  btnDelete.type = 'image';
  btnDelete.className = 'btnDelete';
  btnDelete.src = 'icons/delete.png';
  btnDelete.setAttribute('onclick', 'delButton(event)');

  var tdNum = document.createElement("td");
  tdNum.setAttribute("id", "td1_id");
  tdNum.appendChild(document.createTextNode(cellCounter));

  var tdDone = document.createElement("td");
  tdDone.appendChild(checkbox);

  var tdItem = document.createElement("td");
  tdItem.appendChild(document.createTextNode(document.getElementById("add_id").value));

  var tdQuant = document.createElement("td");
  tdQuant.appendChild(document.createTextNode(document.getElementById("quant_id").value));

  var tdPrice = document.createElement("td");
  tdPrice.appendChild(document.createTextNode(document.getElementById("price_id").value));
  // столбцу добавляем класс, по которому будем выбирать суммы
  tdPrice.classList += "price";

  var tdAction = document.createElement("td");
  tdAction.setAttribute('colspan', '2');
  tdAction.appendChild(btnEdit);
  tdAction.appendChild(btnDelete);

  row.appendChild(tdNum);
  row.appendChild(tdDone);
  row.appendChild(tdItem);
  row.appendChild(tdQuant);
  row.appendChild(tdPrice);
  row.appendChild(tdAction);

  //-----------------------  
  var sumRow = document.getElementById('sum-row');
  var parentE = sumRow.parentNode;
  parentE.insertBefore(row, sumRow);
  //-----------------------
  var prices = document.getElementsByClassName('price');
  var sum = 0;
  for (i = 0, j = 0; i < prices.length; i++) {
    sum += Number(prices[i].innerText);
  }
  document.getElementById('show-sum').innerHTML = sum;
  //-----------------------
}
#sum-row{border-color:transparent}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="css/style.css" rel="stylesheet">
  <title>Cart - Shopping List</title>
</head>

<body class="body">
  <div class="menu">
    <ul class="list">
      <li class="li_index"><a class="link_index" href="index.html">Shopping list</a></li>
      <li class="li"><a class="link" href="done.html">Done</a></li>
      <li class="li"><a class="link" href="deleted.html">Deleted</a></li>
    </ul>
  </div>
  <div class="main">
    <h1 class="h1">Shopping List</h1>
    <hr class="hr">
    <div class="inputs">
      <input class="input_add" type="text" id="add_id" placeholder="Add items to you Shopping List">
      <input class="input_quant" type="text" id="quant_id" placeholder="Quant.">
      <input class="input_price" type="text" id="price_id" placeholder="Price">
      <button class="input_button" type="button" onclick="insertRow('myTable');return false;">Add</button>
    </div>
  </div>

  <div class="table">
    <table class="mytable" id="myTable" cellspacing="0" border="1">
      <tbody id="tbody">
        <tr id="tr_id" class="tr">
          <td>#</td>
          <td>Done</td>
          <td>Item</td>
          <td>Quantity</td>
          <td>Price $</td>
          <td colspan="2" width="100">Action</td>
        </tr>
        <tr id="sum-row" class="tr">
          <td colspan="4"></td>
          <td id="show-sum"></td>
          <td colspan="2" width="100"></td>
        </tr>
      </tbody>
    </table>
    <div id="show-sum" style="text-align:right"></div>
  </div>

</body>
<script src="js/main.js"></script>

</html>

Ваш ответ

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

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