Multi-Row quick Selection

quickly select checkboxes by rolling over a DIV instead of individually checking them

by Phil Glau

HTML

<table  cellspacing="0" class="t" id="table1">
<thead><tr><td colspan="5" class="menu1">Table 1 
<select name="qs_master" class="qs_master">
	<option value="No Action"  SELECTED>No Action</option>
	<option value="Queue" >Queue</option>
	<option value="Move" >Move</option>
	<option value="Merge w-ID" >Merge w/ID</option>
	<option value="Left Only" >Left Only</option>
	<option value="Right Only" >Right Only</option>
	<option value="Audio Left/TC Right" >Audio Left/TC Right</option>
	<option value="Audio Right/TC Left" >Audio Right/TC Left</option>
	<option value="Archive" >Archive</option>
	<option value="Delete" >Delete</option>
	<option value="Reset" >Reset</option>
</select>
</td>
</tr><tr bgcolor="#DDDDDD"><th width="95"><b>Original Name</b></th>
<th width="70"><b>New Name</b></th>
<th width="65"><b>File Status</b></th>
<th width="65"><b>Action</b></th>
<th width="50"><b>Job Name</b></th>
</tr></thead>

<tr bgcolor="#CCCCFF" class="docrow">
<td width="95" >File1.MP3<BR />
  <a href ="" target="_blank"><font color="green"><b>EU Comp</b></font></a></td>
<td width="70">
  <input type="text" name="temp_file_name_97530" size="15" value= "file1.mp3" />
</td>
<td width="65" class='qs'>converted</td>
<input type="hidden" name="item_id_97530" value="71912" /><td width="65" ><select name="status_97530">
	<option value="No Action"  SELECTED>No Action</option>
	<option value="Queue" >Queue</option>
	<option value="Move" >Move</option>
	<option value="Merge w-ID" >Merge w/ID</option>
	<option value="Left Only" >Left Only</option>
	<option value="Right Only" >Right Only</option>
	<option value="Audio Left/TC Right" >Audio Left/TC Right</option>
	<option value="Audio Right/TC Left" >Audio Right/TC Left</option>
	<option value="Archive" >Archive</option>
	<option value="Delete" >Delete</option>
	<option value="Reset" >Reset</option>
</select></td>
<td width="50" >
<select name="job_97530">
	<option value="*select" > Select a Job</option>
	<option value="5915"...

CSS

td {
    border: 1px #000 solid;
    text-align: center;
}
div.qs {
    width: 100%;
    height: 2em;
}

JavaScript

// 1) To operate: select a 'master value' from the pulldown next to the table name.
// 2) roll cursor over the 'converted' in the file status columns.
// 3) For 'queue' and 'move' it will update the pulldown in the Action to the  
// 4) If you select a value with whitespace in it, it will not work.

$(document).ready(function () {
    $('.qs').mouseover(function () {
        // when any DIV with the qs class is rolled over, we then derive
        // find the the master_selector for that set of file. It is the
        // .qs_master that is 'closest' to the div.
        var qs_master = $(this).closest('table').find('.qs_master');
        
        // find the row pulldown Select menu closest to the .qs DIV that was just
        // rolled over. In this case, it's to the immediate right of the selector DIV
        var pulldown = $(this).parent().closest('tr').find("select:first");
        // get a set of available options of this particular file. Sometimes options
        // will be missing like "Merge" or "Convert" based on various reasons.
        var pulldown_options = $(pulldown).children().map(function() {return $(this).val();}).get();
        // create a flag variable to see if the option is available. Returns -1 if master
        // option is not in the per-row set of options.
        var available = $.inArray(qs_master.val(),pulldown_options);

        if (qs_master.val() != 'No Action' && available >= 0) {
            // the master selector is set to some valid setting other than "Don't Move"
            if (pulldown.val() == 'No Action') {
                // the row selector gets set to the value of the master selector
               $(this).css("background", "yellow");
               pulldown.val(qs_master.val());
            } else {
                // the row selector was something other than default and is set to 
                // default instead. In this case "Don't move"
                $(this).css("background", "");
                pulldown.val('No...