Здравствуйте. Помогите пожалуйста реализовать механизм, который при условии наличия строк в таблице будет добавлять в конце строку с общей суммой по колонке 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>
Add
не добавлять строки в таблицу и из инпутов добавлять ячейкам значения, а надо заносить данные в массив/объект, и уже на основе массива/объекта строить таблицу. Тогда иИтого
можно будет добавить основываясь банально наarray.length
........отправить данные на сервер тоже будет явно проще