Simple Risk Assessment Matrix table with resultant risk calculation

This post is not related to SharePoint and can be used in any web application with simple html and Jquery.

I was preparing a risk matrix table for one of my projects and thought it is worth sharing it here.

"A Risk Assessment Matrix is a project management tool that allows a quick view of the probable risks evaluated in terms of the likelihood or probability of the risk and the severity of the consequences. "

.

Let us build the below table.

Once you have the page ready, you can calculate the resultant risk by passing the likelihood and the severity to the page using query-strings. For example your page is riskMatrix.html, then:
http://mySitename/pages/riskMatrix.html?L=2&S=3, so here Likelihood=3 and Severity=3, so the resultant risk is highlighted as M.

Below is the complete code HTML, CSS and JS. Make sure you have referenced bootstrap and jquery (offline copy/CDN) in your page.

<table class="table table-bordered table-responsive" id="rMatrix">
<thead>
<tr>
<th>
</th>
<th colspan="2">
STATUS OF EVENT
</th>
<th colspan="5">
RISK CLASS
</th>
</tr>
</thead>
<tbody>
<tr lh="5">
<td rowspan="5" class="r-header" style="text-align:center">
LIKELIHOOD OF EVENT HAPPENING
</td>
<td style="min-width:50px" >
5
</td>
<td>
It is or has already happened
</td>
<td class="M">
M
</td>
<td class="H">
H
</td>
<td class="H">
H
</td>
<td class="VH">
VH
</td>
<td class="VH">
VH
</td>
</tr>
<tr lh="4">
<td>
4
</td>
<td>
It will probably happen
</td>
<td class="M">
M
</td>
<td class="M">
M
</td>
<td class="H">
H
</td>
<td class="VH">
VH
</td>
<td class="VH">
VH
</td>
</tr>
<tr lh="3">
<td>
3
</td>
<td>
It could possibly Happen
</td>
<td class="L">
L
</td>
<td class="M">
M
</td>
<td class="M">
M
</td>
<td class="H">
H
</td>
<td class="H">
H
</td>
</tr>
<tr lh="2">
<td>
2
</td>
<td>
It is to Happen
</td>
<td class="L">
L
</td>
<td class="L">
L
</td>
<td class="M">
M
</td>
<td class="M">
M
</td>
<td class="H">
H
</td>
</tr>
<tr>
<td lh="1">
1
</td>
<td >
It is unlikely to Happen
</td>
<td class="L">
L
</td>
<td class="L">
L
</td>
<td class="L">
L
</td>
<td class="M">
M
</td>
<td class="M">
M
</td>
</tr>
<tr>
<td rowspan="3" class="r-header">
LIKELY OUTCOME OF EVENT
</td>
<td colspan="2" class="r-header">
SAFETY
</td>
<td>
Near Miss
</td>
<td>
Minor Injury
</td>
<td>
Lost Time Accident
</td>
<td>
Major Injury
</td>
<td>
Fatality
</td>
</tr>
<tr>
<td colspan="2" class="r-header">
ENVIREONMENT
</td>
<td>
Potential Event
</td>
<td>
Minor Event
</td>
<td>
Important Event
</td>
<td>
Significant Event
</td>
<td>
Major Event
</td>
</tr>
<tr>
<td colspan="2" class="r-header">
COST
</td>
<td>
< 1k $
</td>
<td>
< 10k $
</td>
<td>
< 100k $
</td>
<td>
< 300k $
</td>
<td>
> 500k $
</td>
</tr>
<tr>
<td>
</td>
<td colspan="2" class="r-header">
SEVERITY
</td>
<td s="1">
1
</td>
<td s="2">
2
</td>
<td s="3">
3
</td>
<td s="4">
4
</td>
<td s="5">
5
</td>
</tr>
</tbody>
</table>

CSS:

.VH{
background-color:#f90909;
 font-weight:550 !important;
}
.H{
background-color:#f99d09;
 font-weight:550 !important;
}
.M{
  background-color:#f9d909;
  height:60px;
  font-weight:550 !important;
}
.L{
  background-color:#4c7c04;
   font-weight:550 !important;
}
#rMatrix>tbody>tr>td, #rMatrix>tbody>tr>th, #rMatrix>tfoot>tr>td, #rMatrix>tfoot>tr>th, #rMatrix>thead>tr>td, #rMatrix>thead>tr>th {
  vertical-align:middle;
  text-align:center;
  font-weight:550;
}

 JS:

$(function(){
  var rowIndex=getQueryStrings().L;
    var columnIndex=getQueryStrings().S;
  try{
  if(rowIndex!=undefined && columnIndex!=undefined){
var column = $('#rMatrix tbody td[s='+columnIndex+']').index();
var cell = $('#rMatrix tbody tr[lh='+rowIndex+']').find('td').eq(column);
  $(cell).css('border','3px solid');
  $(cell).css('box-shadow','-5px 5px 20px 20px rgba(14, 1, 1, 0.17), -15px -11px 20px 5px rgba(14, 14, 14, 0.22)');
    $(cell).css('border-style','dashed');
    }
    }catch(ex){}
});

function getQueryStrings() {

    var assoc = {};
    var decode = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); };
    var queryString = location.search.substring(1);
    var keyValues = queryString.split('&');
    for (var i in keyValues) {
        var key = keyValues[i].split('=');
        if (key.length > 1) {
            assoc[decode(key[0])] = decode(key[1]);
        }
    }
    return assoc;
}