javascript - 比较表格单元格的两个值,如果相同则添加类

标签 javascript jquery twitter-bootstrap twitter-bootstrap-3

我现在在比较两个单元格值时遇到问题。在我使用 onclick 函数获取特定单元格值之前。因此,我可以轻松比较两个项目,但现在我需要自动比较两个项目,如果它们相同,则添加 Bootstrap 类成功。我现在使用的代码如下。

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>

最佳答案

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

rows.forEach((row) => {
	const cells = row.getElementsByTagName('td');
  const poQty = cells[1].innerText;
  const stocks = cells[3].innerText;
  
  if (poQty === stocks) {
  	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>

关于javascript - 比较表格单元格的两个值,如果相同则添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45156718/

相关文章:

javascript - 未捕获的语法错误 : Unexpected identifier (alert connected)

javascript - 全局中止所有 jQuery AJAX 请求

javascript - "Drop Up"jQuery 中的菜单问题

html - CSS:希望文本在同一行

javascript - Z-index 和 wmode 不适用于 IE10 中的 YouTube 嵌入代码

javascript - Node js : Express js asynchronous db query execution-return results got undefiend

jquery - 搜索功能无法选择的文本

javascript - Bootstrap 选项卡内容/选项卡 Pane 上的 ng-repeat

django - Twitter Bootstrap的Django错误样式

javascript - 在网站上显示 .mov 作为加载屏幕的最佳方式