html - Javascript: Compare values in a table

I'm currently learning JavaScript and pleted some courses on Codecademy and Codeschool. I now know a little bit about how you write functions in JavaScript. I'm familiar with the if else statements etc, but there is one thing that I just can't get the hang on and that's why I'm hoping you can help me with it and explain how it works so I can learn from it and use it myself in the future. I've searched a whole day yesterday and also tried a lot of things but it just doesn't work.

I have a table which contains some values (jsfiddle included), these values are not static as they are in the example but will change everyday. Basically what it is: it's a table which shows how many hours someone has to work and how many hours he had work. These values need to be pared to see if there is any difference. If there is a difference there should be a X in the checked row.

In the JSfiddle I've put some JavaScript that doesn't work. But that's the idea I had about how I should be implementing it (I'm quite positive that it is something in that direction, but again I'm still a beginner).

The thing that I still don't quite understand in JavaScript is how I implement this code in my HTML page so that it works. I don't know how to get a certain value from the table inside my parison function.. if that makes sense?

Anyway, this is the code /

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

Click the fiddle for the whole code. The values that are put in there are static, but they are going to be dynamic. So I need a function that goes through these numbers every time I load the page.

Anyway, this is the code http://jsfiddle/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 */
        }
    }
}

Click the fiddle for the whole code. The values that are put in there are static, but they are going to be dynamic. So I need a function that goes through these numbers every time I load the page.

Share Improve this question edited Jul 30, 2018 at 22:34 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Apr 22, 2014 at 11:58 Tbmluijten 1131 gold badge3 silver badges13 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

A good way of visualising the script you will write is to say how it should work.

For example:

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

Once we have that visualised we can begin to write our function:

function pareCellValues() {

  var rows = $("#parisonTable").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 = pareCellValues();

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="parisonTable">
  <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>

I've used jQuery for simplicity:

The difference value is now calculated based on the hours a and hours b values.

Also try to name your functions so that the name reflects the function they will perform. Just calling it check is too generic as you might have more things you want to check in the future.

This does it:

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;

Notes:

Removed the inline onload because it is set in the JavaScript
Moved check() to a hoisted function and assigned it to window.onload, to be called when the page loads
I gave the table an ID just for the simplicity of getting a handle on it for this demo, but you can use any means you want to get the table (for example by class name).
It loops through the table rows, starting at 1 so the header is skipped.
The *1 seen in the code is casting the string content of the cell to a number to do the subtraction.

jQuery version for pleteness:

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

Note: if you want to replace the X with an image, use .html() instead of .text(), or append the image element.

You should define your function outside and then call it inside 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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Javascript: Compare values in a table - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)