How to make editable table using bootstrap and jQuery only? - javascript

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

Related

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.

First hide then Show multiple tbody groups based on a dropdown selection using jQuery

I an trying to first show only the first tbody (in a table with a thead and multiple tbody grouping) on page load and then show the rest of the tbody based on a change in a dropdown selection using jQuery
Here is a sample of the code.
//here is the custom JS we would like to add
$("#choice").change(function() {
$("#table tbody tr").hide();
$("#table tbody tr." + $(this).val()).show('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="choice">
<option>Choose...</option>
<option value="1Year">1 Year</option>
<option value="1.25Years">1 Year 3 Months</option>
<option value="1.5Years">1 Year 6 Months</option>
<option value="2Years">2 Years</option>
</select>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="1Year">
<tr>
<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>
</tr>
</tbody>
<tbody id="1.25Years">
<tr>
<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>
</tr>
</tbody>
<tbody id="1.5Years">
<tr>
<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>
</tr>
</tbody>
</table>
I would like Show the first six months of the calculator content and give users the option to display the rest of the table (calculator) content for several years when they select the option on the dropdown.
Kindly assist.
Start by doing what you say you are doing - hide tbody and not trs
Then make sure there are no special chars in the ID and that it starts with a letter or underscore - it makes your life easier in jQuery
Since IDs need to be unique, you can access them directly
You do need an ID on the table to do #table tbody too
Also give the Choose a blank value
I added selected to the 1year to be able to trigger change on it on load to handle "show only the first tbody on page load"
I also added t2Years to the table
//here is the custom JS we would like to add
$("#choice").on("change",function() {
$("#table>tbody").hide();
if (this.value) $("#t" + this.value).show('fast');
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="choice">
<option value="">Choose...</option>
<option selected value="1Year">1 Year</option>
<option value="1_25Years">1 Year 3 Months</option>
<option value="1_5Years">1 Year 6 Months</option>
<option value="2Years">2 Years</option>
</select>
<table id="table">
<thead>
<tr>
<th>Table header</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="t1Year">
<tr>
<td>1 year</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>
</tr>
</tbody>
<tbody id="t1_25Years">
<tr>
<td>1.25</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>
</tr>
</tbody>
<tbody id="t1_5Years">
<tr>
<td>1.5</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>
</tr>
<tbody id="t2Years">
<tr>
<td>2</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>
</tr>
</tbody>
</table>
--------- REDACTED (This is all wrong :P) ------
An ID or class can't start with a number. e.g. 1Year should be changed to Year1. Also you can't use . in a class or id. e.g. 1.25Years should be changed to Years1-25.
------ REDACTED ------
NOTE of redaction: Numbers are now allowed at the beginning of classes and ids in html5. Periods are also allowed in ids, just be sure to escape the period in your CSS. e.g. #1\.25Years
Actual issue with code
Your jquery selector was selecting an element with an id of table, rather than the table. Also you were selecting a tr with a class of the selected options value rather than the id of the tbody. I have changed it so the table is selected and the id of the tbody is selected.
//here is the custom JS we would like to add
$("#choice").change(function() {
$("table tbody").hide();
$("table tbody#" + $(this).val()).show('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="choice">
<option>Choose...</option>
<option value="Year1">1 Year</option>
<option value="Years1-25">1 Year 3 Months</option>
<option value="Years1-5">1 Year 6 Months</option>
<option value="Years2">2 Years</option>
</select>
<table id="table">
<thead>
<tr>
<th>hello</th>
<th>hello</th>
<th>hello</th>
<th>hello</th>
<th>hello</th>
<th>hello</th>
<th>hello</th>
</tr>
</thead>
<tbody id="Year1">
<tr>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
</tr>
<tr>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
</tr>
</tbody>
<tbody id="Years1-25">
<tr>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
</tr>
<tr>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
</tr>
</tbody>
<tbody id="Years1-5">
<tr>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
</tr>
<tr>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
</tr>
</tbody>
<tbody id="Years2">
<tr>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
</tr>
<tr>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
</tr>
</tbody>
</table>
I have arrived at the final solution to the problem above.
Users will have a header and a few rows of the data permanently displayed (grouped under the thead).
Upon loading of the page, the selected will settle on choose (displaying none of the tbody groups) and have the option to extent the data by selecting option in the dropdown menu at the top. The tbody groups will display at the bottom of the permanent rows:
A big thank you to all those who contributed.
See final code below:
//here is the custom JS we would like to add
$("#choice").on("change",function() {
$("#table>tbody").hide();
if (this.value) $("#t" + this.value).show('fast');
}).change();
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="choice">
<option selected value="">Choose...</option>
<option value="1Year">1 Year</option>
<option value="1_25Years">1 Year 3 Months</option>
<option value="1_5Years">1 Year 6 Months</option>
<option value="2Years">2 Years</option>
</select>
<table id="table">
<thead>
<tr>
<th>Table header</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td>Permanent row 1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Permanent row 2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody id="t1Year">
<tr>
<td>1 year</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>
</tr>
</tbody>
<tbody id="t1_25Years">
<tr>
<td>1.25</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>
</tr>
</tbody>
<tbody id="t1_5Years">
<tr>
<td>1.5</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>
</tr>
<tbody id="t2Years">
<tr>
<td>2</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>
</tr>
</tbody>
</table>
</body>
I have researched anc came up with these.
See code:
//here is the custom JS we would like to add
$(document).ready(function(){
$('tbody').hide();
$("#choice").change(function() {
$("table>tbody").hide();
$("table>tbody#" + $(this).val()).show('fast');
});
});
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="choice">
<option selected value="">Choose...</option>
<option value="Year1">1 Year</option>
<option value="Years1-25">1 Year 3 Months</option>
<option value="Years1-5">1 Year 6 Months</option>
<option value="Years2">2 Years</option>
</select>
<table id="table">
<thead>
<tr>
<th>hello</th>
<th>hello</th>
<th>hello</th>
<th>hello</th>
<th>hello</th>
<th>hello</th>
<th>hello</th>
</tr>
<tr>
<td>Permanentrow1</td>
<td>Permanentrow1</td>
<td>Permanentrow1</td>
<td>Permanentrow1</td>
<td>Permanentrow1</td>
<td>Permanentrow1</td>
<td>Permanentrow1</td>
</tr>
<tr>
<td>Permanentrow2</td>
<td>Permanentrow2</td>
<td>Permanentrow2</td>
<td>Permanentrow2</td>
<td>Permanentrow2</td>
<td>Permanentrow2</td>
<td>Permanentrow2</td>
</tr>
</thead>
<tbody id="Year1">
<tr>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
</tr>
<tr>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
<td>Year1</td>
</tr>
</tbody>
<tbody id="Years1-25">
<tr>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
</tr>
<tr>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
<td>Years1-25</td>
</tr>
</tbody>
<tbody id="Years1-5">
<tr>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
</tr>
<tr>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
<td>Years1-5</td>
</tr>
</tbody>
<tbody id="Years2">
<tr>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
</tr>
<tr>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
</tr>
<tr>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
</tr>
<tr>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
</tr>
<tr>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
<td>Years2</td>
</tr>
</tbody>
</table>
</body>
</html>

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 update the variable while changing the select option?

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

Categories