What I am trying to accomplish is that when a user selects a value from a dropdown box the corresponding row will change to a different color depending on the option selected.
So far I have the rows changing colors just fine but if the user changes their mind and wants to select a new option the row sometimes doesnt change colors. The change is sporadic and sometimes the color will change again sometimes it will not.
Simplified HTML table:
<table class="table" id="myTable">
<tbody>
<tr>
<td>1.</td>
<td>
<select name="queue" class="queue-drop">
<option></option>
<option class="move">Move</option>
<option class="add">Add</option>
<option class="change">Change</option>
<option class="cancel">Cancel</option>
<option class="swap">Swap</option>
</select>
</td>
</tr>
<tr>
<td>2.</td>
<td>
<select name="queue" class="queue-drop">
<option></option>
<option class="move">Move</option>
<option class="add">Add</option>
<option class="change">Change</option>
<option class="cancel">Cancel</option>
<option class="swap">Swap</option>
</select>
</td>
</tr>
</tbody>
</table>
JQuery:
$(document).ready(function(){
$('.queue-drop').change(function(){
var selectedVal = $(this).find("option:selected").text();
if (selectedVal == 'Move') {
$(this).closest('tr').addClass("move-row")
}
else if (selectedVal == "Add") {
$(this).closest('tr').addClass("add-row")
}
else if (selectedVal == "Cancel") {
$(this).closest('tr').addClass("cancel-row")
}
else if (selectedVal == "Change") {
$(this).closest('tr').addClass('change-row')
}
else if (selectedVal == "Swap") {
$(this).closest('tr').addClass('swap-row')
}
});
});
JS Fiddle: http://jsfiddle.net/exx2q/
I am somewhat new to JS and JQuery any help would be appreciated.
You can use .removeClass(), to clear class and then apply the new one
$(this).closest('tr').removeClass().addClass("move-row")
DEMO
Related
I'm trying to make function show or hide table rows with a dropdown list. There is no response from function when selecting element from dropdown. Classes work fine when hiding/displaying in CSS manually. The if statement doesn't have an else to simplify code.
<select id="vendorselect" onselect="tableshow()">
<option>Select vendor:</option>
<option id="Capintec">Capintec</option>
<option id="Exradin">Exradin</option>
</select>
<table class="ionchambers">
<tr class="CapintecTbl">
<td>Capintec PR-05P mini</td>
<td>1.046</td><td>1.045</td><td> 1.044</td>
</tr>
<tr class="ExradinTbl">
<td>Exradin P425</td>
<td>1.046</td><td>1.045</td><td>1.044</td>
</tr>
</table>
function tableshow() {
var table = document.getElementById("vendorselect").value;
if (table == "Capintec") {
document.getElementsByClassName("CapintecTbl").style.display='inline-block';
document.getElementsByClassName("ExradinTbl").style.display='none';
}
}
Change onselect for onchange.
<select id="vendorselect" onchange="tableshow()">
<option>Select vendor:</option>
<option id="Capintec">Capintec</option>
<option id="Exradin">Exradin</option>
</select>
Also, the JavaScript selectors are not working.
Try changing them for these:
document.querySelector(".CapintecTbl").style.display='inline-block';
document.querySelector(".ExradinTbl").style.display='none';
I have 1 set of <select><option> which is if I select 1 option by it value, it will display some text in <div>.
This is my code
$(document).ready(function() {
$('#selectcom').change(function() {
opt = $(this).val();
if (opt == "comp_id") {
$('#new_text').html('Varchar');
$('#size_row').html('20');
} else if (opt == "comp_name") {
$('#new_text').html('Varchar');
$('#size_row').html('20');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select class="selectField" onChange="" id="selectcom">
<option value="">-- Select Field --</option>
<option value="comp_id">comp_id</option>
<option value="comp_name">comp_name</option>
</select>
</td>
<td id="data_row">
<div id="new_text"></div>
</td>
<td id="size_row">
<div id="size_row"></div>
</td>
</tr>
The problem is I cannot display any output either varchar text or 20 text with this code. Anyone please help me. Thank you..
No enough information; yet try to make sure you included jQuery reference in :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
In case you did that , as I can see from jsfiddle. I suspect the css is showing the output in white...try to show some css code.
First check console if you are getting some error due to other script also remove onChange="" if you are using direct jquery on change function, or use below approach.
<tr>
<td>
<select class="selectField" onChange="changeMyValue(this.value)" id="selectcom">
<option value="">-- Select Field --</option>
<option value="comp_id">comp_id</option>
<option value="comp_name">comp_name</option>
</select>
</td>
<td id="data_row"><div id="new_text"></div></td>
<td id="size_row"><div id="size_row"></div></td>
</tr>
function changeMyValue(opt) {
if (opt=="comp_id")
{
$('#new_text').html('Varchar');
$('#size_row').html('20');
}
else if (opt == "comp_name")
{
$('#new_text').html('Varchar');
$('#size_row').html('20');
}
}
It works. I would suspect that you haven't referenced jQuery before your script block/file. Check the developer's console. Does it display something like:
Uncaught ReferenceError: $ is not defined
Solution: Make sure your jQuery file is loaded before your script block/file.
Like:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="your-jsfile.js" type="text/javascript"></script>
Not like:
<script src="your-jsfile.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
$('#selectcom').change(function() {
opt = $(this).val();
if (opt == "comp_id") {
$('#new_text').html('Varchar');
$('#size_row').html('20');
} else if (opt == "comp_name") {
$('#new_text').html('Varchar');
$('#size_row').html('20');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select class="selectField" onChange="" id="selectcom">
<option value="">-- Select Field --</option>
<option value="comp_id">comp_id</option>
<option value="comp_name">comp_name</option>
</select>
</td>
<td id="data_row">
<div id="new_text"></div>
</td>
<td id="size_row">
<div id="size_row"></div>
</td>
</tr>
Also, I recommend using a switch statement. I don't know about performance, but in my opinion, it improves readability.
$(document).ready(function() {
$('#selectcom').change(function() {
opt = $(this).val();
switch (opt) {
case "comp_id":
$('#new_text').html('Varchar');
$('#size_row').html('20');
break;
case "comp_name":
$('#new_text').html('Varchar');
$('#size_row').html('20');
break;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select class="selectField" onChange="" id="selectcom">
<option value="">-- Select Field --</option>
<option value="comp_id">comp_id</option>
<option value="comp_name">comp_name</option>
</select>
</td>
<td id="data_row">
<div id="new_text"></div>
</td>
<td id="size_row">
<div id="size_row"></div>
</td>
</tr>
I'm quite new to web-development, and have a problem which I can't solve. I have a table which has 3 items: car, color and motor type. Table example is here:
<table>
<tr>
<th>Car</th>
<th>Color</th>
<th>Motor type</th>
</tr>
<tr>
<td>Mercedes</td>
<td>Blue</td>
<td>Petrol</td>
</tr>
<tr>
<td>Mercedes</td>
<td>Red</td>
<td>Diesel</td>
</tr>
<tr>
<td>VW</td>
<td>Blue</td>
<td>Hybrid</td>
</tr>
<tr>
<td>VW</td>
<td>Yellow</td>
<td>Diesel</td>
</tr>
<tr>
<td>Alfa Romeo</td>
<td>Red</td>
<td>Diesel</td>
</tr>
<tr>
<td>Alfa Romeo</td>
<td>Green</td>
<td>Petrol</td>
</tr>
</table>
I want to add 3 dropdowns with checkboxes to filter selected items, one for car, one for color and one for motor type. Items in dropdown should be filled dynamically, based on the items in the table.
For example:
First dropdown will be consisted of 3 checkboxes: Mercedes, VW and Alfa Romeo
Second will have Blue, Red, Yellow and Green
and third one will have Petrol, Diesel and Hybrid
Also, when I select Mercedes, for example, Yellow and Green color should be hidden in second dropdown, and Hybrid should be hidden in third dropdown, since there aren't any Yellow/Green/Hybrid Mercedes.
Can someone please help with writing the appropriate JavaScript/jQuery file?
Thank you a lot.
i am write in php, you can modify this
this is only idea for you
//fetch from database
<input type="checkbox" value="Mercedes" onclick="car_fun(this.value)"> Mercedes
<input type="checkbox" value="VW" onclick="car_fun(this.value)"> VW
<input type="checkbox" value="Alfa Romeo" onclick="car_fun(this.value)"> Alfa Romeo
<select id="color">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="Blue">Blue</option>
</select>
<select id="type">
<option value="Petrol">Petrol</option>
<option value="Diesel">Diesel</option>
<option value="Hybrid">Hybrid</option>
</select>
<script>
function car_fun(car)
{
$.ajax({
url:// your url,
data:"$car_name="+car,
type:"post",
dataType:"json",
success:function(result)
{
$("#color").html(result.color);
$("#type").html(result.type);
}
});
}
</script>
fetch the value from database using the passed car value
First, set onchange to the checkboxs to track with is selected.
Then, in the onchange event, use the index of the items you want to hide items of dropdownlist:
document.getElementById('your dropdownlist id').options[index].style.display = 'none';
this is a example.
function changeItemsOfDropDown() {
var drop = document.getElementById("optionDrop");
for (var i = 0; i < drop.options.length; i++) {
if (drop.options[i].value == "Green" || drop.options[i].value == "Blue") {
drop.options[i].style.display = "none";
}
}
}
function fillItemsToDropDown() {
var drop = document.getElementById("optionDrop");
for(var i = 0; i < 5; i++) {
var option = document.createElement('option');
option.text = option.value = "test" + i;
drop.add(option);
}
}
<input type="checkbox" onchange="changeItemsOfDropDown()" >Click to hide items of Green and Blue</input>
<button type="checkbox" onchange="fillItemsToDropDown()" >Fill new options to dropdownlist</button>
<br>
<select id="optionDrop">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="Blue">Blue</option>
</select>
I have a problem writing a function to hide two cells depending on the selected value.
The biggest problem is that the HTML is generated and there can be one such select or eight of them. And to make things more interesting, every one of this select is placed in a separate div and while one is shown, others are hidden.
Here is the function I use to toggle cells. Cells can be shown only if selected value is 'Z', otherwise they must be hidden. It works only on the first select while other are completely ignored. I was trying to use .each() function for every element with id="selector" but there was quite a mass with element indexes and it didn't work either.
$("#selector").change(function(){
if($(this).val().trim() == 'Z'){
$("#labelToHide").toggle(true);
$("#selectToHide").toggle(true);
} else {
$("#labelToHide").toggle(false);
$("#selectToHide").toggle(false);
}
});
Here is the working JSFiddle. It might look incomplete, but it is enough to simulate real situation. Bellow is the XML code I work with from which the HTML is generated.
<xh:td class="RightColumn" id="selectToHide">
<form:selectOne ...>
<!-- form code -->
</form:selectOne>
</xh:td>
Is there some way I can make this script work only for currently shown div? Or is there some other workaround?
With the multiple use of IDs it was never going to work as you were doing it. In the following I've changed all the IDs to relevant classes and modified the script to take that into account...
HTML
<div id="divOne">
<table class="gridtable">
<tr>
<td id="allwaysShown">Allways Shown</td>
<td id="allwaysShown">
<select class="selector">
<option value="Z">Z</option>
<option value="X">X</option>
</select>
</td>
<td class="toHide">Hide this</td>
<td class="toHide">
<select>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
</tr>
</table>
</div>
<div id="divTwo">
<table class="gridtable">
<tr>
<td id="allwaysShown">Allways Shown</td>
<td id="allwaysShown">
<select class="selector">
<option value="Z">Z</option>
<option value="X">X</option>
</select>
</td>
<td class="toHide">Hide this</td>
<td class="toHide">
<select>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
</tr>
</table>
</div>
Javascript
$(".selector").change(function () {
if ($(this).val().trim() == 'Z') {
$(this).closest("tr").find(".toHide").show();
} else {
$(this).closest("tr").find(".toHide").hide();
}
});
What this now does is when a select element (with the class selector) changes, it parses up the DOM to find the row that it is contained in, and then finds all the elements with the class toHide, and either hides or shows them.
Your jsfiddle, modified...
Once you fix the issue with multiple id by changing them to class, you can use the following :
$(".selector").change(function () {
if ($(this).val().trim() == 'Z') {
$(this).parent().nextAll("td").show();
} else {
$(this).parent().nextAll("td").hide();
}
});
$(".selectToHide select").change(function () {
if ($(this).val().trim() == 'Y') {
$(this).parent('td').prev().show();
} else {
$(this).parent('td').prev().hide();
}
});
Updated fiddle
You must use unique ids, use classes instead of ids to group the elements. Instead of toggle use show / hide and assign common class to both select and label e.g. toShowHide and use single call to show hide both. I have changed the html attributes just to demonstrate you should change according to your requirement by keeping in mind that ids must be unique.
Live Demo
$(".selector").change(function () {
if ($(this).val().trim() == 'Z')
$(this).parent().siblings(".toShowHide").show();
else
$(this).parent().siblings(".toShowHide").hide();
});
In HTML id's are all unique, that means on a single page of HTML there can only be one id with the same name, if you have used #selector before, you shouldn't use it again (it won't work in the first place.)
Always use a class for this.
Here's your working code as you needed it
<div id="divOne">
<table class="gridtable">
<tr>
<td class="allwaysShown">Allways Shown</td>
<td class="allwaysShown">
<select class="selector">
<option value="Z">Z</option>
<option value="X">X</option>
</select>
</td>
<td class="hide_this">Hide this</td>
<td class="hide_this">
<select>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
</tr>
</table>
</div>
<div id="divTwo">
<table class="gridtable">
<tr>
<td class="allwaysShown">Allways Shown</td>
<td class="allwaysShown">
<select class="selector">
<option value="Z">Z</option>
<option value="X">X</option>
</select>
</td>
<td class="hide_this">Hide this</td>
<td class="hide_this">
<select>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
</tr>
</table>
</div>
JQuery
$(".selector").change(function () {
if ($(this).val().trim() == 'Z') {
$(this).closest('tr').find('.hide_this').show();
} else {
$(this).closest('tr').find('.hide_this').hide();
}
});
<td><select class="dropDownLists" name=reportFlag id="reportFlag" tabindex="10" style="WIDTH: 160px" onchange='onFocusReportingOptions();'>
<option value="Select">Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
After I select the option Yes or No, below TD's should be shown or not to the user.
<td id="first_td"><select class="dropDownLists" name=reportingOption id="reportFlag" tabindex="10" style="WIDTH: 160px" onchange='callonChange();'>
<option value="Select">Select</option>
<option value="MyTell">Report via tool</option>
<option value="Manual">Report via manually</option>
</select>
</td>
<td id="second_td"><select class="dropDownLists" name=acctFlag id="acctFlag" tabindex="10" style="WIDTH: 160px" onchange='callonChange();'>
<option value="Select">Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
My questions what are the ways to control the display of the td?
one way I can do is with the DIV tags but if we use Div tag i learnt that we need to use table inside the td, in that case then the alignment will be a problem
can any one suggest any other way to get this implemented?
You can use the style visibility instead of display.
Check this code, if this the one suit your needs.
CSS
.hiddenTD{
visibility: hidden;
}
.visibleTD{
visibility: visible;
}
JS
function onFocusReportingOptions(val){
var firstTD = document.getElementById('first_td');
var secondTD = document.getElementById('second_td');
if(val == 'Y') {
firstTD.className = "visibleTD";
secondTD.className = "visibleTD";
} else {
firstTD.className = "hiddenTD";
secondTD.className = "hiddenTD";
}
}
Change something on your HTML
<td>
<select class="dropDownLists" name=reportFlag id="reportFlag" tabindex="10" style="WIDTH: 160px" onchange='onFocusReportingOptions(this.value);'>
<option value="Select">Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
I think you would like imitate "disable"(not hide)
$('td.YOUR CLASS').css('opacity', '0.5').click(function () {
event.preventDefault();
return false;
});
Give the TDs an ID. Then use Javascript to hide the element with the relevant ID (via the CSS display attribute).
<td id="first_td">content</td>
<td id="second_id"><content</td>
var elem = document.getElementById("first_td");
elem.style.display = "none";
The logic for which TD is hidden or shown can be encapsulated in an event handler for the select drop-down.
Are you using tables for layout?! Use divs like such:
DEMO
Then you can easily style it to your needs. (Positioning, etc.)