JSFiddle - React, Tailwind, and code Playground

by goodstrik

HTML

<table infinite-scroll-throttle-delay="500" infinite-scroll-distance="420"><thead><tr><!----> <th></th> <th class=""><p class="hug"><svg no-print="" viewBox="0 0 24 24" style="width: 24px; height: 24px; opacity: 0.54; transform: rotate(0deg);"><path fill="#000000" d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg> <span print-only="">Статус</span> <!----></p></th><th class=""><p class="hug noselect">
              Дата
              <!----></p></th><th class=""><p class="hug noselect">
              № заказа
              <!----></p></th><th class=""><p class="hug noselect">
              SKU
              <!----></p></th><th class=""><p class="hug noselect">
              Продано (ед.)
              <!----></p></th><th class=""><p class="hug noselect">
              Цена (₽)
              <!----></p></th><th class=""><p class="hug noselect">
              Себестоимость (₽)
              <!----></p></th><th class=""><p class="hug noselect">
              К выводу (₽)
              <!----></p></th><th class=""><p class="hug noselect">
              Выведено (₽)
              <!----></p></th><th class=""><p class="hug noselect">
              Комиссия (₽)
              <!----></p></th></tr></thead> <tbody><tr class=""><!----> <td id="arrow-cell-1-308" class="arrow open"><!----></td> <td id="skuTitle-cell-1-308"><span>
        BONDAJ
      </span></td><td id="title-cell-1-308"><span>
        Бондаж
      </span></td><td id="amount-cell-1-308"><span>
                  7
                </span></td><td id="sellPrice-cell-1-308"><span>
        3487.00
      </span></td><td id="purchasePrice-cell-1-308"><span>
        1657.00
      </span></td><td id="sellerProfit-cell-1-308"><span>
        3487.00
      </span></td><td id="withdrawnProfit-cell-1-308"><span>
        1397.00
      </span></td><td id="commission-cell-1-308"><span>
        877.00
      </span></td></tr></table>

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())
}