how to update the variable while changing the select option? - javascript

This is html page, which contains JavaScript and HTML code.
In this, if I select '1' then it will show the table which match with the id '1'.
The question is:
If I change the value into '2', will it still keep the table value for '1' and afterwards adds value for number '2' to the table ?
<html>
<head>
<scripttype="text/javascript">
window.onload =functionmyfunction(val){
vareSelect=document.getElementById('transfer_reason');
varoptOtherReason=document.getElementById('otherdetail');
varoptOtherReason1=document.getElementById('otherdetail1');
varoptOtherReason2=document.getElementById('otherdetail2');
varoptOtherReason3=document.getElementById('otherdetail3');
varoptOtherReason4=document.getElementById('otherdetail4');
varoptOtherReason5=document.getElementById('otherdetail5');
eSelect.onchange=function()
{ if(eSelect.selectedIndex===0)
{
optOtherReason.style.display='block';
}
elseif(eSelect.selectedIndex===1)
{
optOtherReason1.style.display='block';
}
elseif(eSelect.selectedIndex===2)
{
optOtherReason2.style.display='block';
}
elseif(eSelect.selectedIndex===3)
{
optOtherReason3.style.display='block';
}
elseif(eSelect.selectedIndex===4)
{
optOtherReason4.style.display='block';
}
elseif(eSelect.selectedIndex===5)
{
optOtherReason5.style.display='block';
}
else
{
optOtherReason.style.display='none';
}
}
}
</script>
</head>
<body>
<selectid="transfer_reason"name="transfer_reason"onchange="myfunction(this.value);">
<optionvalue="1">1</option>
<optionvalue="2">2</option>
<optionvalue="3">3</option>
<optionvalue="4">4</option>
<optionvalue="5">5</option>
<optionvalue="6">6</option>
<optionvalue="other">OtherReason</option>
</select>
<divid="otherdetail"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail1"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail2"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail3"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail4"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail5"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>

you need to hide all tables at the start of myfunction like below
function myfunciton()
{
// hide all tables first
optOtherReason1.style.display='none';
optOtherReason2.style.display='none';
optOtherReason3.style.display='none';
optOtherReason4.style.display='none';// hide all tables whatever you have
}

Try to reset the values before you set / update the new value.
Example idea
Set Table1 to block
Change to 2
Set Table1 to none
Set Table2 to block
...

Related

How to print complex table layout

Im struggling to print my table when it spans over multiple pages. some of the nested rows overrun into the next page and overlaps in the footer. Because my rows are nested - one row is made up of 4 or more rows im finding table page breaks aren't working as expected because the rows aren't grouped?
If my assumption is correct is there a way I can group them into one row so they stay together on page breaks and allow for legible printing? or is there a different workaround?
the below is an example of 'one' row but you can get a better idea here https://jsfiddle.net/Elbusta/5kz02uy1/9/
<tbody class="center">
<tr>
<td class="main-content" colspan="7" rowspan="6">
<div>
<div>
<span class="blue">
Content Heading Text
</span>
<span class="corner">
ugh
</span>
</div>
<div>
<span>
ipsum
</span>
<span class="middle">
lorem
</span>
<span class="corner">
Corner Text
</span>
</div>
<div>
<span>
Text
</span>
<span class="middle">
Text
</span>
</div>
<div>
<span>
bleh
</span>
<span class="middle">
blah
</span>
</div>
</div>
</td>
<td>08:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>13:00</td>
<td class="filled"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>15:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>16:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>17:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>18:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>

Count number of dynamic rows and display it in input box in html

i have tried to count number of dynamic rows in html table in which when counting the rows it is also counting table head and i want to display number of rows in a input box.
$(document).ready(function(){
$(".count").click(function(){
// Select all the rows in the table
// and get the count of the selected elements
var rowCount = $("#tbpnr tr").length;
var x = document.write(rowCount*280).innerHTML;
return(x);
document.getElementById("answer").value = x;
});
});
This code will count the number of rows in the table body and place the number of rows * 280 into the input element.
$(document).ready(function() {
$(".count").click(function() {
var rowCount = $("#tbpnr tr").length;
document.getElementById("count").textContent = rowCount;
document.getElementById("answer").value = rowCount * 280;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="tbpnr">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<button class="count">Count</button>
<br>
Number of rows:
<b id="count"></b>
<br>
Number of rows * 280:
<input id="answer" />
You can use jQuery itself for adding count in the input box.
Try the below code for displaying count inside input.
$(document).ready(function(){
$(".count").click(function(){
// Select all the rows in the table
// and get the count of the selected elements
var rowCount = $("#tbpnr tr").length;
$("#answer").attr("value", rowCount*280)
});
});
Please add HTML of the table for addressing the table header count issue.

How do I link cells interactively with jquery?

How would I be able to link cells to create a new cell so that I call add a global value like in the snippet. In the snippet there are 3 chosen rows that can be chosen at random by the user and any number of them.
What I want to do is be able to link the chosen rows to add a new cel that has an overall value captured by the user.
How do I link the cells depending on which ones the user chooses. with jquery in a interactive way as to not reload the page.
I want to know how to go about to solve this problem.
the code snippet only shows a visual example after the rows are chosen by the user which should create a new cel next to it.
they have to be linked as to those 3 have a global value of the new cell...
$(document).ready(function() {
$('tbody tr').eq(0).find('td').eq(7).css('background-color', 'green');
$('tbody tr').eq(3).find('td').eq(7).css('background-color', 'green');
$('tbody tr').eq(4).find('td').eq(7).css('background-color', 'green');
});
table,
td {
border: 1px solid #000;
}
td {
width: 40px;
height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
I'm guessing you want a function like this:
$('tr').click(function(){
// The tr that was clicked
var $tr = $(this);
// Create a new td with a green background-color
var $newTd = $('<td></td>').css('background-color', 'green');
// Append the new td to the clicked row
$tr.append($newTd);
// Add an empty td to all other rows
$('tr').not($tr).append('<td></td>');
});

I need to make my buttons interact with Javascript for this etch-a-sketch

I'm trying to get my buttons to work as they say via Javascript. I can't seem to come up with a function to clear the grid and start a new game(which would allow the program to ask the user to enter a new size that they would want to make the grid, bring it back to the default size(16x16), or change the color from black. Lastly, why is that I can't seem to change the height of the table. I can change the width but the table goes all the way to the bottom of the screen. Is there a way to compress it into a square.
http://fiddle.jshell.net/bklynbest/6f68qodf/4/
$(document).ready(function() {
var t = $('<table/>'),
r = $('<tr/>'),
x = 16,
y = 16;
for (var i = 1; i <= (x * y); ++i) {
if (i % y === 0 && t.append(r)) r = $('<tr/>');
r.append($('<td/>'));
}
$('body').append(t);
$('td').hover(function() {
$(this).css("background-color", "black");
});
});
body {
margin: 0;
}
table {
background-color: gray;
width: 100vmin;
height: 100vmin;
border-collapse: collapse;
}
h1 {
padding: 1%;
background-color: red;
font-family: Cursive;
color: yellow;
width: 90%;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head></head>
<title>Etch-A-Sketch</title>
<body>
<h1 align="center"> My Etch-a-Sketch game</h1>
<div class="navbar">
<button class="normal">Default</button>
<button class="random">Random Color</button>
<button class="opacity">Opacity Color</button>
<button class="clear">New Game/Clear</button>
</div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
I have updated your jsFiddle here : http://fiddle.jshell.net/6f68qodf/7/
jQuery
$(document).ready(function () {
var colours = ["red", "blue", "green", "purple", "black", "white"];
var colour = "black";
var t = $('<table/>'),
r = $('<tr/>'),
x = 16,
y = 16;
for (var i = 1; i <= (x * y); ++i) {
if (i % y === 0 && t.append(r)) r = $('<tr/>');
r.append($('<td/>'));
}
$('body').append(t);
$('td').hover(function () {
$(this).css("background-color", colour);
});
$('.clear').on('click', function () {
$('td').css("background-color", "grey");
});
$('.random').on('click', function () {
colour = colours[Math.floor((Math.random() * colours.length))];
console.log(colour);
});
$('.normal').on('click', function () {
colour = "black";
});
});
I haven't coded the opacity button because I'm not sure what you would like to do with that :). But personally a canvas would be a much better bet for this then a table, I hope my code will help.
To get buttons to run JavaScript, you need to add an event listener for the "click" event to each of of your <button> elements. You can do this a few ways, here are two simple ones:
1) Use the onclick attribute on your button elements. Here is a quick example:
function buttonClicked(){
alert("Button was clicked!");
}
<button onclick="buttonClicked()">My Button</button>
2) Create an event listener for the button click:
var myButton = document.getElementById("my_button");
myButton.addEventListener("click", function(e){
alert("You clicked my button!");
});
<button id="my_button">My Button</button>
Here is a link to more information on click events.
As for your issue with height, you set height: 100vmin; on your table in your CSS. That is equivalent of saying, "Set the height of my <table> to be 100% the size of which ever is smaller, the window's height or width." If you really want to use vmin, here is a link with some good information. Otherwise, you should probably use a different CSS unit for the height of your table. See here for a list of CSS units.

How to make editable table using bootstrap and jQuery only?

This is my bootstrap table.I want to insert data into table using jQuery only.On clicking a particular cell,a textbox should be open to enter data.I don't want to use any other plugin.
<table class="table table-bordered">
<thead class="mbhead">
<tr class="mbrow">
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
help me.thanx.
You basically want to add an event to the user clicking on a table row. In jQuery you can add that event like this
$("table.table tr td").bind("click", dataClick);
In the dataClick function you wan to make the row editable. You can do so like this.
function dataClick(e) {
console.log(e);
if (e.currentTarget.innerHTML != "") return;
if(e.currentTarget.contentEditable != null){
$(e.currentTarget).attr("contentEditable",true);
}
else{
$(e.currentTarget).append("<input type='text'>");
}
}
I have a sample here, http://jsfiddle.net/JPVUk/4/
Hope this helps

Categories