HTML Table toggle-with-cache

JavaScript performance comparison

Test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
    </tr>
    <tr>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Coloumn</td>
        <td>two</td>
        <td>this</td>
    </tr>
    <tr>
        <td>3</td>
        <td>is</td>
        <td>not equals</td>
        <td>a</td>
    </tr>
    <tr>
        <td>4</td>
        <td>the</td>
        <td>Column</td>
        <td>real</td>
    </tr>
    <tr>
        <td>5</td>
        <td>first</td>
        <td>One</td>
        <td>Coloumn</td>
    </tr>
</table>

    

Preparation code output

<table id="codexpl"> <tr> <th>#</th> <th>Columna</th> <th>Relative</th> <th>Isso</th> </tr> <tr> <td>1</td> <td>This</td> <td>Column</td> <td>Is</td> </tr> <tr> <td>2</td> <td>Coloumn</td> <td>two</td> <td>this</td> </tr> <tr> <td>3</td> <td>is</td> <td>not equals</td> <td>a</td> </tr> <tr> <td>4</td> <td>the</td> <td>Column</td> <td>real</td> </tr> <tr> <td>5</td> <td>first</td> <td>One</td> <td>Coloumn</td> </tr> </table>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
with-cache
  var tr = $('table tr:not(:first-child)');
tr.on("click", function (e) {
    var $this = $(this);
    this.$siblings = this.$siblings || $this.siblings();
    this.$siblings.removeClass("ativo");
    $this.toggleClass("ativo");
});
pending…
each
  var tr = $('table tr:not(:first-child)');
  tr.on('click', function() {
    var self = this;
    tr.each(function() {
      if (this == self) $(this).toggleClass('colorir');
      else $(this).removeClass('colorir');
    })
  });
  $('table tr').eq(2).click();
pending…
not
var tr = $('table tr:not(:first-child)');
tr.on('click', function() {
     tr.not(this).removeClass('colorir');
     $(this).toggleClass('colorir');
});
$('table tr').eq(2).click();
pending…
without-cache
var tr = $('table tr:not(:first-child)');
tr.on("click", function (e) {
    $(this).siblings().removeClass("colorir");
    $(this).toggleClass("colorir");
});
$('table tr').eq(2).click();
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 Comments

# Columna Relative Isso
1 This Column Is
2 Coloumn two this
3 is not equals a
4 the Column real
5 first One Coloumn