Adding strike-through feature to certain cells in Table - javascript

I have a function that creates a certain number of cells based on the number a user enters into a text box. I am trying to get it so that when the "Shade even Rows" button is clicked, every other cell gets a line-through, but am not having luck. I feel like using i % 2 === 0 is the right way to get the cells I want to put a line-through, but not sure of the specific parameters to put in. Any suggestions would help!
$(document).ready(function() {
$('#nbrTxt').focus();
function addItem() {
var value = $('#nbrTxt').val();
var usrName = prompt("Name?");
$('#buttons').append('<li><button class="shade">Shade Even Rows</button><button class="drkLine">Show Dark Line Every 10 Rows</button></li>')
for (var i = 1; i <= value; i++) {
$('table').append('<tr><td></td><td></td></tr>');
$('table tr:last td:first').html(i);
$('table tr:last td:last').html(usrName);
$(this).focus().select();
$('#nbrTxt').val("");
};
};
$('#btnGo').click(addItem);
$('#nbrTxt').keydown(function(e) {
if (e.which === 13)
addItem();
})
$(document).on('click', '.shade', function() {
if (('#nbrTxt').val() % 2 === 0) {
$(this).closest("tr").css('textDecoration' === 'iine-through');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>JQuery Selector</title>
<style type="text/css">
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script src="jqueryselector.js"></script>
</head>
<body>
<h1>JQuery Selector</h1>
Enter Number:
<input type="number" name="nbrTxt" id="nbrTxt" />
<input type="button" value="GO" id="btnGo" />
<div id='buttons'>
</div>
<table id="table" width="500" border="1">
<tr>
<td>No. Count</td>
<td>Name</td>
</tr>
</table>
</body>
</html>

.css('textDecoration' === 'iine-through'); is not valid procedure to set css property of element; see .css() .
Try using :even selector
$("tr:even").css("textDecoration", "line-through")

Related

Javascript JQuery - Hide a button if value is 0, display if not

I have this:
<input type="button" id="total_items" value="0">
The value is increasing as items added to the site.
What I need is to hide it if the value is 0 and start to displaying as the value is increasing.
I know JQuery has an option to add a css display:none option, but I don't know how. Thank you for all the help!
Try this code below, Just you must call checkValue() function every time number count of objects changed.
var btn = $('#total_items');
$(document).ready(function() {
checkValue();
})
btn.change(function() {
checkValue();
});
function AddNumber(count) {
btn.prop('value', parseInt(btn.attr('value')) + count);
checkValue();
}
function checkValue() {
if (parseInt(btn.prop('value')) === 0)
btn.css("display", "none"); //btn.hide();
else
btn.css("display", ""); //btn.show()
console.log("Current value is:" + btn.prop('value'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="total_items" value="0">
<hr>
<button type="button" onclick="AddNumber(1)">+</button>
<button type="button" onclick="AddNumber(-1)">-</button>
if the element with id total_items is fixed then you can use the css3's attribute selector to make the visibility as hidden and then call the increment logic to make it visible again.
Here is a sample snippet handling the visibility of the total_items based on the value it has:
var btntotal_item = document.getElementById('total_items');
function incrementValue() {
btntotal_item.value++;
}
function decrementValue() {
btntotal_item.value--;
if (btntotal_item.value < 0)
btntotal_item.value = 0;
}
#total_items[value="0"] {
visibility: hidden
}
<input type="button" id="total_items" value="0">
<input type="button" onclick="incrementValue()" value="increment by 1"><input type="button" onclick="decrementValue()" value="decrement by 1">
You can also do this using vanilla javascript =>
if no results are equal to 0 then hideShow button will not show up.
Button press will hide results with value 0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.noDisplay {
display: none;
}
</style>
</head>
<body>
<button id="p1" class="noDisplay">Hide-Show</button>
<table style="width:100%">
<tr>
<th>name</th>
<th>result</th>
</tr>
<tr id="0">
<td>Jill</td>
<td class="result">0</td>
</tr>
<tr id="1">
<td>Eve</td>
<td class="result">30</td>
</tr>
<tr id="2">
<td>john</td>
<td class="result">0</td>
</tr>
</table>
<script>
window.addEventListener('load', HideShowBtn);
let z = [];
function HideShowBtn() {
let x;
fields = document.getElementsByClassName('result');
// Hack to convert nodelists to array
fieldsArr = Array.prototype.slice.call(fields);
x = fieldsArr.map(e => {
return parseInt(e.innerText);
});
let y = document.getElementById('p1').classList;
function check(x) {
return x <= 0;
}
x.forEach(e => {
if (e === 0) {
y.remove('noDisplay');
}
});
for (const i in x) {
if (x[i] === 0) {
z.push(x.indexOf(0, i));
}
}
}
document.getElementById('p1').addEventListener('click', () => {
z.forEach(e => {
document.getElementById(e).classList.toggle('noDisplay');
});
});
</script>
</body>
</html>
You can achieve this effect with CSS alone.
If you want the button to disappear, but leave a button-sized space, use:
visibility: hidden;
If you want the button to disappear completely, use:
display: none;
If you want the button to be invisible (and still clickable), use:
opacity: 0;
Working Example:
input[type="button"][value="0"] {
visibility: hidden;
}
<input type="button" id="total_items" value="2">
<input type="button" id="total_items" value="1">
<input type="button" id="total_items" value="0">
<input type="button" id="total_items" value="1">
<input type="button" id="total_items" value="2">
Where you set the value
$("#total_items").val(value).toggle(value>0)

How to add rows dynamically in a html table

I want to add rows dynamically in a HTML table and the number of the column should be fixed. After adding rows I want to input some text values in each row and column. After entering the text values I want to store it in a database table. How to do that? Here is my code
function addRow() {
var root = document.getElementById('mytab').getElementsByTagName('tbody')[0];
var rows = root.getElementsByTagName('tr');
var clone = cloneEl(rows[rows.length - 1]);
root.appendChild(clone);
}
function addColumn() {
var rows = document.getElementById('mytab').getElementsByTagName('tr'), i = 0, r, c, clone;
while (r = rows[i++]) {
c = r.getElementsByTagName('td');
clone = cloneEl(c[c.length - 1]);
c[0].parentNode.appendChild(clone);
}
}
function cloneEl(el) {
var clo = el.cloneNode(true);
return clo;
}
#mytab td {
width: 100px;
height: 20px;
background: #cccccc;
}
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<form action="">
<input type="button" value="Add a Row" onclick="addRow()">
<input type="button" value="Add a Column" onclick="addColumn()">
</form>
<br>
<table id="mytab" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" name="enter1"></td>
<td><input type="text" name="enter2"></td>
</tr>
</table>
</body>
</html>
In this code, the problem is when I enter some text and after that, I add rows or column the same text appears in the newly added rows and column. But I want to enter different text in different boxes and I want the no of the column should be fixed to say no of the column should be 5.
Updated
Hi, you have to clear input values after cloning elements, as below. cleanUpInputs(clone); will check cloned DOM and will remove input values. Check the code below.
function addRow() {
var root = document.getElementById('mytab').getElementsByTagName('tbody')[0];
var rows = root.getElementsByTagName('tr');
var clone = cloneEl(rows[rows.length - 1]);
cleanUpInputs(clone);
root.appendChild(clone);
}
function addColumn() {
var rows = document.getElementById('mytab').getElementsByTagName('tr'), i = 0, r, c, clone;
while (r = rows[i++]) {
c = r.getElementsByTagName('td');
clone = cloneEl(c[c.length - 1]);
cleanUpInputs(clone);
c[0].parentNode.appendChild(clone);
}
}
function cloneEl(el) {
var clo = el.cloneNode(true);
return clo;
}
function cleanUpInputs(obj) {
for (var i = 0; n = obj.childNodes[i]; ++i) {
if (n.childNodes && n.tagName != 'INPUT') {
cleanUpInputs(n);
} else if (n.tagName == 'INPUT' && n.type == 'text') {
n.value = '';
}
}
}
#mytab td {
width: 100px;
height: 20px;
background: #cccccc;
}
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<form action="">
<input type="button" value="Add a Row" onclick="addRow()">
<input type="button" value="Add a Column" onclick="addColumn()">
</form>
<br>
<table id="mytab" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><input type="text" name="enter1"></td>
<td><input type="text" name="enter2"></td>
</tr>
</table>
</body>
</html>

Converter boxes, How to make it both output boxes work?

I am doing a project of a converter. When I put a number in the number box, it shows up fine in the box2. But when I try to enter a number in box2, and it won't show the answer in box1. Can anyone help me? I don't know jquery and I am a starter of html and javascript. Hopefully, someone can help me. Thanks
function NumberToSquare(num)
{
var sqrt;
sqrt = Math.sqrt(num);
return sqrt;
}
function SquareToNumber(sqrt)
{
var num;
num = Math.pow(sqrt,2);
return num;
}
<html>
<head>
<title>Program Assignment 5</title>
<script type = text/javascript src = "calculate.js"> </script>
<script type="text/javascript">
function ConvertToSqrt()
//Assumes: Number contains a number
//Results: displays the square root in box2
{
num = parseFloat(document.getElementById('box1').value);
sqrt = NumberToSquare(num);
box2.value=sqrt;
}
function ConvertToNum()
//Assumes: Square contains a number of square root
//Results: displays the number in box1
{
sqrt = parseFloat(document.getElementById('box2').value);
num = SquareToNumber(sqrt);
box1.value=num;
}
</script>
</head>
<body>
<div style="border: solid; width: 300px; background-color: #83CAFF">
<table>
<th></th> <th>Square Root Calculation</th>
<tr>
<th>Enter Number:</th><th><input type="number" id="box1" value=""></th>
<tr>
<th>SquareRoot:</th><th><input type="number" id="box2" value=""></th>
<tr>
<th></th><th><input type="button" value="Calculate" onclick="ConvertToSqrt(); ConvertToNum();">
</table>
</div>
If it helps any, here's a quick sample. It's not pretty but you can take what pieces you need and use it with your own.
<html>
<head>
<title></title>
<script>
function calc(which) {
var newVal;
if (which == "sqrt") {
newVal = parseFloat(document.getElementById("num").value);
newVal = Math.sqrt(newVal);
}
else if (which == "num") {
newVal = parseFloat(document.getElementById("sqrt").value);
newVal = Math.pow(newVal, 2);
}
document.getElementById(which).value = newVal;
}
</script>
</head>
<body>
<div style="width:400px;padding:25px;display:inline-block;line-height:150%;background-color:#83CAFF;font-weight:bold;border:solid 1px black;">
<div style="width:200px;float:left;">
<label>Number:</label>
<br />
<label>SquareRoot:</label>
</div>
<div style="width:200px;float:right;">
<input type="number" id="num"/>
<br />
<input type="number" id="sqrt"/>
</div>
<button type="button" style="width:100%;" onclick="calc('sqrt');">Calc Sqrt</button>
<button type="button" style="width:100%;" onclick="calc('num');">Calc Num</button>
</div>
</body>
</html>

Why is my image that is displayed on my website not disappearing when I click on a button using several functions I have written?

In my program, I wrote several functions so that when you typed any number of ticket holders and complementary passes from 1 to 550, and after that, when you clicked on the button "Calculate Available Seats", it would display : "The number of available seats is " and then 555 minus the number of ticket holders and complementary passes. In addition, I also wanted the image of the airplane below to disappear as soon as I click on the "Calculate Available Seats" button. As a result, I use jQuery (because my teacher wanted me to) to make the image disappear when I clicked on that button, which is this:
$("#btnSubmit").click(function() {
$('#airbus').hide();
});
However, when I loaded the webpage and tested it, the image would not disappear when I clicked on the "Calculate Available Seats" button. What am I doing wrong here?
Here is my airbus.js file:
var name = "Michael Bao";
var copyrightdate = 2016;
function copyright() {
console.log(name, copyrightdate);
}
var TicketHolders1 = document.getElementById("txtTickets");
var ComplementaryPasses1 = document.getElementById("txtPasses");
function number_of_available_seats(TicketHolders, ComplementaryPasses) {
var answer = 555 - (parseInt(TicketHolders) + parseInt(ComplementaryPasses));
return("The number of available seats is " + answer);
}
function showresults(TicketHolders, ComplementaryPasses) {
document.getElementById("results").innerHTML = number_of_available_seats(TicketHolders, ComplementaryPasses);
}
var button = document.getElementById("btnSubmit");
function clickonbutton(){
var TicketHolders = parseInt(document.getElementById("txtTickets").value) || 0;
var ComplementaryPasses = parseInt(document.getElementById("txtPasses").value) || 0;
showresults(TicketHolders, ComplementaryPasses);
}
button.onclick = function() {
clickonbutton();
};
$("#btnSubmit").click(function() {
$('#airbus').hide();
});
TicketHolders1.onblur = function() {
if (TicketHolders1.value == "") {
TicketHolders1.value = 0;
}
};
ComplementaryPasses1.onblur = function() {
if (ComplementaryPasses1.value == "") {
ComplementaryPasses1.value = 0;
}
};
And here is my airbus.html file:
<!DOCTYPE html>
<!-- airbus.html -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Airbus Seat Calculator</title>
<style>
DIV.movable { position:absolute;}
</style>
</head>
<body>
<h2>Airbus Seat Calculator</h2>
<form id="formTest" method="get" action="processData">
<table>
<tr>
<td><label for="txtTickets">Ticket Holders<span class="inputs"></span></label></td>
<td><input type="text" id="txtTickets" name="tickets"></td>
</tr>
<tr>
<td><label for="txtPasses">Complementary Passes<span class="inputs"></span></label></td>
<td><input type="text" id="txtPasses" name="passes"></td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" value="Calculate Available Seats" id="btnSubmit"></td>
</tr>
</table>
</form>
<img id="airbus" src="images/airbus.png" />
<div id="results">
</div>
<h2>Michael Bao
2016</h2>
<script src="airbus.js">
</script>
</body>
</html>
You need to define your jquery event listeners inside
$( document ).ready(function() {
});
try the below code
$( document ).ready(function() {
$("#btnSubmit").click(function() {
$('#airbus').hide();
});
});
Here you go. User .classList.toggle.
var pic = document.getElementsByTagName('img')[0];
var btn = document.getElementsByTagName('button')[0];
btn.addEventListener("click", function(){
pic.classList.toggle('hide');
});
img{
height: 48px;
}
.hide{
display:none;
}
<img src="http://simpleicon.com/wp-content/uploads/android.svg" alt="test">
<button>Test</button>

Shading a cell in a table when button is clicked

I have a function that shades every other row in a cell, but can't figure out how to get it so when the button is clicked again, the cells get un-shaded. I'd also like it to not select the first row with the row headers. Any ideas would be appreciated!
$(document).ready(function() {
$('#nbrTxt').focus();
function addItem() {
var value = $('#nbrTxt').val();
var usrName = prompt("Name?");
for (var i = 1; i <= value; i++) {
$('table').append('<tr><td></td><td></td></tr>');
$('table tr:last td:first').html(i);
$('table tr:last td:last').html(usrName);
$(this).focus().select();
};
};
$('#btnGo').click(addItem);
$('#nbrTxt').keydown(function(e) {
if (e.which === 13)
addItem();
})
$(document).on('click', '#shade', function() {
$('tr:even').css('background', '#A0A0A0');
})
$(document).on('click', '#drkLine', function() {
if ($('#nbrTxt').val() % 10 === 0) {
($('#nbrTxt').val()).css('textDecoration', 'line-through');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title>JQuery Selector</title>
<style type="text/css">
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script src="jqueryselector.js"></script>
</head>
<body>
<h1>JQuery Selector</h1>
Enter Number:
<input type="number" name="nbrTxt" id="nbrTxt" />
<input type="button" value="GO" id="btnGo" />
<div id='buttons'>
<input type="button" value="Shade Even Rows" id="shade" />
<input type="button" value="Show Dark Line Every 10 Rows" id="drkLine" />
</div>
<table id="table" width="500" border="1">
<tr>
<td>No. Count</td>
<td>Name</td>
</tr>
</table>
</body>
</html>
Add class shade in your style and use toggleClass() function to add/remove it, check example bellow.
If you don't want to select the first row you can use :not(:first-child) :
$('tr:not(:first-child):even')
Hope this helps.
Snippet
$(document).ready(function() {
$('#nbrTxt').focus();
function addItem() {
var value = $('#nbrTxt').val();
var usrName = prompt("Name?");
$('table>tbody').empty();
for (var i = 1; i <= value; i++) {
$('table').append('<tr><td></td><td></td></tr>');
$('table tr:last td:first').html(i);
$('table tr:last td:last').html(usrName);
$(this).focus().select();
};
};
$('#btnGo').click(addItem);
$('#nbrTxt').keydown(function(e) {
if (e.which === 13)
addItem();
})
$(document).on('click', '#shade', function() {
$('tr:not(:first-child):even').toggleClass('shade');
})
$(document).on('click', '#drkLine', function() {
if ($('#nbrTxt').val() % 10 === 0) {
($('#nbrTxt').val()).css('textDecoration', 'line-through');
}
})
});
tr.shade{
background: #A0A0A0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>JQuery Selector</h1>
Enter Number:
<input type="number" name="nbrTxt" id="nbrTxt" />
<input type="button" value="GO" id="btnGo" />
<div id='buttons'>
<input type="button" value="Shade Even Rows" id="shade" />
<input type="button" value="Show Dark Line Every 10 Rows" id="drkLine" />
</div>
<table id="table" width="500" border="1">
<thead>
<tr>
<td>No. Count</td>
<td>Name</td>
</tr>
</thead>
</table>

Categories

Resources