jquery - how to move td to another td

jquery - how to move td to another td - javascript

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.

Related

How to display calculations in an html form using 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/

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

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..

Use javascript to show tables via select

I want to display a certain table when it's selected from the select drop down. This is so far I have got, but it's not working
javascript;
var opt = document.getElementById('select');
opt.onchange = function() {
document.getElementById('t1').style.display = 'none';
document.getElementById('t2').style.display = 'none';
document.getElementById('t3').style.display = 'none';
document.getElementById('t4').style.display = 'none';
document.getElementById('t' + this.value).style.display = '';
html
<select name="select" id="select">
<option selected="selected" disabled="disabled">Please Select</option>
<option value="1">CAT Requests</option>
<option value="2">Stop Bulk Messages</option>
<option value="3">PO - Deposit Transfer</option>
<option value="4">PO - Address Change</option>
</select>
<table id="t1">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>CAT Name</td>
<td><input type="text" name="cat_name"/> </td>
</tr>
<tr>
<td>Artist Name</td>
<td><input type="text" name="art_name"/> </td>
</tr>
<tr>
<td>Language</td>
<td><input type="text" name="lang"/> </td>
</tr>
</table>
<table id="t2">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<table id="t3">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Amount</td>
<td><input type="text" name="amt"/> </td>
</tr>
<tr>
<td>Reason to Transfer</td>
<td><input type="text" name="reason_to_transfer"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<table id="t4">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Customer Name</td>
<td><input type="text" name="cus_name"/> </td>
</tr>
<tr>
<td>Correct Address</td>
<td><input type="text" name="corr_name"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
I don't get why the tables are hidden on pageload and shown when the relevant option is selected.

Here you go!
http:/http://jsfiddle.net/tjC59/1/
<body>
<select name="select" id="select" onchange="changeSelection()"><!--Added the onchange Function -->
<option value="0">Please Select</option>
<option value="1">CAT Requests</option>
<option value="2">Stop Bulk Messages</option>
<option value="3">PO - Deposit Transfer</option>
<option value="4">PO - Address Change</option>
</select>
<table id="t1">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>CAT Name</td>
<td><input type="text" name="cat_name"/> </td>
</tr>
<tr>
<td>Artist Name</td>
<td><input type="text" name="art_name"/> </td>
</tr>
<tr>
<td>Language</td>
<td><input type="text" name="lang"/> </td>
</tr>
</table>
<table id="t2">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<table id="t3">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Amount</td>
<td><input type="text" name="amt"/> </td>
</tr>
<tr>
<td>Reason to Transfer</td>
<td><input type="text" name="reason_to_transfer"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<table id="t4">
<tr>
<td>Etisalat Number</td>
<td><input type="text" name="eti_num"/> </td>
</tr>
<tr>
<td>Customer Name</td>
<td><input type="text" name="cus_name"/> </td>
</tr>
<tr>
<td>Correct Address</td>
<td><input type="text" name="corr_name"/> </td>
</tr>
<tr>
<td>Comment</td>
<td><input type="text" name="comment"/> </td>
</tr>
</table>
<!-- Good Practice - Always put your scripts at the end of the Html Body -->
<script>
//When the option is changed
var changeSelection = function () {
//Hide all of the elements
hideAll();
//If the select value is > 0 (is valid)
if (document.getElementById("select").value > 0) {
//Set the element display to "block" (block is typically the default display type)
document.getElementById("t" + document.getElementById("select").value).style.display = "block";
}
};
//Function to hide all of the elements
var hideAll = function () {
//Loop through the elements
for (var i = 1; i <= 4; i++) {
//Hide each one
document.getElementById("t" + i).style.display = "none";
}
};
//This function automaticaly executes when the page is loaded
(function () {
//Hide all of the elements
hideAll();
})()
</script>

The problem here is that the default option is selected on pageload. So your onchange handler is fired with the value "Please Select" on pageload. What this does is that it hides all the tables and document.getElementById('tPleaseSelect') is not found, and hence no table is shown.

I have a fiddle working that displays the tables on page load. Then when one of the tables is selected it shows just that table. Your above code works fine besides the fact that you were missing a close };.
Fiddle Here

You can display by the below code slight modification on your code:
<select name="select" id="select" onchange="displayTable();">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function displayTable() {
var opt = document.getElementById('select');
opt.onchange = function () {
document.getElementById('t1').style.display = 'none';
document.getElementById('t2').style.display = 'none';
document.getElementById('t3').style.display = 'none';
document.getElementById('t4').style.display = 'none';
document.getElementById('t' + this.value).style.display = '';
};
}
</script></head>

Develop Reference

JavaScript is the programming language of the Web.

jquery - how to move td to another td - javascript

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.

Related

How to display calculations in an html form using javascript

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

Ajax action only on specific class

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

Use javascript to show tables via select

Categories

Resources