Question

我目前正在学习JavaScript并完成了一些关于Codecademy和Codeschool的课程。我现在对你如何在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 */
        }
    }
}

点击整个代码的小提琴。放在那里的值是静态的，但它们将是动态的。因此，每次加载页面时，我都需要一个能够通过这些数字的函数。

Answer 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 */
        }
    }
}

window.onload = function() { check(a,b); } // call it here.

Answer 2

这样做：

<强> Fiddle

function check(){
    var table = document.getElementById("mytable");
    var difference;

    for(var i=1; i<table.rows.length; i++){
        difference = (table.rows[i].cells[2].innerHTML*1) - (table.rows[i].cells[3].innerHTML*1);
        table.rows[i].cells[4].innerHTML = difference;
        table.rows[i].cells[5].innerHTML = difference == 0 ? '' : 'X';
    }
}

window.onload = check;

注意：

删除了内嵌onload，因为它是在JavaScript中设置的
将check()移至已提升的函数并将其分配给window.onload，以便在页面加载时调用
我为表格提供了一个ID，只是为了简单地为此演示获取句柄，但您可以使用任何想要获取表格的方法（例如按类名称）。
循环遍历表格行，从1开始，因此跳过标题。
代码中看到的*1将单元格的字符串内容强制转换为数字以进行减法。

完整性的jQuery版本：

Fiddle

$(function(){
    var table = $('#mytable'), difference;

    table.find('tbody > tr').each(function(){
        difference = ($(this).find('td:eq(2)').text()*1) - ($(this).find('td:eq(3)').text()*1);
        $(this).find('td:eq(4)').text(difference);
        $(this).find('td:eq(5)').text(difference == 0 ? '' : 'X');
    });
});

注意：如果您要将X替换为图片，请使用.html()代替.text()，或附加图片元素。

Answer 3

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

例如：

我需要迭代每个表行并比较第1列中的值x 在第2列中对y进行值，并将差值输出到第3列。

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

还尝试命名您的函数，以便名称反映它们将执行的功能。只是调用它检查太通用了，因为将来你可能想要检查更多的东西。

Javascript：比较表格中的值

3 个答案: