Javascript:比较表中的值

Question

我目前正在学习 JavaScript 并完成了 Codecademy 和 Codeschool 上的一些类(class)。我现在对如何用 JavaScript 编写函数有了一些了解。我熟悉 if else 语句等，但有一件事我就是无法理解，这就是为什么我希望你能帮助我并解释它是如何工作的，这样我就可以从中学习并在将来自己使用它。我昨天搜索了一整天，也尝试了很多东西，但就是不管用。

我有一个包含一些值(包括 jsfiddle)的表，这些值不像示例中那样是静态的，但每天都会更改。 基本上它是什么:它是一张表格，显示某人必须工作多少小时以及他已经工作了多少小时。需要比较这些值以查看是否存在任何差异。如果存在差异，则应在选中的行中打上 X。

在 JSfiddle 中，我放置了一些不起作用的 JavaScript。但这就是我关于应该如何实现它的想法(我很肯定它是朝着那个方向发展的，但我仍然是一个初学者)。

我仍然不太了解 JavaScript 的是我如何在我的 HTML 页面中实现此代码以使其工作。我不知道如何从我的比较函数中的表中获取特定值。如果这有意义吗？

无论如何，这是代码http://jsfiddle.net/3JDQQ/1/

    window.onload = function check(a, b){ /* a and b should represent Hours a and Hours b, this hasnt been declarated */
    for(i = 1; i <= id.length; i++){ /* id.lenght isnt a value I've declarated.  */
        if( a != b ){
            /* place nothing at check */
        } else {
            /* place a X at check */
        }
    }
}

点击整个代码的 fiddle 。 放入其中的值是静态的，但它们将是动态的。所以我需要一个函数在每次加载页面时检查这些数字。

Answer 1

可视化您将编写的脚本的一个好方法是说出它应该如何工作。

例如:

I need to iterate over each table row and compare value x in column 1 to value y in column 2 and output the difference into column 3.

一旦我们有了可视化，我们就可以开始编写我们的函数了:

function compareCellValues() {

  var rows = $("#comparisonTable").find("tbody tr"); //returns all table rows

  rows.each(function() { //iterate over each row.

    var thisRow = $(this), //this is the current row
        hoursA = thisRow.find(".hoursA"), //this is the first value
        hoursB = thisRow.find(".hoursB"); //this is the second value

    if (hoursA.text() !== hoursB.text()) {
      thisRow.find(".check").text("X");
    }

    thisRow.find(".difference").text(parseInt(hoursA.text()) - parseInt(hoursB.text()));

  });

}

window.onload = compareCellValues();

table {
  border-spacing: 0;
  border-collapse: collapse;
}
thead {
  display: table-header-group;
}
tr {
  page-break-inside: avoid;
}
td,
th {
  padding: 0;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="comparisonTable">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Hours a</th>
      <th>Hours b</th>
      <th>Diffrence</th>
      <th>Check</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Developer</td>
      <td class="hoursA">3</td>
      <td class="hoursB">1</td>
      <td class="difference"></td>
      <td class="check"></td>
    </tr>
    <tr>
      <td>1</td>
      <td>Developer</td>
      <td class="hoursA">3</td>
      <td class="hoursB">3</td>
      <td class="difference"></td>
      <td class="check"></td>
    </tr>
    <tr>
      <td>1</td>
      <td>Developer</td>
      <td class="hoursA">3</td>
      <td class="hoursB">2</td>
      <td class="difference"></td>
      <td class="check"></td>
    </tr>
    <tr>
      <td>1</td>
      <td>Developer</td>
      <td class="hoursA">3</td>
      <td class="hoursB">3</td>
      <td class="difference"></td>
      <td class="check"></td>
    </tr>
  </tbody>
</table>

为了简单起见，我使用了 jQuery:

现在根据 hours a 和 hours b 值计算差值。

还要尝试为您的函数命名，以便名称反射(reflect)它们将执行的功能。仅仅称之为检查太笼统了，因为您将来可能有更多想要检查的东西。