I have the following code:
<td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">
<button type="button" class="CalendarDay__button">16</button>
</td>
Check button value if it is 16 then remove the .CalendarDay--valid from the parent div.
How do I do this?
You can use closest() method to do that:
var elem = $('.CalendarDay__button');
if (elem.text().trim() === '16') {
elem.closest('.CalendarDay--valid').removeClass('CalendarDay--valid');
}
.CalendarDay--valid button{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">
<button type="button" class="CalendarDay__button">16</button>
</td>
</tr>
</table>
Use parent with this for particular td. I give two td 16 -- 17 on example.17 is shown but 16 remove.
$('.CalendarDay').find('.CalendarDay__button').each(function() {
if ($(this).text() == '16')
$(this).parent('td').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">
<button type="button" class="CalendarDay__button">16</button>
</td>
<td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">
<button type="button" class="CalendarDay__button">17</button>
</td>
</tr>
</table>
Try this if you have multiple buttons to check:
$.each($('.CalendarDay__button'),function(){
var btn = $(this);
var parent = btn.closest('.CalendarDay');
// Before
console.log(parent.attr('class'))
if(btn.text() == "16"){
parent.removeClass('CalendarDay--valid');
// After
console.log(parent.attr('class'))
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="CalendarDay CalendarDay--valid" style="width: 37px; height: 36px;">
<button type="button" class="CalendarDay__button">16</button>
</td>
</tr>
</table>
Related
I have 3 input boxes that trigger the same div that is collapsible
<td>
<input
type="text" name="tbtext1" style="width: 90%;
"data-toggle="collapse" data-target="#exampleModal"
aria-expanded="false" aria-controls="exampleModal" />
</td>
<td style="width:20%">
<input type="text" name="tbtext1" style=" width: 85%; position: relative; right: 0.9rem; "
data-toggle="collapse" data-target="#exampleModal" aria-expanded="false" aria-controls="exampleModal" />
</td>
<td style="width:20%">
<input type="text" name="tbtext1" style="width: 78%; position: relative; right: 2.3rem;"
data-toggle="collapse" data-target="#exampleModal" aria-expanded="false" aria-controls="exampleModal" /><span style="position: relative; right: 1.2rem; ">= $</span>
</td>
<td style="width:20%">
<input type="text" name="tbtext1" style="width: 99%; position: relative; right: 0.8rem; " />
</td>
<div class="collapse" id="exampleModal">
<div class="collapse" id="exampleModal">
<div class="row" style="margin-top:1rem">
<div class="col-md-12">
<h5 class="modal-title" id="exampleModalLabel">Calc phys% using effective age of
<input type="text" id="phys" style="width:3rem" />/Lifespan of <input type="text" id="phys" style="width:3rem" />
</h5>
</div>
</div>
<div class="modal-body">
<table class="innerModalTable" style="width: 100%; text-align: center; border-top: none; margin-left: -1.7rem;">
<tr>
<th class="borderTd " style="text-align:center;border-top:none;border-left:none"> </th>
<th class="borderTd " style="text-align: left; width: 9.3rem; border-top: none; position: relative; left: 2rem;">Physical</th>
<th class="borderTd " style="text-align: center; border-top: none; width: 9rem;">External</th>
<th class="borderTd " style="text-align: center; border-top: none; border-right: none; width: 8rem;">Functional</th>
<th> </th>
</tr>
<tr>
<td class="borderTd ">% of Cost New</td>
<td class="borderTd "><input type="text" style="width:100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td> </td>
</tr>
<tr>
<td class="borderTd " style="width: 10.3rem; text-align: left;">Lump Sum</td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td> </td>
</tr>
</table>
</div>
</div>
currently its working like this when I click into any into any of the input feild the div toggles (collapses)
I want it to work such that when I focus on any of the input fields the div is opened and when I focus out of it the div is closed
Well I found a solution to it using JQuery to achieve this task
$(function () {
console.log('ready')
$('.toggleDepDiv').on('focus', function () {
var x = document.activeElement.classList;
if (x.contains("toggleDepDiv")) {
$('#exampleModal').collapse('show');
}
});
$('.toggleDepDiv').focusout(function (e) {
if (!e.relatedTarget.classList.contains('toggleDepDiv')) {
$('#exampleModal').collapse('hide');
}
});
});
Basically, I collapsed and uncollapse it using focus and focusout event
I wasn't able to catch the active class using
var x = document.activeElement.classList;
So I used relatedTarget
if (!e.relatedTarget.classList.contains('toggleDepDiv'))
on focus out event
I need help with this question:
I have created the table but I don't know how to use the event inside it
<table style="width: 337px; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 90px;" colspan="9">
<table style="width: 329px;" border="1">
<tbody>
<tr>
<td style="width: 105.6875px;"> Skating</td>
<td style="width: 110.3125px;"> Swimming</td>
<td style="width: 130px;"> Cooking</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center;">
<td style="width: 90px;" colspan="9">
<p>Hover Over Hobby Name to See Image</p>
</td>
</tr>
</tbody>
</table>
<br>
<style>
div {
text-align: center;
}
table {
border-collapse: collapse;
}
</style>
Thank you in advance.
You got the idea...
<table style="width: 337px; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 90px;" colspan="9">
<table style="width: 329px;" border="1">
<tbody>
<tr>
<td style="width: 105.6875px;"> Skating</td>
<td style="width: 110.3125px;"> Swimming</td>
<td style="width: 130px;"> Cooking</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center;">
<td style="width: 90px;" colspan="9">
<p>Hover Over Hobby Name to See Image</p>
</td>
</tr>
</tbody>
</table>
<br>
<style>
div {
text-align: center;
}
table {
border-collapse: collapse;
}
</style>
const hobies = document.querySelector('[hobies]')
const hoby_image = document.querySelector('[hoby-image]')
var hoby_images = {
'Skating': 'https://picsum.photos/id/237/200/300',
'Swimming': 'https://picsum.photos/id/238/200/300',
'Cooking': 'https://picsum.photos/id/239/200/300'
}
for(let i = 0; i < hobies.childElementCount; i++){
hobies.children[i].addEventListener('mouseover', ()=>{
hoby_image.children[0].src = `${Object.entries(hoby_images)[i][1]}`
})
}
td{
cursor:pointer;
}
td:hover{
border:red;
}
div {
text-align: center;
}
table {
border-collapse: collapse;
}
<table style="width: 337px; margin-left: auto; margin-right: auto;" border="1">
<tbody>
<tr>
<td style="width: 90px;" colspan="9">
<table style="width: 329px;" border="1">
<tbody>
<tr hobies>
<td style="width: 105.6875px;">Skating</td>
<td style="width: 110.3125px;">Swimming</td>
<td style="width: 130px;">Cooking</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center;">
<td hoby-image style="width: 90px;" colspan="9">
<img src='https://picsum.photos/id/237/200/300'></img>
</td>
</tr>
</tbody>
</table>
<br>
First, for each td tag you want to have the "mouseover" event, you need to add the event handler.
<tr class="hobbies">
<td style="width: 105.6875px" onmouseover="changeImg('skating')">
Skating
</td>
<td style="width: 110.3125px" onmouseover="changeImg('swimming')">
Swimming
</td>
<td style="width: 130px" onmouseover="changeImg('cooking')">
Cooking
</td>
</tr>
For the style just use this
<style>
div {
text-align: center;
}
.hobbies td:hover {
cursor: pointer;
color: red;
}
</style>
Then at the second row change p tag with an img tag
<!-- Change the src attribute onmouseover -->
<img id="imgToChange" src="skating.jpg" alt="skating" />
At the bottom add this script
<script>
const changeImg = (src) => {
let img = document.getElementById("imgToChange");
switch (src) {
case "skating":
img.src = "skating.jpg";
img.alt = "skating";
break;
case "swimming":
img.src = "swimming.jpg";
img.alt = "swimming";
break;
case "cooking":
img.src = "cooking.jpg";
img.alt = "cooking";
}
};
</script>
Base on which td tag is hovering, you can set the src and alt attribute of img tag with parameter.
const changeImg = (src) => {
let img = document.getElementById("imgToChange");
switch (src) {
case "skating":
img.src = "skating.jpg";
img.alt = "skating";
break;
case "swimming":
img.src = "swimming.jpg";
img.alt = "swimming";
break;
case "cooking":
img.src = "cooking.jpg";
img.alt = "cooking";
}
};
div {
text-align: center;
}
.hobbies td:hover {
cursor: pointer;
color: red;
}
<table style="width: 337px; margin-left: auto; margin-right: auto" border="1">
<tbody>
<tr>
<td style="width: 90px" colspan="9">
<table style="width: 329px" border="1">
<tbody>
<tr class="hobbies">
<td style="width: 105.6875px" onmouseover="changeImg('skating')">
Skating
</td>
<td style="width: 110.3125px" onmouseover="changeImg('swimming')">
Swimming
</td>
<td style="width: 130px" onmouseover="changeImg('cooking')">
Cooking
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="text-align: center">
<td style="width: 90px" colspan="9">
<!-- Change the src attribute onmouseover -->
<img id="imgToChange" src="skating.jpg" alt="skating" />
</td>
</tr>
</tbody>
</table>
<br />
Rather than use tables to do the layout (1992 called and wants a word with you) I've re-written using divs, but the concepts are exactly the same.
Attach the event handler .addEventListener for the mouseover event — you would attach it to your <td...> elements instead of my <li> elements.
I have attached which image to use to the element being hovered using a data- attribute, so the handler just gets that value and doesn't have to figure out which of the items is being hovered.
const imageHolder = document.querySelector('#imageholder img');
const hobbies = document.querySelectorAll('#hobbies li');
hobbies.forEach(el =>
el.addEventListener('mouseenter', function(e) {
const hobbyImage = e.target.dataset.image;
imageHolder.src = `https://picsum.photos${hobbyImage}`;
})
);
#app {
width: 80%;
}
#imageholder {
width: 90%;
margin: 0 auto;
}
ul#hobbies {
list-style-type: none;
}
ul li {
display: inline-block;
width: 30%;
text-align: center;
}
li + li {
border-left: 1px solid green;
}
<div id="app">
<ul id="hobbies">
<li data-image="/300/200">Skating</li>
<li data-image="/300/201">Swimming</li>
<li data-image="/300/202">Cooking</li>
</ul>
<div id="imageholder">
<img src="https://picsum.photos/300/200">
</div>
</div>
I'm trying to build a tic-tac-toe game where the user first clicks which player he wants to be, then clicks on the square in the board where he wants to play. The issue I'm having is changing the background of the square that the user clicks. Because I don't know which square the user will click, I can't figure out how to change the style of the background, because the square's id/class is unknown.
I can't say:
document.getElementById("randomId").style.backg round
because I don't know which square the user will click. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Tic-Tac-Toe Game</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<style type="text/css">
#buttons{
margin-top: 50px;
}
#x{
margin-left: 10px;
}
#table{
margin-top: 15px;
background: gray;
table-layout: fixed;
width: auto;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div class="container" id="buttons">
<h2 id="h2">Choose your team!</h2>
<button onclick="myFunctions()" type="button" class="btn btn-default"><span
style="font-weight: bold; font-size: 110%;">O</span></button>
<button type="button" id="x" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>
</button>
<table id="table" class="table table-bordered">
<tbody>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
<tr>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
<td onclick="myFunction()"></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var master = false;
var servant = false;
function myFunctions(){
master = true;
}
function myFunction() {
if (master == true) {
}
}
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Well, you could either do it like this, where you add an argument when you call the function, in this case the this keyword would point to the html element (td).
By adding a css class, you can handle the changes relatively easily and check if it wasn't clicked before.
var master = true;
// clickedElement = your dom element you want to update
function myFunction(clickedElement) {
// if a dom element was given and it doesn't have a className yet
if (clickedElement && !clickedElement.className) {
// set a class on the element
clickedElement.className = master ? 'master' : 'servant';
// change the player (if it's not a master it's a servant)
master = !master;
}
}
#buttons {
margin-top: 50px;
}
#x {
margin-left: 10px;
}
#table {
margin-top: 15px;
background: gray;
table-layout: fixed;
width: auto;
width: 250px;
height: 250px;
}
.master {
background-color: green;
}
.servant {
background-color: red;
}
<div class="container" id="buttons">
<h2 id="h2">Choose your team!</h2>
<button onclick="myFunctions()" type="button" class="btn btn-default"><span style="font-weight: bold; font-size: 110%;">O</span>
</button>
<button type="button" id="x" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span>
</button>
<table id="table" class="table table-bordered">
<tbody>
<tr>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
</tr>
<tr>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
</tr>
<tr>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
<td onclick="myFunction(this)"></td>
</tr>
</tbody>
</table>
</div>
There is of course no reason to only store this information on the DOM, you would still have to evaluate if there were 3 cells of the same color. You might want to choose to keep a data structure that checks which block was clicked and who clicked it and if there are diagonally, vertically or horizontally 3 in a row for the person who just clicked.
and if you want some more inspiration, you can check this jsfiddle
I have an HTML table like this:
<table id="order-table">
<tr class="row-header">
<td style="width: 40px; text-align: center; size: 8pt;">Delete<input tabindex="-1" id="checkbox-delete-all" type="checkbox"></td>
<td style="width: 70px;">Line</td>
<td style="width: 140px;">Product ID</td>
<td style="width: 70px;">Order Qty</td>
<td style="width: 140px;">Description</td>
<td style="width: 140px;">ABC8</td>
<td style="width: 140px;">UPC</td>
<td style="width: 140px;">NDC</td>
</tr>
<tr class="row">
<td style="text-align: center;"><input tabindex="-1" class="checkbox-delete-row" type="checkbox"></td>
<td class="row-target" style="width: 70px;">10</td>
<td style="width: 140px;"><input class="id-target" name="original-input[1]" style="width: 140px;" type="text" /></td>
<td style="width: 70px;"><input class="qty-target" name="qty[1]" style="width: 70px;" type="text" value="1" /></td>
<td style="width: 140px;"></td>
<td style="width: 140px;"><input readonly tabindex="-1" class="abc8-target" name="abc8[1]" style="width: 140px; border: 0; background: transparent" type="text" value="12345678" /></td>
<td style="width: 140px;"></td>
<td style="width: 140px;"></td>
</tr>
</table>
I have a JavaScript/jQuery function like this:
$("#dialog-create-order").on("keydown", function(event) {
if (event.which === 13) {
$(this).parents("td").next("td").find("input").focus();
event.preventDefault();
}
});
The table may have n additional rows made up of the <tr class="row"> code.
When enter is pressed I want the cursor to go to the next input box (on current row and then on next row) but currently it is not. I'm using jQuery 1.10.2. What am I doing wrong?
Fiddle: http://jsfiddle.net/5rMhm/
Here you go Phillip- hope this helps
$("input[type=text]").on("keydown", function(event) {
if (event.which === 13) {
console.log("Enter pressed");
var nextOnRow = $(this).parent().next("td").find("input[type=text]");
if(nextOnRow.length != 0) {
nextOnRow.focus();
} else {
var nextRowInputs = $(this).parent().parent().next("tr").find("input[type=text]");
if(nextRowInputs.length > 0) {
nextRowInputs[0].focus();
}
}
event.preventDefault();
}
});
And here's the JFiddle: http://jsfiddle.net/5rMhm/29/
I have created a table that contains a dynamic form, so when clicked add button will display a new row with the same form each line. and I have also made the switch to clear the form, but it is not going well. anything because there are other functions in the action to remove that line. The following coding that I have made.
html:
<table class="table table-striped area-table tabel-form-makanan">
<thead>
<tr>
<th>Nama Makanan</th>
<th>Jenis Makanan</th>
<th>Harga Makanan</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" class="nama-makanan" placeholder="ketikkan nama makanan"/>
<input type="hidden" name="id-makanan[]" class="id-makanan"/>
</td>
<td>
<input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/>
</td>
<td>
<input type="text" readonly name="harga-makanan[]" rel="hargaMakanan" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/>
</td>
<td>
<a class="btn hapus-baris-makanan" style="display: none;"><i class="icon-remove"></i></a>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary tombol-tambah-makanan" type="button" style="float: right; margin-right: 10px;">Tambah</button>
javascript for dynamic form:
$('.tombol-tambah-makanan').on('click', function(){
var tr = '<tr>\n\
<td><input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" class="nama-makanan" placeholder="ketikkan nama makanan"/><input type="hidden" name="id-makanan[]" class="id-makanan"/></td>\n\
<td><input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/></td>\n\
<td><input type="text" readonly name="harga-makanan[]" rel="hargaMakanan" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/></td>\n\
<td><a class="btn hapus-baris-makanan"><i class="icon-remove"></i></a></td>\n\
</tr>';
$("table.tabel-form-makanan tbody").append(tr);
});
javascript for delete form:
$('.tabel-form-makanan').on( 'click', '.hapus-baris-makanan', function(){
var parent = $(this).parents('tr');
var harga = $('.harga-makanan', parent).val();
pengurangan_pesanan(harga);
$(this).closest('tr').remove();
});
other javascript:
function pengurangan_pesanan(price) {
if (subtotal > 0) {
var kembali = 0;
subtotal -= parseFloat(price);
$('.subtotal').val(subtotal);
if (cek_bayar != isNaN || cek_bayar != 0) {
kembali = cek_bayar - subtotal;
$('.kembali').val(kembali);
}
}
}
Do you have a solution to this problem, I really need it. thank you
*demo : http://jsfiddle.net/daniwarrior/ANfFe/1/