2017-07-18 30 views
0

我现在比较两个单元格值时有问题。在我使用onclick函数获取特定单元格值之前。因此,我可以轻松地比较两个项目,但现在我需要自动比较两个项目并添加引导类别成功(如果它们相同)。我现在使用的代码如下所示。比较表单元格的两个值添加类如果相同

的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>

+0

检查'var newpoqty = qtyperbox.replace(“PCS”,“”); var newstocks = qtyperbox.replace(“PCS”,“”);'同样我认为你需要改变数值?你也可以'Number()'所以你不需要使用替换 – guradio

+0

var newpoqty = qtyperbox.replace(“PCS”,“”); var newstocks = qtyperbox.replace(“PCS”,“”);'不影响它只是删除字符串值@guradio – Ailyn

+0

'qtyperbox'没有在代码中定义。问题是:“如果第二个和第四个单元格的内容相同,我如何向表格行添加类?”也就是说,您正试图将PO数量与库存进行比较? – nnnnnn

回答

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>

+0

谢谢工作正常。 :) – Ailyn

1

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>

相关问题