Calculating total average percentage

Calculating total average percentage - javascript

trying to calculate the average of from Response Percent of each months from Jan to Dec display the average in the total average. I tried all the possible ways by looking at examples and posts from online but nothing seems to be working.
In new to javascript and learning throught online class and looking posts online but its not helping. can any one help me figure it out
const $select_rows = $('.select_row');
const $percent_row = $('.percent_row');
function update_column(col_index) {
const child_index = col_index + 2; // 1 indexed plus 1 for row heading
const $selects = $select_rows.find('td:nth-child(' + child_index + ') select');
if ($selects.length) {
let yes_count = 0;
$selects.each(function() {
if ($(this).val() == 'Yes') {
yes_count++;
}
});
$percent_row.find('td:nth-child(' + child_index + ') .cnt-percent-y').text((yes_count * 100 / $selects.length).toFixed(2));
}
}
function setup() {
$select_rows.each(function() {
$(this).find('select').each(function(index) {
const col_index = index;
$(this).change(function() {
update_column(col_index);
});
update_column(col_index);
});
});
}
setup();
function average(perResponse) {
var total = 0;
var perResponse;
for (var i = 0; i < perResponse.length; i++) {
total += perResponse[i];
}
var avg = total / source.length;
alert(avg)
document.getElementById("result").innerHTML = avg;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<title>Finding Average</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p style="font-family:georgia,garamond,serif;font-size:16px;font-style:italic;">
Finding Average & Calculation of Total Percentage
</p>
<table>
<thead>
<tr>
<th>Month</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sept</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
<th>Total Average</th>
</tr>
</thead>
<tbody>
<tr class="select_row">
<td>Bought Office Supplies</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr class="select_row">
<td>Saving's Over $25,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr class="select_row">
<td>Savings</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr class="select_row">
<td>Over Budget</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr class="select_row">
<td>Over Budget $10,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr class="select_row">
<td>Over Budget $20,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr class="percent_row">
<td>Response Percent</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td> //Here goes the average total from calculation from the average from Jan to Dec
<td></td>
</tr>
</tfoot>
</table>

Looking to your "average()" function:
"source.length" in your is not initialized - or maybe you intended to use "perResponse.length" instead?
Aside from that "var perRseponse;" seems to be an unnecessary declaration of your parameter (plus typo).

Related

How to select only one row in table with checkbox

I have a table with x numbers of rows and 4 columns, one column is checkbox and other three are readonly selectboxs. I want the user to select just 1 row to be editable by checking checkbox in first column then if he check another checkbox in another row, the checkbox he previously checked get unchecked and row get readonly again.
So I want the user to select 1 row only to edit and others be readonly.
here is my code but it is not working.
$(document).ready(function(){
$('.col1, .col2, .col3').attr('disabled', true)
selectRow();
$('.tbl').on('change', '.selectRow', selectRow);
function selectRow() {
$('.tbl tbody tr').each(function () {
$(this).find('.selectRow').each(function () {
var checkedRow = $(this).closest('tr').find('input:checkbox:checked'),
col1 = $(this).closest('tr').find('.col1'),
col2 = $(this).closest('tr').find('.col2'),
col3 = $(this).closest('tr').find('col3');
if (checkedRow){
$('.col1, .col2, .col3').removeAttr('disabled')
checkedRow.siblings().prop('checked', false);
}else{
$('.col1, .col2, .col3').attr('disabled', true)
checkedRow.siblings().prop('checked', false);
}
});
});
}
});
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class = "selectRow" /> </td>
<td>
<select class="col1">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>
this is my code:

Without jQuery and using event delegation things may be somewhat simpler:
document.addEventListener(`click`, handle);
// disable all selectors initially
document.querySelectorAll(`td select`)
.forEach(s => s.setAttribute(`disabled`, true));
function handle(evt) {
// only do something if a checkbox was clicked
if (evt.target.type === `checkbox`) {
const isChecked = evt.target.checked;
const selectedRow = evt.target.closest(`tr`);
// reset checkboxes, row coloring and disabled state
document.querySelectorAll(`input[type='checkbox']`)
.forEach(cb => {
cb.checked = cb !== evt.target ? false : isChecked;
const row = cb.closest(`tr`);
row.classList[isChecked && row === selectedRow ?
`add` : `remove`](`selected`);
[...row.querySelectorAll(`select`)].filter(r => r !== selectedRow)
.forEach(s => s.setAttribute(`disabled`, true));
selectedRow.querySelectorAll(`select`)
.forEach(s => s[isChecked ?
`removeAttribute` : `setAttribute`](`disabled`, true));
});
}
}
body {
margin: 2rem;
}
tr.selected {
background-color: lightgreen;
}
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="col1">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>
Here's an even more simplified version, acting on the table rows
document.addEventListener(`click`, handle);
// create the table dynamically to keep demo lean
createTable();
function handle(evt) {
if (evt.target.type === `checkbox`) {
const selectedRow = evt.target.closest(`tr`);
document.querySelectorAll(`tr`)
.forEach( row => {
// not selected
if (row !== selectedRow) {
row.querySelector(`[type=checkbox]`).checked = false;
row.classList.remove(`selected`);
return row.querySelectorAll(`select`)
.forEach(s => s.setAttribute(`disabled`, true));
}
// selected
row.classList[[`remove`, `add`][+evt.target.checked]](`selected`);
row.querySelectorAll(`select`).forEach(s =>
s[`${[`set`,`remove`][+evt.target.checked]}Attribute`](`disabled`, true));
});
}
}
function createTable() {
const table = document.createElement(`table`);
const repeat = (str, n) => Array(n + 1).join(str);
const select = `<td><select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>E</option></select></td>`;
const row = `<tr>
<td><input type="checkbox" /></td>
${repeat(select, 3)}</tr>`;
table.insertAdjacentHTML(`beforeend`, repeat(row, 3));
document.body.appendChild(table);
// disable all selectors initially
document.querySelectorAll(`td select`)
.forEach(s => s.setAttribute(`disabled`, true));
}
body {
margin: 2rem;
}
tr.selected {
background-color: lightgreen;
}
tr td:nth-child(1) {
padding-right: 6px;
}

The issue is because checkedRow holds a jQuery object. When you use that in an if condition it will always equate to true. You instead need to get the checked property from that element and use that in the condition instead.
Also note that the logic can be made much more succinct and extensible through the use of common selectors instead of incremental ones. In addition, you should look to add the disabled attribute to the HTML directly. Adding it via JS means that there will be a visible flash where the element is loaded as enabled, then when the DOM loads it will be disabled which is not good for your UX.
jQuery($ => {
selectRow();
$('.tbl').on('change', '.selectRow', selectRow);
function selectRow() {
$('.tbl tbody tr').each(function() {
let $row = $(this);
let $checkbox = $row.find('.selectRow');
$row.find('select').prop('disabled', !$checkbox.prop('checked'));
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="col1" disabled="disabled">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2" disabled="disabled">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3" disabled="disabled">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>

This works great! uncheck all checkboxes except the one having current focus '.tbl [type="checkbox"]:not(:focus)' then manipulate the select boxes
$(document).ready(function(){
$('.tbl [type="checkbox"]').on('click', function() {
$('.tbl [type="checkbox"]:not(:focus)').prop('checked', false);
$('.tbl select').attr('disabled', true);
$(this).parent().parent().find('select').attr('disabled', !$(this).prop('checked'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class = "selectRow" /> </td>
<td>
<select class="col1" disabled>
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2" disabled>
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3" disabled>
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1" disabled>
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2" disabled>
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3" disabled>
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1" disabled>
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2" disabled>
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3" disabled>
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>

Save the input the user make even after reload/refresh

I wanted to to add a function that every time the user refresh, reload or even close the page, the user to able to see the data whatever the user had entered previously or choose in the <select>.
Also when the user make an update and refresh they show be able to see the change.
let doc, htm, bod, nav, M, I, S, Q, hC, aC, rC, tC; // for use on other loads
addEventListener('load', () => {
doc = document;
htm = doc.documentElement;
bod = doc.body;
nav = navigator;
M = tag => doc.createElement(tag);
I = id => doc.getElementById(id);
mobile = /Mobi/i.test(nav.userAgent);
S = (selector, within) => {
let w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within) => {
let w = within || doc;
return w.querySelectorAll(selector);
}
hC = (node, className) => {
return node.classList.contains(className);
}
aC = (node, ...classNames) => {
node.classList.add(...classNames);
return aC;
}
rC = (node, ...classNames) => {
node.classList.remove(...classNames);
return rC;
}
tC = (node, className) => {
node.classList.toggle(className);
return tC;
}
// small Library above - magic below can be put on another page using a load Event *(except // end load line)*
const trs = Q('tbody>tr'),
trsL = trs.length,
prs = Q('tfoot>tr>td+td'),
prsM = prs.length - 1,
ya = [];
function showAverages() {
let total = 0;
for (let p = 0, c, t, l = ya.length; p < prsM; p++) {
c = 0;
for (let i = 0; i < l; i++) {
c += ya[i][p];
}
t = (c / l * 100).toFixed(2);
prs[p].textContent = t;
total += (+t);
}
prs[prsM].textContent = (total / prsM).toFixed(2);
var element = document.getElementById(prs[prsM]);
$("#element").html((total / prsM).toFixed(2) + "%");
}
for (let i = 0, r, sels, y; i < trsL; i++) {
r = trs[i];
sels = Q('select', r);
ya.push([]);
for (let n = 0, s, q = sels.length; n < q; n++) {
s = sels[n];
s.value = 'Yes';
y = s.value === 'Yes' ? 1 : 0;
ya[i].push(y);
s.oninput = () => {
ya[i][n] = s.value === 'Yes' ? 1 : 0;
showAverages();
}
}
}
showAverages();
});
* {
/* set font-size separate to avoid white space issues */
box-sizing: border-box;
font-size: 0;
padding: 0;
margin: 0;
}
p {
font: italic 16px Georgia, Garamond, serif;
}
/* added ---------- */
p span {
color: black;
font: bold 16px Georgia, Garamond, serif;
}
/* ---------------- */
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
thead *,
tfoot * {
font: bold 16px Arial, san-serif;
}
tbody * {
font: 15px Arial, sans-serif;
}
td,
th {
width: 90px;
border: 1px solid #ccc;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background: #ddd;
}
tfoot>tr>td:not(:last-child):after {
content: '%';
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Finding Average</title>
</head>
<body>
<div>
<p>Finding and Display Average: <span id="element"></span><br><br><br></p>
</div>
<!--the total average goes here-->
<table>
<thead>
<tr>
<th>Month</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sept</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
<th>Total Average</th>
</tr>
</thead>
<tfoot>
<tr class="percent_row">
<td>Response Percent</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tfoot>
<tbody>
<tr class="select_row">
<td>Bought Office Supplies</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Saving's Over $25,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Savings</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Over Budget</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Over Budget $10,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Over Budget $20,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
</tbody>
</table>

The localStorage and sessionStorage properties allow to save key/value pairs in a web browser.
The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.
The localStorage property is read-only.
Example:
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

If you want to store for example your data ya to local storage, you have to stringify the data, because localstorage accepts only string:
localStorage.setItem("savetab", JSON.stringify(ya));
to retrieve data, you do invers:
ya = JSON.parse(localStorage.getItem("savetab"));
after you rebuild your display yes or no for each row/column
ya is an array of 12 columns and 6 rows so 72 selects
so when you loop over ya, you'll do something like that to reload all selects with data saved:
for(var row = 0; row < 6; row++){
for(var col = 0; col < 12; col++){
$("select").eq(row * 12 + col).val(ya[row, col] == 1 ? "Yes" : "No");
}
}
following your sample:
you execute the localStorage.setItem inside showAverages()
and before the last line you load the data saved
//restore your data here before calling the function average
showAverages();
});

Calculate Percentage of YES/NO and find average

I'm trying to to get the percentage of Yes or No on the HTML Table from the response of the user from the questions of each month and then display the average percentage in the average in the average column of each month (For example if the the user selects 'no'for saving and 'yes' for over budget it should display the average
50% for the month of Jan) but all I'm getting is NaN% for each month . I tried creating a script of each month but shows the same result in average.
Then I trying to add all the Response Percent and get its average and display the average in the total average under total response.
HTML, CSS and JS:
$(function() {
mon_jan();
});
function mon_jan() {
var target_span = $('#span1');
count_yes_no(target_span);
}
function count_yes_no(spn) {
var yes = 0;
var no = 0;
var l = 0;
spn.find('select').each(function() {
if ($(this).val() == 'Yes') {
yes++;
}
if ($(this).val() == 'No') {
no++;
}
l++;
});
// update count values summary
$('.cnt-yes').text(yes);
$('.cnt-no').text(no);
$('.len').text(parseInt(l));
$('.cnt-percent-y').text((yes * 100 / l).toFixed(2));
$('.cnt-percent-n').text((no * 100 / l).toFixed(2));
}
$(function() {
mon_feb();
});
function mon_feb() {
var target_span = $('#span1');
count_yes_no(target_span);
}
function count_yes_no(spn) {
var yes = 0;
var no = 0;
var l = 0;
spn.find('select').each(function() {
if ($(this).val() == 'Yes') {
yes++;
}
if ($(this).val() == 'No') {
no++;
}
l++;
});
// update count values summary
$('.cnt-yes').text(yes);
$('.cnt-no').text(no);
$('.len').text(parseInt(l));
$('.cnt-percent-y').text((yes * 100 / l).toFixed(2));
$('.cnt-percent-n').text((no * 100 / l).toFixed(2));
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h1>Finding Average -- Excel Spreadsheet to get similiar results</h1>
<table>
<thead>
<tr>
<th>Month</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sept</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
<th>Total Average</th>
</tr>
</thead>
<tbody>
<tr>
<span id="span1">
<td>Savings</td>
<td>
<select onchange="mon_jan();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="mon_feb();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</span>
</tr>
<tr>
<td>Over Budget</td>
<td>
<select onchange="mon_jan();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="mon_feb();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select onchange="ch_sel();">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<td>Response Percent</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td></td>
</tfoot>
</table>

One problem is that span is not a valid child element of a tr. Removing the span and giving the id to the tr would probably work better.
My jQuery is pretty rusty but I took a stab at a partially working solution in case it helps:
const $select_rows = $('.select_row');
const $percent_row = $('.percent_row');
function update_column(col_index) {
const child_index = col_index + 2; // 1 indexed plus 1 for row heading
const $selects = $select_rows.find('td:nth-child(' + child_index + ') select');
if($selects.length) {
let yes_count = 0;
$selects.each(function() {
if($(this).val() == 'Yes') {
yes_count++;
}
});
$percent_row.find('td:nth-child(' + child_index + ') .cnt-percent-y').text((yes_count * 100 / $selects.length).toFixed(2));
}
}
function setup() {
$select_rows.each(function() {
$(this).find('select').each(function(index) {
const col_index = index;
$(this).change(function() {
update_column(col_index);
});
update_column(col_index);
});
});
}
setup();
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h1>Finding Average -- Excel Spreadsheet to get similiar results</h1>
<table>
<thead>
<tr>
<th>Month</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sept</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
<th>Total Average</th>
</tr>
</thead>
<tbody>
<tr class="select_row">
<td>Savings</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr class="select_row">
<td>Over Budget</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr class="percent_row">
<td>Response Percent</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td>
<div class="Percentage"><span class="cnt-percent-y">0</span>% <br></div>
</td>
<td></td>
</tr>
</tfoot>
</table>

Using a cookie to store data

I'm in the process of creating a login and register page for an website. I decided to use a cookie to store the registered data rather than using PHP. How exactly I would do this? I have basic details like firstname, surname, birthday, username, email and password. I want to store the details so when the user registers with the site, they can then login with what they have registered with. This is all done in a form which is below:
<form action="" method="post" name="form1" onsubmit="getdropdownvalue()">
<table bgcolor="white" width="700" border="0" align="center">
<col width="200">
<col width="200">
<tr>
<th colspan="2" align="center" bgcolor="grey">Fill the form to sign up.</th>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2" style="font-size:12px">Fields marked with * are mandatory</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Name*</td>
<td>Surname*</td>
</tr>
<tr>
<td>
<label>
<input type="text" name="txtname" id="txtname" class="info" />
<td>
<label>
<input type="text" name="txtsurname" id="txtsurname" class="info" />
</label>
</td>
</tr>
<tr>
<td>Create Username*</td>
<td>Birthday</td>
</tr>
<tr>
<td>
<label>
<input type="text" name="txtusername" id="txtusername" class="info" />
</label>
</td>
<td>
<select name="DOBMonth">
<option>Month</option>
<option value="January">January</option>
<option value="Febuary">Febuary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="DOBDay">
<option>Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="DOBYear">
<option>Year</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1998</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
</select>
<tr>
<td>Email*</td>
<td>Confirm Email*</td>
</tr>
<tr>
<td>
<label>
<input type="text" name="txtemail" id="txtemail" class="info" onchange="ValidateEmail(txtemail)" />
<td>
<label>
<input type="text" name="txtemail2" id="txtemail2" class="info" onchange="ValidateEmail2(txtemail2)" />
</label>
</td>
</tr>
<tr>
<td>Password*</td>
<td>Confirm Pasword*</td>
</tr>
<tr>
<td>
<label>
<input type="password" name="txtpassword" id="txtpassword" class="info" />
<td>
<label>
<input type="password" name="txtpassword2" id="txtpassword2" class="info" />
</label>
</td>
</tr>
<td colspan="2" style="font-size:12px">**Passwords must be at least 8 characters in lenght.</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2">
<label>
<input type="radio" name="terms" value="terms" id="terms" />I agree to the Terms and Conditions</label>
</td>
</tr>
<br>
<br>
<br>
<tr>
<td colspan="2">
<label>
<input type="radio" name="notify" value="notify" id="notify" />I want to receive notifications by text/email about new products in stock.</label>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<label>
<input type="submit" name="Login" id="Login" value="Login" onclick="checkdetails()" />
</label>
</td>
<td>
<label>
<input type="reset" name="Reset" id="Reset" value="Reset" />
</label>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form>
How can I achieve this? Any suggestions?

If you would like to save form data within a cookie (which is not recommended as stated in the comments), you will have to use JavaScript like this:
<script type="text/javascript">
var today = new Date();
var expiry = new Date(today.getTime() + 30 * 24 * 3600 * 1000); // plus 30 days
function setCookie(name, value)
{
document.cookie=name + "=" + escape(value) + "; path=/; expires=" + expiry.toGMTString();
}
function storeValues(form)
{
setCookie("field1", form.field1.value);// replace with your form fields
setCookie("field2", form.field2.value);
setCookie("field3", form.field3.value);
setCookie("field4", form.field4.value);
return true;
}
</script>
Also, you will need to call the setCookie function by calling it when the form's submit button is clicked, like this:
<input type="submit" onclick="storeValues(this.form)" value="Submit" />

JQuery does not work but last element in all browsers

I am writing a web application for capturing applicant data. I am using JQuery for hiding and showing html tables. The code snippet is
<script type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function hideDD(){
var gndr = $('#gender').val();
if(gndr=="Female"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
var cat = $('#category').val();
if(cat=="SC" || cat=="ST"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
var xsrv = $('#exsrv').val();
if(xsrv=="Yes"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
var PD = $('#PWDPH').val();
if(PD=="Yes"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
}
and the html part is
<tr>
<td bgcolor="#FFF3D5">5. Gender :<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><select name="gender" id="gender" onclick="hideDD()">
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
<!-- <div id="gender">
Please select whichever is applicable to you <select name="gender" id="gender">
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div> -->
</tr>
<tr>
<td bgcolor="#FFF3D5">6. Marital Status :<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><select name="maritalstatus" id="maritalstatus">
<option value="">Select</option>
<option value="Married">Married</option>
<option value="Unmarried">Unmarried</option>
<option value="Widow">Widow</option>
<option value="Divorced">Divorced</option>
<option value="Judicially separated and not married">Judicially separated and not married</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">7. Date of Birth: <span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><input name="dateofbirth" type="text" id="dateofbirth" value="<?php echo "$rs1->dateofbirth" ?>" readonly /><span class="style2">(yyyy/mm/dd)</span>
Your age(as on 31st July 2015):<input name="ageyear" type="text" id="ageyear" size="2" readonly>years<input name="agemonth" type="text" id="agemonth" size="2" readonly>months and<input name="ageday" type="text" id="ageday" size="2" readonly>days
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">8. Email:<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><input name="afc_email" type="text" id="afc_email" value="<?php echo "$rs1->email" ?>" readonly />
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">9. Category :<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><select name="category" id="category" onclick="hideDD()">
<option value="">Select</option>
<option value="General">General</option>
<option value="OBC">OBC</option>
<option value="SC">SC</option>
<option value="ST">ST</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">10 : You are a citizen of India by<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><select name="citizen" id="citizen">
<option value="">Select</option>
<option value="Birth">Birth</option>
<option value="Domicile">Domicile</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">11 : Religion<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><select name="religion" id="religion">
<option value="">Select</option>
<option value="Hindu">Hindu</option>
<option value="Muslims">Muslims</option>
<option value="Christians">Christians</option>
<option value="Sikhs">Sikhs</option>
<option value="Buddhists">Buddhists</option>
<option value="Zoroastrians">Zoroastrians</option>
<option value="Others">Others</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">12 : Whether Ex-servicemen<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><select name="exsrv" id="exsrv" onclick="enb_dis(); hideDD()">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<table name="table_exserve" id="table_exserve" border="1">
<tr>
<td>Have you already secured employment in civil side under central Govt. in Group C and D in regular basis after availing this benefit</td>
<td bgcolor="#FFF3D5"><select name="exsrv_benefit" id="exsrv_benefit">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select> </td>
</tr>
<tr>
<td>Date of appoinment in arm force</td>
<td bgcolor="#FFF3D5"><input name="exsrv_from" type="text" id="exsrv_from" maxlength="10"/><span class="style2">(yyyy/mm/dd)</span></td>
</tr>
<tr>
<td>Date of discharge / due date of discharge from arm force</td>
<td bgcolor="#FFF3D5"><input name="exsrv_to" type="text" id="exsrv_to" maxlength="10" onchange="milical()"/><span class="style2">(yyyy/mm/dd)</span></td>
</tr>
<tr>
<td>Length of actual Military services</td>
<td bgcolor="#FFF3D5"><input name="miliyear" type="text" id="miliyear" size="2" readonly>years<input name="milimonth" type="text" id="milimonth" size="2" readonly>months and<input name="miliday" type="text" id="miliday" size="2" readonly>days</td>
</tr>
</table>
</tr>
<tr>
<td bgcolor="#FFF3D5">13 : Whether person with disability(PWD) / Physically handicapped (PH)<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><select name="PWDPH" id="PWDPH" onclick="enb_dis(); hideDD()">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<table name="table_PWDPH" id="table_PWDPH" border="1">
<tr>
<td>Nature of disability</td>
<td bgcolor="#FFF3D5"><select name="PWDPH_nature" id="PWDPH_nature">
<option value="">Select</option>
<option value="B">B</option>
<option value="LV">LV</option>
<option value="PD">PD</option>
<option value="D">D</option>
<option value="OA">OA</option>
<option value="OL">OL</option>
<option value="BL">BL</option>
</select> </td>
</tr>
<tr>
<td>Degree of disability</td>
<td bgcolor="#FFF3D5"><select name="PWDPH_degree" id="PWDPH_degree">
<option value="">Select</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</select>
</td>
</tr>
</table>
</tr>
Every time I did modification, the last jQuery item worked fine, rests did not work. For example in this code only PWDPD element worked fine, category and gender did not worked fine.

I've made several changes in your code like <table> tag was not not implemented properly and without that you had <tr> at beginning. So after editing all those things your code goes as below:
I've kept an alert inside your function which shows up on each element you have called that function and I've change onclick to onchange for your select element.
function hideDD() {
var gndr = $('#gender').val();
alert(gndr);
if(gndr=="Female"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
var cat = $('#category').val();
if(cat=="SC" || cat=="ST"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
var xsrv = $('#exsrv').val();
if(xsrv=="Yes"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
var PD = $('#PWDPH').val();
if(PD=="Yes"){
$("#table_dd").hide();
$("#dd_bank").val('');
$("#dd_number").val('');
$("#dd_date").val('');
}
else
{
$("#table_dd").show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td bgcolor="#FFF3D5">5. Gender :<span class="style2">*</span></td>
<td bgcolor="#FFF3D5">
<select id="gender" onchange="hideDD()">
<option value="Select">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">6. Marital Status :<span class="style2">*</span></td>
<td bgcolor="#FFF3D5">
<select name="maritalstatus" id="maritalstatus">
<option value="">Select</option>
<option value="Married">Married</option>
<option value="Unmarried">Unmarried</option>
<option value="Widow">Widow</option>
<option value="Divorced">Divorced</option>
<option value="Judicially separated and not married">Judicially separated and not married</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">7. Date of Birth: <span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><input name="dateofbirth" type="text" id="dateofbirth" value="<?php echo "$rs1->dateofbirth" ?>" readonly />
<span class="style2">(yyyy/mm/dd)</span>
Your age(as on 31st July 2015):<input name="ageyear" type="text" id="ageyear" size="2" readonly>years<input name="agemonth" type="text" id="agemonth" size="2" readonly>months and<input name="ageday" type="text" id="ageday" size="2" readonly>days
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">8. Email:<span class="style2">*</span></td>
<td bgcolor="#FFF3D5"><input name="afc_email" type="text" id="afc_email" value="<?php echo "$rs1->email" ?>" readonly /></td>
</tr>
<tr>
<td bgcolor="#FFF3D5">9. Category :<span class="style2">*</span></td>
<td bgcolor="#FFF3D5">
<select name="category" id="category" onchange="hideDD()">
<option value="">Select</option>
<option value="General">General</option>
<option value="OBC">OBC</option>
<option value="SC">SC</option>
<option value="ST">ST</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">10 : You are a citizen of India by<span class="style2">*</span></td>
<td bgcolor="#FFF3D5">
<select name="citizen" id="citizen">
<option value="">Select</option>
<option value="Birth">Birth</option>
<option value="Domicile">Domicile</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">11 : Religion<span class="style2">*</span></td>
<td bgcolor="#FFF3D5">
<select name="religion" id="religion">
<option value="">Select</option>
<option value="Hindu">Hindu</option>
<option value="Muslims">Muslims</option>
<option value="Christians">Christians</option>
<option value="Sikhs">Sikhs</option>
<option value="Buddhists">Buddhists</option>
<option value="Zoroastrians">Zoroastrians</option>
<option value="Others">Others</option>
</select>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">12 : Whether Ex-servicemen<span class="style2">*</span></td>
<td bgcolor="#FFF3D5">
<select name="exsrv" id="exsrv" onchange="hideDD()">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<table name="table_exserve" id="table_exserve" border="1">
<tr>
<td>Have you already secured employment in civil side under central Govt. in Group C and D in regular basis after availing this benefit</td>
<td bgcolor="#FFF3D5">
<select name="exsrv_benefit" id="exsrv_benefit">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr>
<td>Date of appoinment in arm force</td>
<td bgcolor="#FFF3D5"><input name="exsrv_from" type="text" id="exsrv_from" maxlength="10"/><span class="style2">(yyyy/mm/dd)</span></td>
</tr>
<tr>
<td>Date of discharge / due date of discharge from arm force</td>
<td bgcolor="#FFF3D5"><input name="exsrv_to" type="text" id="exsrv_to" maxlength="10" onchange="milical()"/><span class="style2">(yyyy/mm/dd)</span></td>
</tr>
<tr>
<td>Length of actual Military services</td>
<td bgcolor="#FFF3D5"><input name="miliyear" type="text" id="miliyear" size="2" readonly>years<input name="milimonth" type="text" id="milimonth" size="2" readonly>months and<input name="miliday" type="text" id="miliday" size="2" readonly>days</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFF3D5">13 : Whether person with disability(PWD) / Physically handicapped (PH)<span class="style2">*</span></td>
<td bgcolor="#FFF3D5">
<select name="PWDPH" id="PWDPH" onchange="hideDD();">
<option value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<table name="table_PWDPH" id="table_PWDPH" border="1">
<tr>
<td>Nature of disability</td>
<td bgcolor="#FFF3D5">
<select name="PWDPH_nature" id="PWDPH_nature">
<option value="">Select</option>
<option value="B">B</option>
<option value="LV">LV</option>
<option value="PD">PD</option>
<option value="D">D</option>
<option value="OA">OA</option>
<option value="OL">OL</option>
<option value="BL">BL</option>
</select>
</td>
</tr>
<tr>
<td>Degree of disability</td>
<td bgcolor="#FFF3D5">
<select name="PWDPH_degree" id="PWDPH_degree">
<option value="">Select</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>

try place you code inside:
$(document).ready(function(){
YOUR CODE HERE
});

We Keep Coding

JavaScript is the programming language of the Web.

Calculating total average percentage - javascript

Looking to your "average()" function: "source.length" in your is not initialized - or maybe you intended to use "perResponse.length" instead? Aside from that "var perRseponse;" seems to be an unnecessary declaration of your parameter (plus typo).

Related

How to select only one row in table with checkbox

Save the input the user make even after reload/refresh

Calculate Percentage of YES/NO and find average

Using a cookie to store data

JQuery does not work but last element in all browsers

Categories

Resources