Highlighting the matching html cell with select box - javascript

I'd like to highlight the html cell with the matching value with the selectbox at the top. At the moment it only highlights the row. Can I get a little help, please?
What I try to do here is when a number is selected from selectbox, the corresponding cell with the matching value to be highlighted. I'd like to highlight more than one cell at the same time. Notice that they are two different tables.
This is my jsfiddle.
Here is the html code:
<div id="wrapper">
<table class="table1">
<tr>
<td><select name="list1" id="list1">
<option value="">List</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><select name="list2" id="list2">
<option value="">List</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</td>
<td><select name="list3" id="list3">
<option value="">List</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</td>
</tr>
</table>
<table class="table2">
<tr class="row">
<td value="1"> 1 </td>
<td value="11">11</td>
<td value="21">21 </td>
</tr>
<tr class="row">
<td value="2"> 2 </td>
<td value="12">12 </td>
<td value="22">22 </td>
</tr>
<tr class="row">
<td value="3"> 3 </td>
<td value="13">13 </td>
<td value="23">23 </td>
</tr>
</table>
</div>
Css code:
.table1,td {
border:1px solid #999;
}
.table1 td {
width:150px;
}
.table2,td {
border:1px solid #999;
}
.table2 td {
width:150px;
}
Jquery code:
$("#list1").change(function () {
var index = this.value - 1;
var $rows = $('.row', '.table2');
$rows.css('background-color', '');
$('.row', '.table2').eq(index).css('background-color', 'yellow');
});

You could achieve this by using the .each() method to iterate over all cells, testing for value matches on each cell base on the currect <select /> value. Something along the lines of this might work for you:
// Apply to all selectors
$("select").change(function () {
// Extract the index of the select being interacted with
var selectIndex = $(this).parent().index();
var value = $(this).val();
// Iterate each cell of the table
$('td', '.table2').each(function() {
// If the cell index matches the index of the corresponding
// selected drop down then update it's background color
if($(this).index() === selectIndex) {
// If a value match is found, apply background color. Other
// wise clear the background color
if($(this).attr('value') == value) {
$(this).css('background-color', 'yellow');
}
else {
$(this).css('background-color', '');
}
}
})
});
.table1,td {
border:1px solid #999;
}
.table1 td {
width:150px;
}
.table2,td {
border:1px solid #999;
}
.table2 td {
width:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
<div id="wrapper">
<table class="table1">
<tr>
<td>
<select name="list1" id="list1">
<option value="">List</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>
<select name="list2" id="list2">
<option value="">List</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</td>
<td>
<select name="list3" id="list3">
<option value="">List</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</td>
</tr>
</table>
<table class="table2">
<tr class="row">
<td value="1"> 1 </td>
<td value="11">11</td>
<td value="21">21 </td>
</tr>
<tr class="row">
<td value="2"> 2 </td>
<td value="12">12 </td>
<td value="22">22 </td>
</tr>
<tr class="row">
<td value="3"> 3 </td>
<td value="13">13 </td>
<td value="23">23 </td>
</tr>
</table>
</div>
Hope this helps! (here's a jsfiddle as well)

Related

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>

How do I unhide a row after it is hidden?

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>

Getting selected values from dropdown inside table

For now I can get the selected values from the event onchange in my dropdown inside my table but it only works on the first row of my table. If I am going to change values from other rows it will still getting the value from the first row.
Here is my code:
<table class="sortable" border="1" id="table">
<thead>
<tr>
<th>Employee Serial</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr style="font-size:11px">
<td>#item.empSerial</td>
<td ALIGN="center">
<select onchange="getSelValue()" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
</tr>
}
</tbody>
</table>
And simple script to read the selected values:
function getSelValue() {
alert(document.getElementById("drpTechnical").value)
}
document.getElementById returns allways only the first element with this ID since IDs should be unique.
What you want is to get the id from that element that has been changed. So you need this
function getSelValue(this) {
alert(this.value)
}
And your table should look like this
<td ALIGN="center">
<select onchange="getSelValue(this)" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
i think you made a small mistake there, the id you set to the select tag is called "drpTechnical" but in the function you try to call element with id of "getSelValue"
Try change the codes like below
Code updates :
<td ALIGN="center">
<select onchange="getSelValue(this)" class="testerDrop"
style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
<script>
function getSelValue(obj) {
alert(obj.value)
}
</script>
function getSelValue(e) {
alert(e.value)
}
<table class="sortable" border="1" id="table">
<thead>
<tr>
<th>Employee Serial</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr style="font-size:11px">
<td>#item.empSerial</td>
<td ALIGN="center">
<select onchange="getSelValue(this)" id="drpTechnical" class="testerDrop" style="height:20px; width:100px; text-align-last:center; cursor:pointer">
<option value=#item.technicalComp>#item.grade1</option>
<option value=#item.empSerial>0</option>
<option value=#item.empSerial>1</option>
<option value=#item.empSerial>2</option>
<option value=#item.empSerial>3</option>
<option value=#item.empSerial>4</option>
</select>
</td>
</tr>
</tbody>
</table>
Try this.

Looping through the span and assigning the values to closest dropdown with jQuery

My objective is to get the value from span and assign the value to the dropdown on the same row.
Here is my jsFiddle: http://jsfiddle.net/bharatgillala/581hk9Ly/4/
<table id="gridviewInfo" runatr="server">
<tbody>
<tr>
<th scope=col>Available Boys.</th>
<th scope=col>Already Selected Boy</th>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl1" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s2" class="spanclass">tom</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl2" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s1" class="spanclass">harry</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl3" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s3" class="spanclass"></span>
</td>
</tr>
</tbody>
</table>
My objective is to loop through all the spans and if there is any text, get the text and assign the text to the closest dropdown.
I've already answered that for you yesterday. The code is fully commented below:
(function(d) {
// when all the DOMElements are already loaded into the document
d.addEventListener('DOMContentLoaded', function() {
// gets the generated table, and get all the dropdownlists inside it
var table = document.getElementById('gridviewInfo'),
ddls = [].slice.call(table.querySelectorAll('.judges'));
// loop through the dropdownlists
ddls.forEach(function(ddl, i) {
// get the label inside the last td
var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;
// change the dropdownlist selectedvalue to the label text
ddl.value = lbl.textContent.trim();
});
});
})(document);
<table id="gridviewInfo" runatr="server">
<tbody>
<tr>
<th scope=col>Available Boys.</th>
<th scope=col>Already Selected Boy</th>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl1" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s2" class="spanclass">tom</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl2" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s1" class="spanclass">harry</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl3" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s3" class="spanclass"></span>
</td>
</tr>
</tbody>
</table>
And here is your fiddle updated: http://jsfiddle.net/581hk9Ly/6/
And if you want a jQuery version:
$(document).ready(function() {
$('.spanclass').each(function() {
$(this).closest('tr').find('.judges').val($(this).text());
});
});

Showing / Hiding Div Content with JavaScript

I need a little help here. I am trying to show / hide div content on select of a jump menu. I can't seem to get the code to work. Here is my code:
JS:
function toggleOther(chosen){
if (chosen == 'cat') {
document.getElementById('categories').style.visibility = 'visible';
} else {
document.getElementById('categories').style.visibility = 'hidden';
document.myform.other.value = '';
}
And my page:
<td class="formlabel" nowrap="nowrap"><form name="Users">Users:</td>
<td nowrap="nowrap" class="formlabel"><select name="fieldname" size="1" onchange="toggleOther( document.myform.values.options[document.myform.values.selectedIndex ].value );" class="select" >
<option selected="selected">Choose</option>
<option>All Users</option>
<option value="cat">User 1</option>
<option value="cat">User 2</option>
<option value="cat">User 3</option>
<option value="cat">User 4</option>
<option value="cat">User 5</option>
</select></td>
<div style="opacity: 0.3; background: #fff; display:none">
<td width="380" valign="top" class="center">
<table width="360" class="imagetable" cellpadding="0" cellspacing="0" id="categories">
<tr>
<th colspan="2" nowrap="nowrap" class="reportname">Categories</th>
</tr>
<tr>
<td class="formlabel" nowrap="nowrap"><form name="Exams">Exams</td>
<td nowrap="nowrap" class="formlabel"><select name="fieldname" size="1" class="select">
<option value="#" selected="selected" target="_blank">Choose</option>
<option value="">All Exams</option>
<option value="">Exam 1</option>
<option value="">Exam 2</option>
<option value="">Exam 3</option>
<option value="">Exam 4</option>
<option value="">Exam 5</option>
</select></td>
</tr>
</form>
<tr>
<td nowrap="nowrap" class="formlabel">Include Categories</td>
<td nowrap="nowrap" class="formlabel"><input type="text" name="textfield2" id="textfield2" class="fields" size="4" />or more items assigned</td>
</tr>
<tr>
<td class="formlabel" nowrap="nowrap">Display Categories</td>
<td nowrap="nowrap" class="formlabel">that appear
<input type="text" name="textfield3" id="textfield3" class="fields" size="4" />or more exams</td>
</tr>
</table>
Any help here? I cannot seem to get it to work...
To hide:
document.getElementById('categories').style.display="none"
To show:
document.getElementById('categories').style.display=""
It is better to use the jquery's .toggle() method. You save time and it is nicer since you can do effects
http://api.jquery.com/toggle/
you could just do
$(#categories).toggle(); //to show or hide the id = "categories"

Categories