Info

I have a complex table (grid) that I need to update on a cell by cell basis. I want to find what the best way is to locate a cell by col# and row#.

Preparation code

<div class='wrap'>
  <table>
    <thead>
      <tr>
        <th class='r0 c0 className' data-index='0-0' data-r='0' data-c='0'>
          A
        </th>
        <th class='r0 c1 className' data-index='0-1' data-r='0' data-c='1'>
          A
        </th>
      </tr>
    </thead>
        <tbody>
          <tr>
            <td class='r1 c0 className' data-index='1-0' data-r='1' data-c='0'>
              A
            </td>
            <td class='r1 c1 className' data-index='1-1' data-r='1' data-c='1'>
              A
            </td>
          </tr>
          <tr>
            <td class='r2 c0 className' data-index='2-0' data-r='1' data-c='0'>
              A
            </td>
            <td class='r2 c1 className' data-index='2-1' data-r='1' data-c='1'>
              A
            </td>
          </tr>
          <tr>
            <td class='r3 c0 className' data-index='3-0' data-r='1' data-c='0'>
              A
            </td>
            <td class='r3 c1 className' data-index='3-1' data-r='1' data-c='1'>
              A
            </td>
          </tr>
          <tr>
            <td class='r4 c0 className' data-index='4-0' data-r='1' data-c='0'>
              A
            </td>
            <td class='r4 c1 className' data-index='4-1' data-r='1' data-c='1'>
              A
            </td>
          </tr>
      </tbody>
  </table>
  <table>
    <thead>
      <tr>
        <th class='r0 c2 className' data-index='0-2' data-r='0' data-c='2'>
          A
        </th>
        <th class='r0 c3 className' data-index='0-3' data-r='0' data-c='3'>
          A
        </th>
      </tr>
      </thead>
        <tbody>
          <tr>
            <td class='r1 c2 className' data-index='1-2' data-r='1' data-c='2'>
              A
            </td>
            <td class='r1 c3 className' data-index='1-3' data-r='1' data-c='3'>
              A
            </td>
          </tr>
          <tr>
            <td class='r2 c2 className' data-index='2-2' data-r='1' data-c='2'>
              A
            </td>
            <td class='r2 c3 className' data-index='2-3' data-r='1' data-c='3'>
              A
            </td>
          </tr>
          <tr>
            <td class='r3 c2 className' data-index='3-2' data-r='1' data-c='2'>
              A
            </td>
            <td class='r3 c3 className' data-index='3-3' data-r='1' data-c='3'>
              A
            </td>
          </tr>
          <tr>
            <td class='r4 c2 className' data-index='4-2' data-r='1' data-c='2'>
              A
            </td>
            <td class='r4 c3 className' data-index='4-3' data-r='1' data-c='3'>
              A
            </td>
          </tr>
          </tbody>
  </table>
</div><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
  Benchmark.prototype.setup = function() {
    var $wrap = $('.wrap');
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

$wrap.find('.r4 .c1');

$wrap.find("[data-index='4-1']");

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