I have created a very small UI to play with colors filling and clearing them.
What UI has:
It has 4 table cells named first, second, third, fourth cell etc.
It has 4 buttons below to it.
i- To color specific cell.
ii- To clear(remove color) for specific cell.
iii- To color all cells.
iv- To clear all cells.
Here comes code now.
HTML code:
Code:
<html>
<head>
<title>Here is what I am trying to change the color of a cell by htting a BUTTON!!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="change_color_of_cell.js"></script>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>first cell</td>
<td>second cell</td>
</tr>
<tr>
<td>third cell</td>
<td>fourth cell</td>
</tr>
</table>
<p>
Enter value to color:<input type="text" id="textbox" value="">
<input type="button" value="Color this cell" onclick="color()" />
<br><br>
Enter value to clear color:<input type="text" id="textbox1" value="">
<input type="button" value="clear this cell" onclick="clearit()">
<br><br>
<input type="button" value="color all cells" onclick="color_all()">
<input type="button" value="clear all cells" onclick="clear_all()">
</p>
</body>
</html>
JS code:
Code:
function get_value(ref){
if(document.getElementById(ref)){
var cell_value = document.getElementById(ref).value
return cell_value;
//alert("value is "+cell_value)
}
}
function color(){
val=get_value('textbox');
var x = document.getElementsByTagName('td');
for(i=0;i<x.length;i++) {
if(val==i){
x[i].style.backgroundColor ="blue";
}
}
}
function clearit(){
val=get_value('textbox1');
var x = document.getElementsByTagName('td');
for(i=0;i<x.length;i++) {
if(val==i){
x[i].style.backgroundColor = "";
}
}
}
function color_all(){
var count = 0;
var x = document.getElementsByTagName('td');
for(i=0;i<x.length;i++){
if(x[i].style.backgroundColor!=""){
count++
}
x[i].style.backgroundColor="blue";
}
if(count==i){
alert("Please be aware that all your cells are already filled with color!!")
}
}
function clear_all(){
var x = document.getElementsByTagName('td');
var count = 0;
for(i=0;i<x.length;i++){
if(x[i].style.backgroundColor==""){
count=count+1;
}
x[i].style.backgroundColor="";
}
console.log(count)
if(count==i){
alert("Please be aware, NO cell is having color as of now!!")
}
}
In case anyone wants to run it in their system, I recommend use Visual CODE studio(very very easy to deal with these kind of programs) and create a HTML file with mentioned code above, create a JS file with mentioned above(name should be "change_color_of_cell.js", since I have mentioned that in HTML code) and run it with LIVE server on 5500 default port and go to you browser with hitting link http://localhost:5500/change_color_of_cell.html you could play with UI then.
I am rushing to purchase things as of now, will add more CODE explanation and screen shots to this post in sometime too.
JAVA Script, HTML, CSS is really cool
NOTE: This time less googling and less references taken
Thanks,
R. Singh
This User Gave Thanks to RavinderSingh13 For This Post:
Not sure if this is the right place to ask this but here goes. I am creating a cheat sheet for co-workers. The concept is that you pick wire size and conduit size and the amount of wires that will fit is displayed. I haven't used alot of drop downs and can't quite figure out the way the get id... (3 Replies)
I have a internal wesbite set up and any visitor must enter username / passwd as defined in apache (I've set these up using htpasswd)
I use cgi scripts set up using ksh or javascript to populate pages / tables etc.
I want to be able to get the apache username that the used authorised... (3 Replies)
I have tried to create a web page browser window. An example, I copied what the book pretty much wanted but get only the header. What should I change? Also Anyone know any good books for this? Many thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Translation/EN"
... (4 Replies)
Hey All,
What I'm looking for is a way to rotate an image by non 90 degree angles (ie 90, 180, 270, 360). I am able to do it in PHP, but there are errors in the image, some pixels end up colored incorrectly and the image ends up resized and I lose transparency. I've done my share of searching on... (1 Reply)
I am having some problems. I have been able to learn HTML, but when I try and encode CSS, nothing happens, what is the major issue here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>MY CSS</title>
<style... (7 Replies)
Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library.
After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far):
Component Example: ... (0 Replies)
While I'm on the subject of Google trends, here is a global trend since 2004 comparing react.js, angular.js, vue.js
It's no secret I'm a vue.js fan and coder, but not because of the trend line (which I just saw for the first time a few minutes ago) My experience is that vue.js, a late arrival... (0 Replies)
04-20-2019
