selectall

by Wolfgang Fahl

HTML

<script src="http://mottie.github.io/tablesorter/js/jquery.tablesorter.combined.js"></script>
<link rel="stylesheet" href="http://mottie.github.io/tablesorter/css/theme.blue.css">
<div id="generators">
             <form>
  <table class="table tablesorter tablesorter-blue sortable">
    <thead>
      <tr>
        <th>Topics</th><th></th>
        <th>Category</th>
        <th>Concept</th>
        <th>Form</th>
        <th>Help</th>
        <th>List of</th>
        <th>Template</th>
        <th>Properties</th>
      </tr>
      <tr>
        <th class='{sorter: false}'></th><th  class='{sorter: false}'><label><input type="checkbox" id="selectall" name="selectall"/>Select all</label></th>
        <th class='{sorter: false}'><label><input class='checkboxSelect' type='checkbox' id='select_col_0'/>Select col</label></th>
        <th class='{sorter: false}'><label><input class='checkboxSelect' type='checkbox' id='select_col_1'/>Select col</label></th>
        <th class='{sorter: false}'><label><input class='checkboxSelect' type='checkbox' id='select_col_2'/>Select col</label></th>
        <th class='{sorter: false}'><label><input class='checkboxSelect' type='checkbox' id='select_col_3'/>Select col</label></th>
        <th class='{sorter: false}'><label><input class='checkboxSelect' type='checkbox' id='select_col_4'/>Select col</label></th>
        <th class='{sorter: false}'><label><input class='checkboxSelect' type='checkbox' id='select_col_5'/>Select col</label></th>
        <th class='{sorter: false}'><label><input class='checkboxSelect' type='checkbox' id='select_col_6'/>Select col</label></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Context</th><th><label><input class='checkboxSelect' type='checkbox' id="select_row_0"/>Select row</label></th>
        <td><input type="checkbox" class="checkBoxClass row_0 col_0" id="Category_Context" value="Category:Context">
        </td>
        <td><input type="checkbox" class="checkBoxClass row_0 col_1"...

JavaScript

/**
 * http://stackoverflow.com/questions/432493/how-do-you-access-the-matched-groups-in-a-javascript-regular- 
 * expression
 *  examples:
 *
 *  var matches = getRegexMatches(/(dog)/, "dog boat, cat car dog");
 *  console.log(matches);
 *
 *  var matches = getRegexMatches(/(dog|cat) (boat|car)/, "dog boat, cat car");
 *  console.log(matches);
 */
function getRegexMatches(regex, string) {
    if(!(regex instanceof RegExp)) {
        return "ERROR";
    }
    else {
        if (!regex.global) {
            // If global flag not set, create new one.
            var flags = "g";
            if (regex.ignoreCase) flags += "i";
            if (regex.multiline) flags += "m";
            if (regex.sticky) flags += "y";
            regex = RegExp(regex.source, flags);
        }
    }
    var matches = [];
    var match = regex.exec(string);
    while (match) {
        if (match.length > 2) {
            var group_matches = [];
            for (var i = 1; i < match.length; i++) {
                group_matches.push(match[i]);
            }
            matches.push(group_matches);
        }
        else {
            matches.push(match[1]);
        }
        match = regex.exec(string);
    }
    return matches;
}

/**
 * get the select_row or select_col checkboxes dependening on the selectType row/col
 */
function getSelectCheckboxes(selectType) {
  var regex=new RegExp("select_"+selectType+"_");
  var result= $('input').filter(function() {return this.id.match(regex);});
  return result;
}

/**
 * matrix selection logic 
 * the goal is to provide select all / select row x / select col x
 * checkboxes that will allow to 
 *   select all: select all grid elements 
 *   select row: select the grid elements in the given row
 *   select col: select the grid elements in the given col
 *
 *   There is a naming convention for the ids and css style classes of the the selectors and elements:
 *   select all -> id: selectall
 *   select row -> id: select_row_row e.g. select_row_2
 * ...