How to display calculations in an html form using javascript

How to display calculations in an html form using javascript - javascript

I have a short form in HTML and basically it calculates the results of the users input. I have 4 sections, section a.1, a.2, b.1, b.2. I want to be able to add sum of section a.1 and display it on the subtotal line, same goes for section a.2, b.1 and b.2. Lastly I would like to sum up the total points awarded and display it in the totals row on the summary table at the top of the page. Please run my code and any advice or code snippets is appreciated. I would like to maintain the structure of my code. I am new to javascript and would love some advice to help build my understanding. Thanks!
var sections = {
section_a: 0,
section_b: 0,
}
//Calculates Section A
function calcSectionA(section) {
let sum = 0;
//Queries All <Select> and looks for class = "select section_a" and add each selected option and assings it to sum
document.querySelectorAll('select.' + section)
.forEach((input) => {
sum += parseInt(input.options[input.selectedIndex].value);
});
sections[section] = sum;
document.getElementById('total_' + section).textContent = sum;
document.getElementById('summary_' + section).textContent = sum
document.getElementById('percent_' + section).textContent = Math.ceil(sum / 8 * 100) + '%';
calcRanks();
}
//Calculates Section B
function calcSectionB(section) {
let sum = 0;
//Queries All <Select> and looks for class = "select section_b" and add each selected option and assings it to sum
document.querySelectorAll('select.' + section)
.forEach((input) => {
sum += parseInt(input.options[input.selectedIndex].value);
});
sections[section] = sum;
document.getElementById('total_' + section).textContent = sum;
document.getElementById('summary_' + section).textContent = sum
document.getElementById('percent_' + section).textContent = Math.ceil(sum / 4 * 100) + '%';
calcRanks();
}
function calcRanks() {
let sectionsArr = [];
let keys = Object.keys(sections);
keys.forEach((key, i) => {
sectionsArr.push({
section: key,
value: sections[key],
rank: 0
});
if (i + 1 === keys.length) {
sectionsArr.sort((a, b) => {
return a.value > b.value ? -1 : a.value < b.value ? 1 : 0
});
let lastIndex = 0;
for (let i = 1; i < sectionsArr.length; i++) {
let section = sectionsArr[i];
let lastSection = sectionsArr[lastIndex];
//console.log(lastSection.value, section.value);
if (lastSection.value > section.value) {
sectionsArr[i].rank = lastSection.rank + 1;
}
if (lastSection.value === section.value) {
sectionsArr[i].rank = lastSection.rank;
}
lastIndex = i;
}
displayRanks(sectionsArr);
}
});
}
function displayRanks(sections) {
sections.forEach((section) => {
document.getElementById('rank_' + section.section).textContent = section.rank + 1;
});
}
<table>
<tr>
<th>Category</th>
<th>Points Possible</th>
<th>Points Awarded</th>
<th>Percent Achieved</th>
<th>Ranking</th>
</tr>
<tr>
<td align="center">A</td>
<td align="center">60</td>
<td align="center"><b><div><span id="summary_section_a"></span></div></b></td>
<td align="center"><b><div><span id="percent_section_a"></span></div></b></td>
<td bgcolor="#92d050" align="center" id="rank_section_a"></td>
</tr>
<tr>
<td align="center">B</td>
<td align="center">50</td>
<td align="center"><b><div><span id="summary_section_b"></span></div></td>
<td align="center"><b><div><span id="percent_section_b"></span></div></td>
<td bgcolor="#92d050" align="center" id="rank_section_b"></td>
</tr>
<tr>
<td align="right"><b>Totals=</b></td>
<td align="center"><b></b></td>
<td align="center"><b><div></div></b></td>
<td align="center"><b><div><span id="TotalPercent"></span></div></b></td>
<td align="center"></td>
</tr>
</table>
<table>
<th>Section A.1</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id=""></div></b></td>
</tr>
<th>Section A.2</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id=""></div></b></td>
</tr>
<tr>
<td class="subtotal">Section A. Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="total_section_a"></div></b></td>
</tr>
<th>Section B.1</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id=""></div></b></td>
</tr>
<th>Section B.2</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id=""></div></b></td>
</tr>
<tr class="blueHead">
<td class="subtotal">Section B. Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="total_section_b"></div></b></td>
</tr>
</table>

I gave a number of your div and some span tag id attributes. In your onchange functions, I just grabbed the values of the ddls and sum them up for the individual totals for A and B sections. Then at the top of the table, I just grabbed the two numbers and summed those as well in your onchange function so every time you change a value, the sum will update. This isn't the best way to give your elements values, but this should help get you on the right track. Hopefully this helps
var sections = {
section_a: 0,
section_b: 0,
}
//Calculates Section A
function calcSectionA(section) {
let sum = 0;
//Queries All <Select> and looks for class = "select section_a" and add each selected option and assings it to sum
document.querySelectorAll('select.' + section)
.forEach((input) => {
sum += parseInt(input.options[input.selectedIndex].value);
});
sections[section] = sum;
document.getElementById('total_' + section).textContent = sum;
document.getElementById('summary_' + section).textContent = sum
document.getElementById('percent_' + section).textContent = Math.ceil(sum / 8 * 100) + '%';
calcRanks();
var a1Q1 = document.getElementById('a1').value;
var a1Q2 = document.getElementById('a2').value;
document.getElementById('section_a1subTotal').textContent = parseInt(a1Q1) + parseInt(a1Q2);
var a2Q1 = document.getElementById('a3').value;
var a2Q2 = document.getElementById('a4').value;
document.getElementById('section_a2subTotal').textContent = parseInt(a2Q1) + parseInt(a2Q2);
var aTotals = document.getElementById('summary_section_a').textContent;
var bTotals = document.getElementById('summary_section_b').textContent;
if (aTotals !== "" && bTotals !== "") {
document.getElementById('totalNum').textContent = parseInt(aTotals) + parseInt(bTotals);
}
}
//Calculates Section B
function calcSectionB(section) {
let sum = 0;
//Queries All <Select> and looks for class = "select section_b" and add each selected option and assings it to sum
document.querySelectorAll('select.' + section)
.forEach((input) => {
sum += parseInt(input.options[input.selectedIndex].value);
});
sections[section] = sum;
document.getElementById('total_' + section).textContent = sum;
document.getElementById('summary_' + section).textContent = sum
document.getElementById('percent_' + section).textContent = Math.ceil(sum / 4 * 100) + '%';
calcRanks();
var b1Q1 = document.getElementById('b1').value;
var b1Q2 = document.getElementById('b2').value;
document.getElementById('section_b1subTotal').textContent = parseInt(b1Q1) + parseInt(b1Q2);
var b2Q1 = document.getElementById('b3').value;
var b2Q2 = document.getElementById('b4').value;
document.getElementById('section_b2subTotal').textContent = parseInt(b2Q1) + parseInt(b2Q2);
var aTotals = document.getElementById('summary_section_a').textContent;
var bTotals = document.getElementById('summary_section_b').textContent;
if (aTotals !== "" && bTotals !== "") {
document.getElementById('totalNum').textContent = parseInt(aTotals) + parseInt(bTotals);
}
}
function calcRanks() {
let sectionsArr = [];
let keys = Object.keys(sections);
keys.forEach((key, i) => {
sectionsArr.push({
section: key,
value: sections[key],
rank: 0
});
if (i + 1 === keys.length) {
sectionsArr.sort((a, b) => {
return a.value > b.value ? -1 : a.value < b.value ? 1 : 0
});
let lastIndex = 0;
for (let i = 1; i < sectionsArr.length; i++) {
let section = sectionsArr[i];
let lastSection = sectionsArr[lastIndex];
//console.log(lastSection.value, section.value);
if (lastSection.value > section.value) {
sectionsArr[i].rank = lastSection.rank + 1;
}
if (lastSection.value === section.value) {
sectionsArr[i].rank = lastSection.rank;
}
lastIndex = i;
}
displayRanks(sectionsArr);
}
});
}
function displayRanks(sections) {
sections.forEach((section) => {
document.getElementById('rank_' + section.section).textContent = section.rank + 1;
});
}
<table>
<tr>
<th>Category</th>
<th>Points Possible</th>
<th>Points Awarded</th>
<th>Percent Achieved</th>
<th>Ranking</th>
</tr>
<tr>
<td align="center">A</td>
<td align="center">60</td>
<td align="center"><b><div><span id="summary_section_a"></span></div></b></td>
<td align="center"><b><div><span id="percent_section_a"></span></div></b></td>
<td bgcolor="#92d050" align="center" id="rank_section_a"></td>
</tr>
<tr>
<td align="center">B</td>
<td align="center">50</td>
<td align="center"><b><div><span id="summary_section_b"></span></div></td>
<td align="center"><b><div><span id="percent_section_b"></span></div></td>
<td bgcolor="#92d050" align="center" id="rank_section_b"></td>
</tr>
<tr>
<td align="right"><b>Totals=</b></td>
<td align="center" id="totalNum"><b></b></td>
<td align="center"><b><div></div></b></td>
<td align="center"><b><div><span id="TotalPercent"></span></div></b></td>
<td align="center"></td>
</tr>
</table>
<table>
<th>Section A.1</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select id="a1" class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select id="a2" class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="section_a1subTotal"></div></b></td>
</tr>
<th>Section A.2</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select id="a3" class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select id="a4" class="select section_a" onChange="calcSectionA('section_a')">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="section_a2subTotal"></div></b></td>
</tr>
<tr>
<td class="subtotal">Section A. Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="total_section_a"></div></b></td>
</tr>
<th>Section B.1</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select id="b1" class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select id="b2" class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="section_b1subTotal"></div></b></td>
</tr>
<th>Section B.2</th>
<tr>
<td>Question 1</td>
<td align="center"></td>
<td align="center">
<select id="b3" class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 2</td>
<td align="center"></td>
<td align="center">
<select id="b4" class="select section_b" onChange="calcSectionB('section_b')">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Sub Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="section_b2subTotal"></div></b></td>
</tr>
<tr class="blueHead">
<td class="subtotal">Section B. Total</td>
<td align="center"><b></b></td>
<td align="center"><b><div id="total_section_b"></div></b></td>
</tr>
</table>
jsfiddle: https://jsfiddle.net/q28yk4j0/1/

Related

Jquery problem in accessing information inside a var

This is what i have done so far i created a dropdown menu inside a table and based on selection from this menu i want to do some calculations and insert those calculation inside a table and here the problem begins i don't know how to access what someone picked inside this menu also i want to take the information from the table and use it for calculations
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
var vat = [{
display: "ZW",
value: "0"
}, {
display: "NP",
value: "0"
}, {
display: "0%",
value: "0"
}, {
display: "3%",
value: "0.03"
}, {
display: "8%",
value: "0.08"
}, {
display: "23%",
value: "0.023"
}];
var options = ['<option value="">Wybierz VAT</option>'];
for(var i = 0; i < vat.length; i++){
options.push('<option value="');
options.push(vat[i].value);
options.push('">');
options.push(vat[i].display);
options.push('</option>');
}
$('.obliczvat').html(options.join('')).change(function(){
var val = $(this).val();
if(val[i].value ==0)
{
var ilosc = parseInt($('.ilosc',this).text(),10);
var brutto =parseInt($('.brutto',this).text(),10);
var ob = (brutto*ilosc);
$('.netto',this).text(ob);
}
else
{
}
});
});
</script>
this is the html portion
<table class="tabela">
<tr>
<th>Lp.</th>
<th>Opis</th>
<th>Ilość</th>
<th>VAT</th>
<th>Kwota Brutto</th>
<th>Wartość Netto</th>
<th>Wartość Brutto</th>
</tr>
<tr>
<td>1</td>
<td>Palety</td>
<td class="ilosc">2</td>
<td> <form name="Vat">
<select class="obliczvat"></select></form>
</td>
<td class="brutto">2000</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Modernizjacja sprzętu komputerowego</td>
<td class="ilosc">10</td>
<td> <form name="Vat">
<select class="obliczvat"></select></form>
</td>
<td class="brutto">120</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>modernizacja biura</td>
<td class="ilosc">4</td>
<td> <form name="Vat">
<select class="obliczvat"></select></form>
</td>
<td class="brutto">5000</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>Paliwo</td>
<td class="ilosc">7</td>
<td> <form name="Vat">
<select class="obliczvat"></select></form>
</td>
<td class="brutto">350</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>Zakup nowego Samochódu do floty</td>
<td class="ilosc">1</td>
<td> <form name="Vat">
<select class="obliczvat"></select></form>
</td>
<td class="brutto">23753</td>
<td class="netto"></td>
<td></td>
</tr>
</table>

The expression $(this).val() results in a numeric value.
$(function () {
var vat = [
{
display: "ZW",
value: "0",
},
{
display: "NP",
value: "0",
},
{
display: "0%",
value: "0",
},
{
display: "3%",
value: "0.03",
},
{
display: "8%",
value: "0.08",
},
{
display: "23%",
value: "0.023",
},
];
var options = ['<option value="">Wybierz VAT</option>'];
for (var i = 0; i < vat.length; i++) {
options.push('<option value="');
options.push(vat[i].value);
options.push('">');
options.push(vat[i].display);
options.push("</option>");
}
$(".obliczvat")
.html(options.join(""))
.change(function () {
var val = $(this).val();
if (val == 0) {
var ilosc = parseInt($(this).closest("td").prev().text(), 10);
var brutto = parseInt($(this).closest("td").next().text(), 10);
var ob = brutto * ilosc;
$(this).closest("td").next().next().text(ob);
} else {
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tabela">
<tr>
<th>Lp.</th>
<th>Opis</th>
<th>Ilość</th>
<th>VAT</th>
<th>Kwota Brutto</th>
<th>Wartość Netto</th>
<th>Wartość Brutto</th>
</tr>
<tr>
<td>1</td>
<td>Palety</td>
<td class="ilosc">2</td>
<td>
<form name="Vat">
<select class="obliczvat"></select>
</form>
</td>
<td class="brutto">2000</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Modernizjacja sprzętu komputerowego</td>
<td class="ilosc">10</td>
<td>
<form name="Vat">
<select class="obliczvat"></select>
</form>
</td>
<td class="brutto">120</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>modernizacja biura</td>
<td class="ilosc">4</td>
<td>
<form name="Vat">
<select class="obliczvat"></select>
</form>
</td>
<td class="brutto">5000</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>Paliwo</td>
<td class="ilosc">7</td>
<td>
<form name="Vat">
<select class="obliczvat"></select>
</form>
</td>
<td class="brutto">350</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>Zakup nowego Samochódu do floty</td>
<td class="ilosc">1</td>
<td>
<form name="Vat">
<select class="obliczvat"></select>
</form>
</td>
<td class="brutto">23753</td>
<td class="netto"></td>
<td></td>
</tr>
</table>

Disable input based off of option I choose in the same row, all rows are the same

I have a table whose rows are copied from the original row, so all the IDs are the same. How can I disable an input with respect to the option I choose in the same row.
For example if in the second row I choose option 10, it disables the second input in that same row.
<table>
<tbody>
<tr>
<td><select id="my_option">
<option>10</option>
<option>20</option>
</select></td>
<td id="1"><input type="text"></td>
<td id="2"><input type="text"></td>
</tr>
<tr>
<td><select id="my_option">
<option>10</option>
<option>20</option>
</select></td>
<td id="1"><input type="text"></td>
<td id="2"><input type="text"></td>
</tr>
<tr>
<td><select id="my_option">
<option>10</option>
<option>20</option>
</select></td>
<td id="1"><input type="text"></td>
<td id="2"><input type="text"></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function()
{
function change_attribute(version_val)
{
var version_val = $("#my_option").val();
var table = $(table);
//this part is just a test to select a specific cell
var cell = table.rows[1].cells[1];
if (version_val == "10") {
$(cell).attr("disabled", true);
} else if (version_val == "20") {
$(cell).attr("disabled", false);
}
}
</script>

You need to insert the select's inside td and you need to change the duplicate id's by common classes instead for a valid HTML structure :
$(document).ready(function() {
$('.my_option').on('change', change_attribute);
});
function change_attribute() {
var version_val = $(this).val();
var parent_row = $(this).closest('tr');
if (version_val == 10) {
parent_row.find('.1').find('input').attr("disabled", "disabled");
parent_row.find('.2').find('input').removeAttr("disabled");
} else if (version_val == 20) {
parent_row.find('.2').find('input').attr("disabled", "disabled");
parent_row.find('.1').find('input').removeAttr("disabled");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
</tbody>
</table>

Ajax action only on specific class

I have different tables on a webpage, but would like to trigger Ajax (in this case, updating the columns of a table) only on a particular table.
Actually, learning the way to apply the action to 'everything but class X' would be just as nice as to find out how to apply the action 'only to class X'.
Example code:
<table class="currtable1">
<thead>
<td colspan="5">
Table 1
<SELECT name="menu">
<option value="eur">EUR</option>
<option value="thb">THB</option>
<option value="btc">BTC</option>
<option value="eth">ETH</option>
<option value="xmr">XMR</option>
</SELECT>
</td>
</thead>
<tbody>
<tr>
<td>column EUR</td>
<td style="display:none;">column THB</td>
<td style="display:none;">column BTC</td>
<td style="display:none;">column ETH</td>
<td style="display:none;">column XMR</td>
</tr>
<tr>
<td>column EUR</td>
<td style="display:none;">column THB</td>
<td style="display:none;">column BTC</td>
<td style="display:none;">column ETH</td>
<td style="display:none;">column XMR</td>
</tr>
</tbody>
</table>
<hr>
<table class="currtable2">
<thead>
<td colspan="5">
Table 2
</td>
</thead>
<tbody>
<tr>
<td>column EUR</td>
<td style="display:none;">column THB</td>
<td style="display:none;">column BTC</td>
<td style="display:none;">column ETH</td>
<td style="display:none;">column XMR</td>
</tr>
<tr>
<td>column EUR</td>
<td style="display:none;">column THB</td>
<td style="display:none;">column BTC</td>
<td style="display:none;">column ETH</td>
<td style="display:none;">column XMR</td>
</tr>
</tbody>
</table>
Javascript (I try to update only "currtable2" when the selection changes, but it doesn't work that way):
$(document).on('change', "table.currtable2 thead select", function() {
var index = $('option:selected',this).index()+1;
console.log(index)
$('table tbody tr').each(function() {
$(this).find("td").hide();
$(this).find("td:nth-child("+index+")").show();
});
});
JsFiddle: https://jsfiddle.net/jsrookey/z8pj7dns/2/

Change select by adding class
for example:
<SELECT name="menu" class="menu">
<option value="eur">EUR</option>
<option value="thb">THB</option>
<option value="btc">BTC</option>
<option value="eth">ETH</option>
<option value="xmr">XMR</option>
</SELECT>
</td>
in javascript
$( document ).ready(function() {
$(".menu").change(function(){
// your logic here
});
});

Correct way to only update one of both tables:
$(document).on('change', 'table thead select', function() {
var index = $('option:selected',this).index()+1;
$('table.currtable1 tbody tr').each(function() {
$(this).find("td").hide();
$(this).find("td:nth-child("+index+")").show();
});
});

jquery - how to move td to another td

I have a table like this.
<table>
<tr>
<td>A</td>
<td><select id="B" name="B">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td class="sample">F: will hide/show</td>
<td class="sample">G: will hide/show</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td class="id1">J</td>
<td class="id1">K</td>
<td>L</td>
</tr>
<tr>
<td>M</td>
<td class="id2">N</td>
<td class="id2">O</td>
<td>P</td>
</tr>
</table>
Then, whenever I change the value in <td>B select option , <td>F and <td>G will hide..
It will then move up belows <td>...
<td>J & <td>K to <td>F & <td>G ,
<td>N & <td>O to <td>J & <td>K ,
Opposite happens if <td>F and <td>G will be shown.. other <td> will move down
here is the jquery ive started.
$('select#B').change(function(event) {
if (this.value == '2') {
$(".sample").show();
} else {
$(".sample").hide();
}
});
http://jsfiddle.net/rucsh/40/

$('select#B').change(function(event) {
var clone = $('td.id1').clone();
var clone2 = $('td.id2').clone();
if (this.value == '2') {
$(".sample, td.id1, td.id2").show();
$('.clone').remove();
} else {
$(".sample, td.id1, td.id2").hide();
$(clone).insertAfter('.sample:last').addClass('clone');
$(clone2).insertAfter('.id1:last').addClass('clone');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>A</td>
<td><select id="B" name="B">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td class="sample">F: will hide/show</td>
<td class="sample">G: will hide/show</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td class="id1">J</td>
<td class="id1">K</td>
<td>L</td>
</tr>
<tr>
<td>M</td>
<td class="id2">N</td>
<td class="id2">O</td>
<td>P</td>
</tr>
</table>

High-level instructions,
Clone the target element you want to move
Save it variable
Remove the original element
Insert the cloned element (in step 2) to the desired location.
All above steps can be easily competed using jQuery.

How to focus on a specific day on a calender with Javascript

I recently made my own calendar using html and CSS, now I want the calendar to have the possibility to choose a day and month from the dropdown list, so when I choose a date it will focus on the day and change its color
I have done some coding with Javascript but problem is it takes to much lines in Javascript, anyone knows an easier way?
JS Code:
function selectDay() {
var day = document.getElementById("day");
var month = document.getElementById("month");
var type = document.getElementById("type");
var selectedValueday = day.options[day.selectedIndex].value;
var selectedValuemonth = month.options[month.selectedIndex].value;
var selectedValuetype = type.options[type.selectedIndex].value;
if ((selectedValueday === "01") && (selectedValuemonth === "01") && (selectedValuetype === "01")) {
document.getElementById('jan1').style.backgroundColor = 'purple';
} else if((selectedValueday === "01") && (selectedValuemonth === "01") && (selectedValuetype === "02")){
document.getElementById('jan1').style.backgroundColor = 'yellow';
}else{
document.getElementById('jan1').style.backgroundColor = 'white';
}
if ((selectedValueday === "02") && (selectedValuemonth === "01") && (selectedValuetype === "01")) {
document.getElementById('jan2').style.backgroundColor = 'purple';
} else if((selectedValueday === "02") && (selectedValuemonth === "01") && (selectedValuetype === "02")){
document.getElementById('jan2').style.backgroundColor = 'yellow';
}else{
document.getElementById('jan2').style.backgroundColor = 'white';
}
}
HTML Code:
<select id="day">
<option>Kies een dag</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="month">
<option>Kies een maand</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="type">
<option>Kies een type</option>
<option value="01">Feestdag</option>
<option value="02">Verjaardag</option>
</select>
<button onclick="selectDay();">Zoek</button>
<h1 align='center'>Jaarkalender 2013</h1>
<table align='center' width = '1600' border = '0'>
<tr>
<td ALIGN="center"><B>Januari</B>
<table height = '175' border = '0'>
<tr>
<TD bgcolor='B9B1B1'><b><b>Maandag</b></b><FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Dinsdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Woensdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Donderdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Vrijdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Zaterdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Zondag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
</tr>
<TR>
<TD><font color="#888888">30</font></TD>
<TD id="jan1" title = 'Nieuwjaar'><font color = '#FF0000'><B>1</B></TD>
<TD id="jan2">2</TD>
<TD>3</TD>
<TD>4</TD>
<TD bgcolor='#00FFFF'>5</TD>
<TD bgcolor='#00FFFF'>6</TD>
</TR>
<TR>
<TD>7</TD>
<TD>8</TD>
<TD>9</TD>
<TD>10</TD>
<TD>11</TD>
<TD bgcolor='#00FFFF'>12</TD>
<TD bgcolor='#00FFFF'>13</TD>
</TR>
<TR>
<TD>14</TD>
<TD>15</TD>
<TD>16</TD>
<TD>17</TD>
<TD>18</TD>
<TD bgcolor='#00FFFF'>19</TD>
<TD bgcolor='#00FFFF'>20</TD>
</TR>
<TR>
<TD>21</TD>
<TD>22</TD>
<TD>23</TD>
<TD>24</TD>
<TD>25</TD>
<TD bgcolor='#00FFFF'>26</TD>
<TD bgcolor='#00FFFF'>27</TD>
</TR>
<TR>
<TD>28</TD>
<TD>29</TD>
<TD>30</TD>
<TD>31</TD>
<TD><font color="#888888">1</font></TD>
<TD bgcolor='#00FFFF'><font color="#888888">2</font></TD>
<TD bgcolor='#00FFFF'><font color="#888888">3</font></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD bgcolor='#00FFFF'></TD>
<TD bgcolor='#00FFFF'></TD>
</TR>
</table>
</TD>
<td ALIGN="center"><B>Februari</B>
<table border = '0' height = '175'>
<tr>
<TD bgcolor='B9B1B1'><b><b>Maandag</b></b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Dinsdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Woensdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Donderdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Vrijdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Zaterdag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
<TD bgcolor='B9B1B1'><b>Zondag</b> <FONT COLOR="B9B1B1">.</FONT></TD>
</tr>
<TR>
<TD><font color="#888888">28</font></TD>
<TD><font color="#888888">29</font></TD>
<TD><font color="#888888">30</font></TD>
<TD><font color="#888888">31</font></TD>
<TD>1</TD>
<TD bgcolor='#00FFFF'>2</TD>
<TD bgcolor='#00FFFF'>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
<TD>7</TD>
<TD>8</TD>
<TD bgcolor='#00FFFF'>9</TD>
<TD bgcolor='#00FFFF'>10</TD>
</TR>
<TR>
<TD>11</TD>
<TD>12</TD>
<TD>13</TD>
<TD>14</TD>
<TD>15</TD>
<TD bgcolor='#00FFFF'>16</TD>
<TD bgcolor='#00FFFF'>17</TD>
</TR>
<TR>
<TD>18</TD>
<TD>19</TD>
<TD>20</TD>
<TD>21</TD>
<TD>22</TD>
<TD bgcolor='#00FFFF'>23</TD>
<TD bgcolor='#00FFFF'>24</TD>
</TR>
<TR>
<TD>25</TD>
<TD>26</TD>
<TD>27</TD>
<TD>28</TD>
<TD><font color="#888888">1</font></TD>
<TD bgcolor='#00FFFF'><font color="#888888">2</font></TD>
<TD bgcolor='#00FFFF'><font color="#888888">3</font></TD>
</TR>
</table>
</TD>
</table>
CSS Code:
table{
left: -200px;
border-collapse:collapse;
border:1px solid black;
}

Give each of the table cells (the ones representing dates only) an individual id - they cant start with a number so I suggest use m then the month number d then the day number - eg id='m2d5' for the 5th February.
Then you can use the value of each of your SELECT elements to create the id and use:
var dayid = "m"+month.value+"d"+day.value;
document.getElementById('dayid').className = 'lit'
If you want only one cell highlighted you'll either have to keep track of the id of the cell you last lit or use something like
var reset = document.getElementsByClassName("lit");
while (reset.length) { reset[0].className = "normal"; }
To find and reset any lit ones..

Develop Reference

JavaScript is the programming language of the Web.

How to display calculations in an html form using javascript - javascript

Related

Jquery problem in accessing information inside a var

Disable input based off of option I choose in the same row, all rows are the same

Ajax action only on specific class

jquery - how to move td to another td

How to focus on a specific day on a calender with Javascript

Categories

Resources