How do I unhide a row after it is hidden?

How do I unhide a row after it is hidden? - javascript

The following code hides the first row of the table but it doesn't make the first row visible again when the checkbox is clicked again. Can someone help?
I even tried looping through the tables and toggling the row visibility but that is very slow due to the amount of tables in the html.
Alternate suggestions are welcome. This would be too painful to do in C#.
$(document).ready(function() {
$('#chkNA,#chkSC,#chkNS,#chkIss,#chkIP').click(function() {
var row;
if (this.id == 'chkNS') {
row = $('.TF-StatusNotStarted').closest('tr');
}
if (this.id == 'chkSC') {
row = $('.TF-StatusCompleted').closest('tr');
}
if (this.id == 'chkNA') {
row = $('.TF-StatusNA').closest('tr');
}
if (this.id == 'chkIss') {
row = $('.TF-StatusIssue').closest('tr');
}
if (this.id == 'chkIP') {
row = $('.TF-StatusInProgress').closest('tr');
}
var tabletest = row.parent().parent();
row.toggle();
if (tabletest.find('tbody > tr:gt(0):visible').length > 0) {
if (tabletest.find('tbody > tr:first').is(":visible") == false) {
tabletest.find('tbody > tr:first').show();
}
}
if (tabletest.find('tbody > tr:gt(0):visible').length > 0 && tabletest.find('tbody > tr:first').is(':visible')) {
tabletest.find('tbody > tr:first').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="chkNA" type="checkbox" checked="checked"> N/A <input id="chkSC" type="checkbox" checked="checked"> Completed <input id="chkNS" type="checkbox" checked="checked"> Not Started <input id="chkIss" type="checkbox" checked="checked"> Issue
<input
id="chkIP" type="checkbox" checked="checked"> In Progress
<table class="taskform">
<tr>
<td>
<table class="TF-TaskGroupTable" id="first table" border="1">
<tbody>
<tr>
<th colspan=3>
First Table
</th>
</tr>
<tr>
<td>
<select class="TF-StatusCompleted">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option selected="selected" value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option value="N/A">N/A</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="TF-StatusCompleted">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option selected="selected" value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option value="N/A">N/A</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="TF-StatusCompleted">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option selected="selected" value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option value="N/A">N/A</option>
</select>
</td>
</tr>
</tbody>
</table>
<div>
<input type="button" />
</div>
<table class="TF-TaskGroupTable" id="Second Table" border="1">
<tbody>
<tr>
<th colspan=3>
Second Table
</th>
</tr>
<tr>
<td>
<select class="TF-StatusNA">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option selected="selected" value="N/A">N/A</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="TF-StatusCompleted">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option selected="selected" value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option value="N/A">N/A</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="TF-StatusNA">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option selected="selected" value="N/A">N/A</option>
</select>
</td>
</tr>
</tbody>
</table>
<div>
<input type="button" />
</div>
<table class="TF-TaskGroupTable" id="Third Table" border="1">
<tbody>
<tr>
<th colspan=3>
Third Table
</th>
</tr>
<tr>
<td>
<select class="TF-StatusNA">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option selected="selected" value="N/A">N/A</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="TF-StatusNA">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option selected="selected" value="N/A">N/A</option>
</select>
</td>
</tr>
<tr>
<td>
<select class="TF-StatusNA">
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option selected="selected" value="N/A">N/A</option>
</select>
</td>
</tr>
</tbody>
</table>
<div>
<input type="button" />
</div>
</td>
</tr>
</table>

Update 2
Updated the scenario to target the header row instead of the rows.
Update 1
I have updated the code snippet with relevant details to help you come to a proper solution for you scenario.
Added select with same options
Select the Option with same value as the input being checked,
If the checkbox is checked it will show the valid rows, otherwise it hides them
Intial Answer
From your code it is apparent you are using jQuery to show/hide the rows. jQuery has 3 functions that perform this behavior. The obvious ones show() and hide(), and the less obvious toggle(). If your intent is to 'toggle' the visibility of an element, you should be using toggle() otherwise you have to track the state of the element yourself.
Here are some reference material for these methods to help you out.
show()
hide()
toggle()
Here is a simple example to help you out.
$(function() {
function showSelected() {
var selected = [];
$('input:checked')
.map(function(idx, elm) {
selected.push($(elm).val());
});
$('#report').text(JSON.stringify(selected));
}
$('input').click(function(event) {
// update the selected report
showSelected();
// get the value of this element
var value = $(this).val();
// options that have this value and are checked
var selector = `option[value="${value}"]:checked`;
if ($(this).is(':checked')) {
$(selector).closest('table').find('thead tr').show()
} else {
$(selector).closest('table').find('thead tr').hide()
}
});
showSelected();
$('input').click();
});
tbody td {
width: 150px
}
tbody tr.even {
background-color: cyan;
}
tbody tr.odd {
background-color: lime;
}
#report {
width: 80%;
padding: 4px;
background-color: lightgray;
border: 1px solid black;
min-height: 2rem;
}
thead tr {
background-color: cornflowerblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="Not Started"> Not Started
<input type="checkbox" value="In Progress"> In Progress
<table>
<tbody>
<tr class="odd">
<td>R1 C1</td>
<td>R1 C2</td>
<td>R1 C3</td>
<td>
<select>
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option value="N/A">N/A</option>
</select>
</td>
</tr>
<tr class="even">
<td>R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
<td>
<select>
<option value="Not Started">Not Started</option>
<option value="In Progress" selected>In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option value="N/A">N/A</option>
</select>
</td>
</tr>
<tr class="odd">
<td>R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
<td>
<select>
<option value="Not Started">Not Started</option>
<option value="In Progress">In Progress</option>
<option value="Completed">Completed</option>
<option value="Issue">Issue</option>
<option value="N/A">N/A</option>
</select>
</td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="4">
This is a table header row
</td>
</tr>
</thead>
</table>
<pre id="report">
</pre>

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>

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>

two select options - validate and hide option not needed

I'm trying to show a set of select option base on what is selected on another select option. I have some issue to understand the logic with the js script.
Example:
Any advice how to hide the other options which are not used
if TV show only value device, tsignal, blackscreen, other
If Radio show only the value: device, rsignal, other
$('#new').find('option').not('[value="device"]').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<table>
<tbody>
<tr>
<td>Issue:</td>
<td>
<select required id="test" name="test">
<option value="" disabled selected>Choose an option</option>
<option value="tv">tv</option>
<option value="radio">radio</option>
</select>
</td>
</tr>
<tr>
<td height="50px" colspan="3"></td>
</tr>
<tr>
<td>What is the problem?</td>
<td>
<select id="new" name="new">
<option value="" disabled selected>Select an option</option>
<option value="device">device is defect</option>
<option value="rsignal">radio has no signal</option>
<option value="tsignal">radio has no signal</option>
<option value="blackscreen">tv blackscreen</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" class="submit" value="submit"></td>
</tr>
</tbody>
</table>
</form>

I guess that you meant to use .change so when #test dropdown changed you check what its value and based on that show / hide options, right?
$('#test').change(function() {
const options = $('#new').find('option').show();
if ($(this).val() === 'tv') {
options.not('[value="device"]').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<form>
<table>
<tbody>
<tr>
<td>Issue:</td>
<td>
<select required id="test" name="test">
<option value="" disabled selected>Choose an option</option>
<option value="tv">tv</option>
<option value="radio">radio</option>
</select>
</td>
</tr>
<tr>
<td height="50px" colspan="3"></td>
</tr>
<tr>
<td>What is the problem?</td>
<td>
<select id="new" name="new">
<option value="" disabled selected>Select an option</option>
<option value="device">device is defect</option>
<option value="rsignal">radio has no signal</option>
<option value="tsignal">radio has no signal</option>
<option value="blackscreen">tv blackscreen</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" class="submit" value="submit"></td>
</tr>
</tbody>
</table>
</form>
Notice Hide option is not cross browser

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
});

Hide Table Row with Javascript

I have very little experience with programming, but have been requested to hide a row of a table on a customer site using only Javascript. I know how to do this with both HTML or CSS, but have been told I cannot access those elements in the 3rd party platform we are using and must create a script for it.
I have the html entered at http://jsfiddle.net/zcho5zs5/ and could use any help to get the entire second row to be hidden. All that should be displayed is "Select Payment Method" and "Pay by Saved Card" with the dropdown. Everything below that needs to be hidden.
HTML Code
<div id="t1_t2_c_p_pnlPaymentMethod">
<span id="t1_t2_c_p_lblPaymentMethod" style="font-weight:bold;">Select a Payment Method:</span>
<table cellspacing="0" cellpadding="4" width="500" border="0" id="tblPaymentOptions">
<tbody><tr id="t1_t2_c_p_rowSavedCC">
<td valign="top"><input id="t1_t2_c_p_rdoSavedCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoSavedCreditCard" checked="checked"></td>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td align="right"><span id="t1_t2_c_p_lblSavedCreditCard">Pay by Saved Card:</span> </td>
<td><select name="t1:t2:c:p:ddlSavedCCList" id="t1_t2_c_p_ddlSavedCCList" onchange="$p.rdoSavedCreditCard.checked = true;">
<option selected="selected" value="o-s1J0eNVIcq4H1oad1hwvro3BLo-s0vwMUr7g-pPe7tsToQhzbVQ5W4A-e-e">P-Card 4375</option>
</select> </td>
<td><a id="t1_t2_c_p_btnDeleteSavedCC" class="LinkButton" href="javascript:__doPostBack('t1$t2$c$p$btnDeleteSavedCC','')" style="display: none;">Delete</a></td>
</tr>
</tbody></table>
</td>
</tr>
<tr id="t1_t2_c_p_rowCreditCard">
<td valign="top"><input id="t1_t2_c_p_rdoCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoCreditCard"></td>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td><span id="t1_t2_c_p_lblCreditCard">Pay by Credit Card:</span> </td>
<td><select name="t1:t2:c:p:ddlCCType" id="t1_t2_c_p_ddlCCType" onchange="$p.rdoCreditCard.checked = true;" style="width:100%;">
<option selected="selected" value="Visa">Visa</option>
</select></td>
</tr><tr>
<td>Account Number: </td>
<td><input name="t1:t2:c:p:txbCCAccount" type="text" maxlength="20" id="t1_t2_c_p_txbCCAccount" autocomplete="off" onkeypress="$p.rdoCreditCard.checked = true;" style="width:150px;"></td>
</tr>
<tr>
<td>Expiration Date: </td>
<td>
<select name="t1:t2:c:p:ddlCCExpMonth" id="t1_t2_c_p_ddlCCExpMonth">
<option selected="selected" value=""></option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="t1:t2:c:p:ddlCCExpYear" id="t1_t2_c_p_ddlCCExpYear">
<option value=""></option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
</select></td>
</tr>
<tr id="t1_t2_c_p_rowSaveCCQuestion">
<td></td>
<td><input id="t1_t2_c_p_chkSaveCC" type="checkbox" name="t1:t2:c:p:chkSaveCC"> Save my credit card information</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table><br>
</div>
Javascript?
I have tried several suggestions I have found on this site for similar functions, but nothing seems to work.

Below is javascript code to hide the specific row that contains "Pay by Credit Card".
It sets the CSS style display:none on the <tr> with the id "t1_t2_c_p_rowCreditCard".
document.getElementById('t1_t2_c_p_rowCreditCard').style.display='none';
document.getElementById('t1_t2_c_p_rowCreditCard').style.display = 'none';
<div id="t1_t2_c_p_pnlPaymentMethod">
<span id="t1_t2_c_p_lblPaymentMethod" style="font-weight:bold;">Select a Payment Method:</span>
<table cellspacing="0" cellpadding="4" width="500" border="0" id="tblPaymentOptions">
<tbody>
<tr id="t1_t2_c_p_rowSavedCC">
<td valign="top">
<input id="t1_t2_c_p_rdoSavedCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoSavedCreditCard" checked="checked">
</td>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="right"><span id="t1_t2_c_p_lblSavedCreditCard">Pay by Saved Card:</span> </td>
<td>
<select name="t1:t2:c:p:ddlSavedCCList" id="t1_t2_c_p_ddlSavedCCList" onchange="$p.rdoSavedCreditCard.checked = true;">
<option selected="selected" value="o-s1J0eNVIcq4H1oad1hwvro3BLo-s0vwMUr7g-pPe7tsToQhzbVQ5W4A-e-e">P-Card 4375</option>
</select> </td>
<td><a id="t1_t2_c_p_btnDeleteSavedCC" class="LinkButton" href="javascript:__doPostBack('t1$t2$c$p$btnDeleteSavedCC','')" style="display: none;">Delete</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="t1_t2_c_p_rowCreditCard">
<td valign="top">
<input id="t1_t2_c_p_rdoCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoCreditCard">
</td>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><span id="t1_t2_c_p_lblCreditCard">Pay by Credit Card:</span> </td>
<td>
<select name="t1:t2:c:p:ddlCCType" id="t1_t2_c_p_ddlCCType" onchange="$p.rdoCreditCard.checked = true;" style="width:100%;">
<option selected="selected" value="Visa">Visa</option>
</select>
</td>
</tr>
<tr>
<td>Account Number: </td>
<td>
<input name="t1:t2:c:p:txbCCAccount" type="text" maxlength="20" id="t1_t2_c_p_txbCCAccount" autocomplete="off" onkeypress="$p.rdoCreditCard.checked = true;" style="width:150px;">
</td>
</tr>
<tr>
<td>Expiration Date: </td>
<td>
<select name="t1:t2:c:p:ddlCCExpMonth" id="t1_t2_c_p_ddlCCExpMonth">
<option selected="selected" value=""></option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="t1:t2:c:p:ddlCCExpYear" id="t1_t2_c_p_ddlCCExpYear">
<option value=""></option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
</select>
</td>
</tr>
<tr id="t1_t2_c_p_rowSaveCCQuestion">
<td></td>
<td>
<input id="t1_t2_c_p_chkSaveCC" type="checkbox" name="t1:t2:c:p:chkSaveCC"> Save my credit card information</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br>
</div>
Edit:
Javascript in a window.onload function will execute after the page is loaded, causing a delay before your element is hidden. CSS, on the other hand, does not need the DOM to be ready.
I see that you have added the javascript using <script> tags. You mentioned that you cannot use CSS but, if you can use <script> tags, you may be able to use <style> tags as well:
<style type="text/css">
tr#t1_t2_c_p_rowCreditCard {display:none;}
</style>
<style type="text/css">
tr#t1_t2_c_p_rowCreditCard {
display:none;
}
</style>
<div id="t1_t2_c_p_pnlPaymentMethod">
<span id="t1_t2_c_p_lblPaymentMethod" style="font-weight:bold;">Select a Payment Method:</span>
<table cellspacing="0" cellpadding="4" width="500" border="0" id="tblPaymentOptions">
<tbody>
<tr id="t1_t2_c_p_rowSavedCC">
<td valign="top">
<input id="t1_t2_c_p_rdoSavedCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoSavedCreditCard" checked="checked">
</td>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="right"><span id="t1_t2_c_p_lblSavedCreditCard">Pay by Saved Card:</span> </td>
<td>
<select name="t1:t2:c:p:ddlSavedCCList" id="t1_t2_c_p_ddlSavedCCList" onchange="$p.rdoSavedCreditCard.checked = true;">
<option selected="selected" value="o-s1J0eNVIcq4H1oad1hwvro3BLo-s0vwMUr7g-pPe7tsToQhzbVQ5W4A-e-e">P-Card 4375</option>
</select> </td>
<td><a id="t1_t2_c_p_btnDeleteSavedCC" class="LinkButton" href="javascript:__doPostBack('t1$t2$c$p$btnDeleteSavedCC','')" style="display: none;">Delete</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="t1_t2_c_p_rowCreditCard">
<td valign="top">
<input id="t1_t2_c_p_rdoCreditCard" type="radio" name="t1:t2:c:p:PaymentMethod" value="rdoCreditCard">
</td>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><span id="t1_t2_c_p_lblCreditCard">Pay by Credit Card:</span> </td>
<td>
<select name="t1:t2:c:p:ddlCCType" id="t1_t2_c_p_ddlCCType" onchange="$p.rdoCreditCard.checked = true;" style="width:100%;">
<option selected="selected" value="Visa">Visa</option>
</select>
</td>
</tr>
<tr>
<td>Account Number: </td>
<td>
<input name="t1:t2:c:p:txbCCAccount" type="text" maxlength="20" id="t1_t2_c_p_txbCCAccount" autocomplete="off" onkeypress="$p.rdoCreditCard.checked = true;" style="width:150px;">
</td>
</tr>
<tr>
<td>Expiration Date: </td>
<td>
<select name="t1:t2:c:p:ddlCCExpMonth" id="t1_t2_c_p_ddlCCExpMonth">
<option selected="selected" value=""></option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="t1:t2:c:p:ddlCCExpYear" id="t1_t2_c_p_ddlCCExpYear">
<option value=""></option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
</select>
</td>
</tr>
<tr id="t1_t2_c_p_rowSaveCCQuestion">
<td></td>
<td>
<input id="t1_t2_c_p_chkSaveCC" type="checkbox" name="t1:t2:c:p:chkSaveCC"> Save my credit card information</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

How do I unhide a row after it is hidden? - javascript

Related

How to select only one row in table with checkbox

Calculate Percentage of YES/NO and find average

two select options - validate and hide option not needed

JQuery does not work but last element in all browsers

Hide Table Row with Javascript

Categories

Resources