How to change classes like schedule in html calendar tables - javascript

I have calendar like html tables.like
<td id="1">1</td> <td id="2">2</td> <td id="3">3</td> <td id="4">4</td> <td id="5">5</td>
<td id="6">6</td> <td id="7">7</td> <td id="8">8</td> <td id="9">9</td>
I would like to change its classes like calendar schedule, if I clicked cell2,forward 3day's classes are changed.(I attached images)
①Are there any good way to realize it?
②Are there any other ways to realize schedule like expression(result image is illustrated below),
except for like applying border-bottom options ?
My current attempt is like below.....
.outpatient {
border-bottom: 3px solid yellow;
}
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
image is like below.
Thanks

You can try using .nextAll()
Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
and :lt() selector:
Select all elements at an index less than index within the matched set.
Demo:
$(function() {
$("td").click(function() {
$('td').removeClass('outpatient'); //If you want to reset in each click
$(this).nextAll(':lt(3)').addClass('outpatient');
});
});
table td {
width: 20px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
border: 1px solid gray;
text-align: center;
padding: 5px;
cursor: pointer;
}
.outpatient {
border-bottom: 3px solid yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id="1">1</td> <td id="2">2</td> <td id="3">3</td> <td id="4">4</td> <td id="5">5</td>
<td id="6">6</td> <td id="7">7</td> <td id="8">8</td> <td id="9">9</td>
</tr>
</table>

Related

how to send a value from a tag except input to a function?

hi I had a question that how can I send a value from a tag except for inputs ! to a javascript function
for getting identified ...
for example, I want to click on a tr tag in table (on screen) then send a value or name or something like that to a function then function starts identifying tag value or data ... for example if tag name or tag data or tag value was "tag1" it runs a function.
I searched before and saw many people use data-id but I don't know is it workable for me or not ...
then how can I use it.
<html>
<head>
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<table>
<tr>
<td data-id = "td1" id = "td1" >
</td>
<td id = "td2" >
</td>
<td id = "td3" >
</td>
</tr>
<tr>
<td id = "td4" >
</td>
<td id = "td5" >
</td>
<td id = "td6" >
</td>
</tr>
<tr>
<td id = "td7" >
</td>
<td id = "td8" >
</td>
<td id = "td9" >
</td>
</tr>
</table>
<script>
function clicked(){
let x = document.getElementById("td1").getAttribute("onclick")
}
</script>
</body>
</html>
here is the css code :
* {
margin: 0px;
padding: 0px;
}
table {
width: 200px;
height: 200px;
border:1px solid black;
}
table td {
border:1px solid black;
}
I give you an example for your reference:
let allTrs = document.getElementsByTagName('tr');
for (let i =0;i<allTrs.length;i++){
allTrs[i].addEventListener("click",()=>{hello(allTrs[i])});
}
function hello(row){
let cellList=row.cells;
for (let i=0;i<cellList.length;i++){
console.log("id="+cellList[i].id);
console.log("data-id="+cellList[i].getAttribute('data-id'));
console.log("text content="+cellList[i].textContent);
console.log("=======================================");
}
}
* {
margin: 0px;
padding: 0px;
}
table {
width: 200px;
height: 200px;
border:1px solid black;
}
table td {
border:1px solid black;
}
<table>
<tr>
<td data-id="td1" id="td1">
1
</td>
<td id="td2">
2
</td>
<td id="td3">
3
</td>
</tr>
<tr>
<td id="td4">
4
</td>
<td id="td5">
5
</td>
<td id="td6">
6
</td>
</tr>
<tr>
<td id="td7">
7
</td>
<td id="td8">
8
</td>
<td id="td9">
9
</td>
</tr>
</table>

How to remove class by hovering

I would like to set classaqua by hovering from clicked cells.
I attempt to getfirst id and then change class to hovering cells
But, I stacked removeclasswhen hovering,
My desired result is to change class fromfirstto last hoveredcells.
Are there any method for them?
Thanks
var first;
$(function() {
$("td").click(function() {
first = this.id;
$(this).addClass("aqua");
console.log(first);
});
$('td').hover(function() {
const id = +$(this).attr('id');
console.log(id);
for(var j=first;j<=id;j++){
$("#"+id).addClass("aqua");}
});
});
.aqua{
background-color: aqua;
}
td {
padding: 5px
transition-duration: 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
<td id="10">10</td>
</table>
You should declare the variable first outside of the click handler function. You also should convert the string id to number:
const id = Number($(this).attr('id'));
$(function() {
var first;
$("td").click(function() {
first = this.id;
$(this).addClass("aqua");
console.log(first);
});
$('td').hover(function() {
const id = Number($(this).attr('id'));
console.log(id);
for(var j = first;j <= id; j++){
$("#"+id).addClass("aqua");
}
});
});
.aqua{
background-color: aqua;
}
td {
padding: 5px
transition-duration: 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
<td id="10">10</td>
</table>
THere are a bunch of ways to do this. But i tried to change your initial code as little as i could.
First, you need to convert the id ( which are strings ) to numbers. You can do that with parseInt. Because comparing 2 strings is not correct in this situation. Because '2'<'10' will return false. String comparison happens on character basis. Which mean each character is compared with the corresponding character from the other string.
So '2' is greater > than '10' because '2' > '1' in alphabetical order.
Second, You should remove the aqua class from all td when clicking again on a td.
Third, you do not need a loop. Just check if the current hovered td id is greater than the one you first clicked then add class.
$(function() {
$("td").click(function() {
const first = parseInt(this.id, 10);
$(this).addClass("aqua");
const notThisTd = $('td').not(this)
notThisTd.removeClass("aqua");
notThisTd.hover(function() {
const id = parseInt(this.id, 10);
if (id > first) {
$(this).addClass("aqua");
}
});
});
});
.aqua{
background-color: aqua;
}
td {
padding: 5px
transition-duration: 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
<td id="4">4</td>
<td id="5">5</td>
<td id="6">6</td>
<td id="7">7</td>
<td id="8">8</td>
<td id="9">9</td>
<td id="10">10</td>
</table>

Limit scope of jQuery

var tr0HTML = $('<tr id="exp_line1"></tr>').appendTo(tbody);
What could the best possible way to use .css or any other jQuery to style this element based on the condition?
All I could see is that the change has been implemented to whole page not for the particular scenario!
Update: I want to style borders to the table which has 3 different types of rows. Rows are being displayed if the data is provided.
If I have understood your question... Something as simple as this should work:
tr.type-1 td{
border: 2px solid hotpink;
}
tr.type-2 td{
border: 2px solid purple;
}
tr.type-3 td{
border: 2px solid black;
}
<table>
<tbody>
<tr class="type-1">
<td>Type 1</td>
</tr>
<tr class="type-2">
<td>Type 2</td>
</tr>
<tr class="type-3">
<td>Type 3</td>
</tr>
</tbody>
</table>
Your jQuery code would look like this: $('<tr id="exp_line1" class='type-1'></tr>').appendTo(tbody)

Wrap text in table in p tag

How I could wrap text in the table cell, so it should change from bar <code> bar to <p>bar <code> bar</p>?
Here what I have currently:
(Link to jsFiddle)
<style>
table { width: 100%; border-collapse: collapse; }
td { border: 1px solid black; }
td p { color: red; }
</style>
<table>
<tr>
<td><p>foo <code>code</code> foo</p></td>
<td>bar <code>code</code> bar</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('td').contents()
.filter(function() {
return (this.nodeType === 1 || this.nodeType === 3)
})
.wrap('<p />');
</script>
And so, the desired result should be:
<table>
<tr>
<td><p>foo <code>code</code> foo</p></td>
<td><p>bar <code>code</code> bar</p></td> <!-- fixed -->
</tr>
</table>
Hmm... No answers. Maybe I'm asking something too obvious?
yup! you answered your question..
But here is a snippet if you are actually trying to split data into blocks:
p {
display: table-caption;
}
<table border=1px>
<tr>
<td>
<p>
row11 row12 row13
</p>
</td>
<td>
<p>
row21 <code>row22</code> row23
</p>
</td>
</tr>
</table>
You can do this using only .wrapInner()
The .wrapInner() function can take any string or object that could be passed to the $() factory function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. The structure will be wrapped around the content of each of the elements in the set of matched elements.
In your case:
$('td').wrapInner('<p> <p/>');
table { width: 100%; border-collapse: collapse; }
td { border: 1px solid black; }
td p { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><p>foo <code>code</code> foo</p></td>
<td>bar <code>code</code> bar</td>
<td>foo <code>code</code> foo</td>
<td>bar <code>code</code> bar</td>
</tr>
</table>
The .wrapInner() works with element, class, id.
You can use css to change visual aspects like color, font-style and others
$('.c').wrapInner('<p class = "p1"> <p/>');
$('#c1').wrapInner('<p class = "p2"> <p/>');
$('#c2').wrapInner('<p id = "p3"> <p/>');
table { width: 100%; border-collapse: collapse; }
td { border: 1px solid black; }
td .p1 { color: red; }
td .p2 { color: blue;}
td #p3 { color: blue; font-style: italic;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<tr>
<td><p class = "p1" >foo <code>code</code> foo</p></td>
<td class = "c">foo <code>code</code> foo</td>
<td class = "c">bar <code>code</code> bar</td>
<td id = "c1">bar <code>code</code> bar</td>
<td id = "c2">foo <code>code</code> foo</td>
</tr>
</table>

Jquery Javascript function, simple error, can't find it!

When my page loads it calls the function like below:
<body onLoad='changeTDNodes()'>
And the code it calls is below:
enter code here
<script src='jquery-1.4.2.min.js' type='text/javascript'></script>
<script>
function changeTDNodes() {
var threshValue = 10;
$(".threshold").each(function(elem) {
if($("b",elem).innerText > threshValue) {
elem.addClass("overThreshold");
}
});
});
}
I have the class setup correctly in CSS
.overThreshold {
td{font-size:72px;}
th{font-size:72px;}
}
But no classes are being changed, whats going on?
Thanks for all your help!
Below is whole page:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<title>Livermore Readerboard</title>
<script src='jquery-1.4.2.min.js' type='text/javascript'></script>
<script>
$(function() {
var threshValue = 10;
$(".threshold").each(function(elem) {
if($("b",elem).innerText > threshValue) {
elem.addClass("overThreshold");
}
});
});
</script>
<style type='text/css'>
#InnerRight {
width: 50% !important;
position: relative !important;
float: left !important;
}
#InnerLeft {
width: 49% !important;
position: relative !important;
float: right !important;
}
.overThreshold {
td{font-size:72px;}
th{font-size:72px;}
}
</style>
</head>
<body>
<div id='InnerLeft'>
<table border=1 cellpading=1 cellspacing=0>
<tr align=right>
<td align=left><b>Split/Skill</b></td>
<td align=center><B>CIQ</b></td>
<td align=center><b>EWT</b></td>
<td align=center><b>Agents Staffed</b></td>
<td align=center><b>Avail</b></td>
</tr>
<tr align=right>
<td align=left><b>LEAD_IP_REP_video</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>:00</b></td>
<td align=center><b>3</b></td>
<td align=center><b>2</b></td>
</tr>
<tr align=right>
<td align=left><b>LEAD_IP_REP_tier</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>:00</b></td>
<td align=center><b>3</b></td>
<td align=center><b>2</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_video</b></td>
<td align=center class='threshold'><B>60</b></td>
<td align=center><b>10:12</b></td>
<td align=center><b>58</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_hsi</b></td>
<td align=center class='threshold'><B>34</b></td>
<td align=center><b>18:15</b></td>
<td align=center><b>56</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_hn</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>3:48</b></td>
<td align=center><b>3</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>IP_REP_cdv</b></td>
<td align=center class='threshold'><B>6</b></td>
<td align=center><b>14:53</b></td>
<td align=center><b>56</b></td>
<td align=center><b>0</b></td>
</tr>
<tr align=right>
<td align=left><b>CommOps FieldCare</b></td>
<td align=center class='threshold'><B>0</b></td>
<td align=center><b>0</b></td>
<td align=center><b>0</b></td>
<td align=center><b>0</b></td>
</tr>
</table>
</div>
</body>
</html>
You would be far better off, if possible, using ids on your elements, and then using document.getElementById() (or, better yet, using Dojo, MooTools or JQuery to make your code simpler).
So your html looks like:
<td id="cell-repair-video">Repair value is <b>23</b></td>
<td id="cell-ppv">PPV value is <b>5</b></td>
Then your JavaScript looks like:
var RepairVideo_cell = document.getElementById("cell-repair-video");
var RepairVideo_value = RepairVideo_cell.getElementsByTagName("b")[0];
In JQuery (and others), you can easily use a class to determine which elements need thresholding
In this case, your html looks like:
<td class="threshold">Repair value is <b>23</b></td>
<td class="threshold">PPV value is <b>5</b></td>
And your entire JavaScript looks like:
$(function() {
var threshValue = 10;
$('.threshold').each(function(index) {
var thisValue = parseFloat( $('b', this).text() );
if(thisValue > threshValue) {
$(this).addClass('overThreshold');
}
});
});
In your current example, there is an error in your CSS
To style td and th elements with a classname, go
td.overThreshold, th.overThreshold {
background: #F00; /* for example */
}
Presumably you are passing through something to the applyThresholds function where innerHTML on myvalue is not valid. Does it work ok in firefox etc?
My guess would be that the crazy document.getElementsByTagName('B')[36]; code is just returning undefined at some point. You should put some code in applyThresholds to check to see if you are getting invalid arguments through. Something like:
if(myvalue == null || mycell == null) {
return;
}

Categories