Skip to content

Instantly share code, notes, and snippets.

@dotob

dotob/nojquery_table_select.html

Created February 11, 2016 08:59
Show Gist options
  • Save dotob/26de79865d277419bce3 to your computer and use it in GitHub Desktop.
Save dotob/26de79865d277419bce3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dotob created this gist Feb 11, 2016.
    85 changes: 85 additions & 0 deletions nojquery_table_select.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,85 @@
    <html>
    <head>
    <title>brand</title>
    <style>
    .selected {background-color: lightgrey;}
    table {border:1px solid black;}
    td {border:1px solid black;}
    </style>
    <script type="text/javascript">
    // ready func for knowing when document is ready
    function ready(fn) {
    if (document.readyState != 'loading'){
    fn();
    } else {
    document.addEventListener('DOMContentLoaded', fn);
    }
    }

    // toggle a classname on an element
    function toggleClass(el, className){
    if (el.classList) {
    // has classes, toggle
    el.classList.toggle(className);
    } else {
    // has no classes...add
    el.className = className;
    }
    }

    // add clickevents when document is ready
    ready(function(){
    var rows = document.querySelectorAll("tbody tr");
    Array.prototype.forEach.call(rows, function(el, i){
    el.addEventListener('click', function(ev){
    toggleClass(ev.target.parentElement, 'selected');
    });
    });

    var columns = document.querySelectorAll("thead td");
    Array.prototype.forEach.call(columns, function(el, i){
    el.addEventListener('click', function(ev){
    var columnClassList = ev.target.className.split(' ');
    var selector = columnClassList.map(function(cn){return '.'+cn;}).join('');
    var cells = document.querySelectorAll(selector);
    Array.prototype.forEach.call(cells, function(el, i){
    toggleClass(el, 'selected');
    });
    });
    });
    });

    </script>
    </head>

    <body>
    <table>
    <thead>
    <tr>
    <td class="col1">
    col1
    </td>
    <td class="col2">
    col2
    </td>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td class="col1">
    data1
    </td>
    <td class="col2">
    data2
    </td>
    </tr>
    <tr>
    <td class="col1">
    data3
    </td>
    <td class="col2">
    data3
    </td>
    </tr>
    </tbody>
    </body>