Слева - цены продажи в сундук, справа - цены покупки из сундука.
Можно прямо в таблице вводить количество, всё посчитает.


Код для новости:

Слева - цены продажи в сундук, справа - цены покупки из сундука. <input id="filter" placeholder="Фильтр..." style="background-color: #fff; border: 1px solid #a98969; padding: 3px; width: 550px; display: block; margin-bottom: 10px;"><div id="data"> <!-- НИЖЕ МОЖНО РЕДАКТИРОВАТЬ --> - Фермер {ITEM 28696} 1.50z max 80000 {ITEM 28689} 15.15з 16.15з max 50000 {ITEM 28694} 15.15с 16.15с {ITEM 28701} 16c {ITEM 28699} 55m 60m - Прочее <span class="itemType2">Эссенции стихий</span>70м 74м </div><style>.res-table { margin-bottom: 10px; border-collapse: collapse;}.res-table td { width: 60px; text-align: right;}.res-table tr > * { padding: 4px; border: 1px solid #123;}.res-table td:first-child { width: 260px; text-align: left; font-weight: bold;}.res-table th { text-align: left; background-color: #169; font-weight: bold; color: white;} .item-qty { width: 80px; text-align: center; padding-left: 10px; background-color: white; border: 1px solid #999 } .res-table .cost { width: 100px } .res-table td[colspan="2"] {text-align: center} .max-qty { color: #200; font-weight: normal;} .total-costs { display: none; position: fixed; top: 0; left: 0; right: 0; background-color: #fff1ba; padding: 5px 200px 5px 0; text-align: center; box-shadow: 1px 1px 5px #000; z-index: 999999; } .reset-btn { padding: 3px 20px; background-color: #fff; margin-left: 20px; box-shadow: 1px 1px 2px #999; cursor: pointer;} </style><script>var _f = { two_digits: function(n) { /* 1 → 10, 15 → 15, 157 → 15 */ n *= 10; while (100 < n) n /= 10; return n; }, to_copper: function(g, s, c) { return g * 10000 + s * 100 + c; }, money_format: function(val) { var g = val / 10000 | 0; var s = (val - g * 10000) / 100 | 0; var c = val % 100; g = g ? '<span class="gold money"><span></span>' + g + '</span>' : ''; s = s ? '<span class="silver money"><span></span>' + s + '</span>' : ''; c = c ? '<span class="copper money"><span></span>' + c + '</span>' : ''; return g + s + c || 0; }, DRAKO_ML: function(str) { var LT = '<'; var GT = '>'; return str.replace(/\{LT\}/g, LT).replace(/\{GT\}/g, GT); },};var app = { root: document.querySelector('#data'), new_table: function() { var table = document.createElement('table'); table.className = 'res-table'; return table; }, th_row: function(name) { var tr = document.createElement('tr'); var th = tr.appendChild(document.createElement('th')); th.setAttribute('colspan', '4'); th.textContent = name; return tr; }, _row_id: 0, row_list: [], new_row: function(item, costs, max_qty) { /* item {any string (html)} costs [150, 170?] (in copper) max_qty: Number */ if (0 < max_qty) { item += _f.DRAKO_ML('{LT}span class="max-qty"{GT}(Макс ' + max_qty + '){LT}/span{GT}'); } var tr = document.createElement('tr'); tr.dataset.row_id = this._row_id++; this.row_list.push(tr); tr.appendChild(this.td(item)); tr.appendChild(this.td('<input class="item-qty" value="1" type="number" min="0">')); var sell = this.td(_f.money_format(costs[0]), 'cost'); sell.dataset.cost = costs[0]; tr.appendChild(sell); if (costs.length == 1) { sell.setAttribute('colspan', 2); } else { var buy = this.td(_f.money_format(costs[1]), 'cost'); buy.dataset.cost = costs[1]; tr.appendChild(buy); } return tr; }, td: function(inner, _class_) { var td = document.createElement('td'); td.innerHTML = String(inner).replace(/onload|onerror/ig, ''); if (_class_) td.className = _class_; return td; }, total_costs: {}, update_total_costs: (function() { var div = document.createElement('div'); div.className = 'total-costs'; document.body.appendChild(div); var txt = document.createElement('span'); div.appendChild(txt); var reset_btn = document.createElement('button'); reset_btn.className = 'reset-btn'; reset_btn.textContent = 'Сброс'; div.appendChild(reset_btn); reset_btn.addEventListener('click', function() { app.reset(); }); return function() { div.style.display = 'block'; var o = this.total_costs; var sell = 0, buy = 0; for (var k in o) { sell += o[k][0]; buy += o[k][1]; } txt.innerHTML = 'Всего: ' + _f.money_format(sell) + ' (продажа); ' + _f.money_format(buy) + ' (покупка);'; } })(), reset: function() { var _tmp = app.total_costs; for (var k in _tmp) delete _tmp[k]; var inp = document.querySelectorAll('.item-qty'); for (var i = 0; i < inp.length; i++) { inp[i].value = 1; var tr = inp[i].parentNode.parentNode; var costs = tr.querySelectorAll('.cost'); for (var k = 0; k < costs.length; k++) { costs[k].innerHTML = _f.money_format(costs[k].dataset.cost); } } this.update_total_costs(); }};app.data = { undefined: { root: app.new_table(), items: [], },};app.parse = function(text) { var arr = text.split(/<\s?[/\\]?\s?br\s?[/\\]?\s?>/); for (var i = 0; i < arr.length; i++) this.parse_line(arr[i]);};app.parse_line = function(line) { line = (line || '').trim(); if (!line) return; if (line[0] == '-') { line = line.replace(/^-+\s*/, ''); this.last_section = line; if (!this.data[line]) { var table = this.new_table(); table.appendChild(this.th_row(line)); this.data[line] = { table: table, items: [], }; } return; } var section = this.data[this.last_section]; var table = section.table; var items = section.items; var costs = []; /* 150, 160 (in copper) */ var max = 0; line = line.replace(/(\d+)\s?(?:[.,]\s?(\d+))?\s*([мсзmcz])/ig, money_replacer).trim(); line = line.replace(/max\s*(\d+)\s*/g, max_lim_replacer); if (0 < costs.length) { items.push(table.appendChild(this.new_row(line, costs, max))); } function max_lim_replacer(_, qty) { max = Number(qty); return ''; } function money_replacer(_, int, dec, type) { int = Number(int); dec = Number(dec || 0); if (/[зz]/i.test(type)) { costs.push(_f.to_copper(int, _f.two_digits(dec), 0)); return ''; } if (/[сc]/i.test(type)) { var gold = 0; if (100 < int) { gold = int / 100 | 0; int = int % 100; } costs.push(_f.to_copper(gold, int, _f.two_digits(dec))); return ''; } if (/[мm]/i.test(type)) { var silver = 0; if (100 < int) { silver = int / 100 | 0; int = int % 100; } costs.push(_f.to_copper(0, silver, int)); return ''; } }};app.insert = function() { var data = this.data; /* = { "рыболов": { root: node<table>, items: [tr, tr, tr], }, "охотник": { ... } } */ this.root.textContent = ''; for (var section_name in data) { if (data[section_name].items.length == 0) continue; this.root.appendChild(data[section_name].table); }};app.root.addEventListener('input', function(e) { if (!/item-qty/.test(e.target.className)) return; var qty = +e.target.value || 0; var tr = e.target.parentNode.parentNode; var costs = tr.querySelectorAll('.cost'); var _tmp = app.total_costs[tr.dataset.row_id] = []; for (var i = 0; i < costs.length; i++) { var price = qty * costs[i].dataset.cost; costs[i].innerHTML = _f.money_format(qty * costs[i].dataset.cost); _tmp[i] = price; } if (_tmp.length == 1) _tmp[1] = _tmp[0]; app.update_total_costs();});app.parse(app.root.innerHTML);app.insert();(function() { var trs = app.row_list; var names = []; for (var i = 0; i < trs.length; i++) { names[i] = trs[i].querySelector('td').textContent.toLowerCase(); } var en_ru = { '`': 'е', 'q': 'й', 'w': 'ц', 'e': 'у', 'r': 'к', 't': 'е', 'y': 'н', 'u': 'г', 'i': 'ш', 'o': 'щ', 'p': 'з', '[': 'х', ']': 'ъ', 'a': 'ф', 's': 'ы', 'd': 'в', 'f': 'а', 'g': 'п', 'h': 'р', 'j': 'о', 'k': 'л', 'l': 'д', ';': 'ж', "'": 'э', 'z': 'я', 'x': 'ч', 'c': 'с', 'v': 'м', 'b': 'и', 'n': 'т', 'm': 'ь', ',': 'б', '.': 'ю', '/': '.', ' ': ' ', }; function fix_wrong_layout(str) { return str.split('').map(function(e) {return en_ru[e] || e}).join(''); } var f = document.querySelector('#filter'); f.focus(); f.addEventListener('input', function() { var val = this.value.toLowerCase(); var alt = fix_wrong_layout(val); for (var i = 0; i < trs.length; i++) { var show = names[i].indexOf(val) > -1 || names[i].indexOf(alt) > -1; trs[i].style.display = show ? '' : 'none'; } for (var key in app.data) { var d = app.data[key]; var d_trs = d.items; var hide_table = true; for (var i = 0; i < d_trs.length; i++) { if (d_trs[i].style.display == '') hide_table = false; } if (d.table) d.table.style.display = hide_table ? 'none' : ''; } });})(); document.head.insertAdjacentHTML('beforeEnd', '<style>.b-content__posts .b-input__element.js-form-content {height: 80vh;min-height: 80vh;}');</script>

Cинтаксис для редакции таблицы:
• Любая строчка текста, которая начинается с тире -, считается заглавлением таблицы.
• Цены можно указывать через буквы 'з', 'с', 'м' или 'z', 'c', 'm', через точку или запятую: 1,5з или 1.5z
• Для названия предмета нет никаких правил. Использую ITEM-ы, но можно подсунуть любой текст. Из строчки вырезаются цены, максимально допустимое количество, а то что осталось - считается названием предмета.