テーブルセルの2つの値を比較してクラスを追加する場合

Question

現在、2つのセル値を比較する際に問題があります。私が前にonclick機能を使用して、特定のセル値を取得しました。したがって、私は2つのアイテムを簡単に比較することができますが、2つのアイテムを自動的に比較し、同じ場合はブートストラップクラスの成功を追加する必要があります。私が今使っているコードは以下の通りです。

JSFIDDLE：https://jsfiddle.net/aice09/ynh8wfc9/

var tables = document.getElementsByClassName('tb_jobsched'); 
 
var rows = tables[0].getElementsByTagName('tr'); 
 

 
var data = tables.row($(this).parents('tr')).data(); 
 
var poqty = data[5]; 
 
var stock= data[7]; 
 

 
var newpoqty = poqty .replace("PCS", ""); 
 
var newstocks = stock.replace("PCS", ""); 
 

 
if (newpoqty === newstocks) { 
 
    rows[i].classList.add("success"); 
 
} else { 
 

 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<table id="tb_jobsched" class="table table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <td>CUSTOMER</td> 
 
     <td>PO QUANTITY</td> 
 
     <td>DATE OF DELIVERY</td> 
 
     <td>STOCKS</td> 
 
    </tr> 
 
    </thead> 
 
    <tr> 
 
    <td>CUSTOMER 1</td> 
 
    <td>2000 PCS</td> 
 
    <td>2017/06/15</td> 
 
    <td>5000 PCS</td> 
 
    </tr> 
 
    <tr> 
 
    <td>CUSTOMER 2</td> 
 
    <td>500 PCS</td> 
 
    <td>2017/06/15</td> 
 
    <td>500 PCS</td> 
 
    </tr> 
 
</table>

Answer 1

const rows = document.querySelectorAll('#myTable tbody tr'); 
 

 
rows.forEach((row) => { 
 
\t const cells = row.getElementsByTagName('td'); 
 
    const poQty = cells[1].innerText; 
 
    const stocks = cells[3].innerText; 
 
    
 
    if (poQty === stocks) { 
 
    \t row.classList.add('success'); 
 
    } 
 
});

.success { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<table id="myTable" class="table table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <td>CUSTOMER</td> 
 
     <td>PO QUANTITY</td> 
 
     <td>DATE OF DELIVERY</td> 
 
     <td>STOCKS</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>CUSTOMER 1</td> 
 
     <td>2000 PCS</td> 
 
     <td>2017/06/15</td> 
 
     <td>5000 PCS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>CUSTOMER 2</td> 
 
     <td>500 PCS</td> 
 
     <td>2017/06/15</td> 
 
     <td>500 PCS</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

var tables = document.getElementsByClassName('tb_jobsched'); 
 
var rows = tables[0].getElementsByTagName('tr'); 
 

 
for(var i = 0; i< rows.length; i++) { 
 
\t var childs = rows[i].getElementsByTagName('td'); 
 
    var potqty = childs[1].innerHTML.replace('PCS', ''); 
 
    var stock = childs[3].innerHTML.replace('PCS', ''); 
 
    if(potqty === stock) { 
 
    \t rows[i].className += 'success'; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<table id="myTable" class="table table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <td>CUSTOMER</td> 
 
     <td>PO QUANTITY</td> 
 
     <td>DATE OF DELIVERY</td> 
 
     <td>STOCKS</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody class="tb_jobsched"> 
 
    <tr> 
 
     <td>CUSTOMER 1</td> 
 
     <td>2000 PCS</td> 
 
     <td>2017/06/15</td> 
 
     <td>5000 PCS</td> 
 
    </tr> 
 
    <tr> 
 
     <td>CUSTOMER 2</td> 
 
     <td>500 PCS</td> 
 
     <td>2017/06/15</td> 
 
     <td>500 PCS</td> 
 
    </tr> 
 
    </tbody> 
 
</table>