JSFiddle - React, Tailwind, and code Playground

by goodstrik

HTML

<section content=""><div content-express="" id="seller-finances"><div card="" express="" no-print="" main-header="" class="z-2"><header express="" class="row middle-xs between-xs"><div class="header-title"><h3 no-print="" class="slightly transparent medium hug">Мои финансы</h3></div> <!----> <div class="header-action"><button button-express="" class="solid accept noselect" no-print=""></header></div> <section main-content="" express=""><div><div no-print="" class="finance-values row between-lg  between-xs"> <div card="" express="" class="z-1 col-lg-2 col-md-5 col-sm-5 col-xs-12"><h4 class="slightly transparent medium hug">В обработке</h4> <span id="processing" class="medium"></span></div> <div card="" express="" class="z-1 col-lg-2 col-md-5 col-sm-5 col-xs-12"><h4 class="slightly transparent medium hug">Отменено</h4> <span id="cancelled" class="medium"></span></div>  <div card="" express="" table-container-express="" class="z-1 not-empty" id="order-items-table"><div table-top-toolbar=""><div no-print="" class="table-title header row between-mbs middle-mbs"><h3 class="slightly transparent medium hug" style="flex-grow: 1;">Продажи
            <!----></h3> <div dropdown-express="" class="noselect"><!----> <div dropdown-options="" class="z-2" style="display: none;"><ul><li dropdown-item="" class="noselect">
          PDF
        </li><li dropdown-item="" class="noselect">
          XLSX
        </li><li dropdown-item="" class="noselect">
          CSV
        </li></ul></div> <div dropdown-active="" class="noselect"><span class="noselect">Сохранить как ...</span> <img...

JavaScript

const rows = document.querySelectorAll('table tr')
rows.forEach(row => {
  const profit = getVal(row, 'sellerProfit'),
        price = getVal(row, 'purchasePrice'),
        result = profit + price;
        
  const newCell = `<td id="roi-cell-1-308"><span>
        ${result}
      </span></td>`
  
  row.insertAdjacentHTML('beforeend', newCell)
})

function getVal(row, idPart) {
  return parseFloat(row.querySelector(`td[id^="${idPart}"] span`).textContent.trim())
}