How to make my buttons shift downwards when my table grows - javascript

I have an issue with my HTML, where when I go to add more than 3 new assets into my table, the buttons below (Add new asset, save and submit) are not being pushed down. Is this a flex issue and how would I go about solving this? I put all of my buttons into a div because I found this aligned my page better. But when I did not have my buttons in a div, it works. I am reframing my code to have more div's to keep everything contained.
$('document').ready(() => {
// Handler to Add New Asset
const table = $("#formTable tbody");
let count = 1;
$('#add').click(() => {
const newRow = `
<tr index="${count}">
<form>
<td><input id='asset_tag_no${count}' type='text' bottom required /></td>
<td><input id='manufacturer_serial_no${count}' type='text' bottom required/></td>
<td><input id='description${count}' type='text'/></td>
<td><input id='cost${count}' type='value'/></td>
<td><input id='po_no${count}' type='text' /></td>
<td><input id='rc_to_credit${count}' type='text'/></td>
<td><input id='remarks${count}' type='text'/></td>
<td><button type="button" index="${count}" class="btn btn-danger btn-remove">X</button></td>
</form>
</tr>
`;
table.append(newRow);
// Handler to Remove New Asset
$('.btn-remove').click(function(){
let index = $(this).attr('index');
$(`tr[index='${index}'`).remove();
});
count++;
});
})
.header{
text-align: center;
margin-bottom: 50px;
}
h1, h2{
font-size: 1rem;
}
/* table{
font-size: 10pt;
} */
#media screen {
input{
text-align: center;
}
input#date{
width: -webkit-fill-available;
}
.flex {
display: flex;
flex: auto;
height: 100px;
/* border: 1px solid red; */
}
.flex-box {
width: 40px;
height: 1000px;
/* background: pink; */
}
.button{
display: flex;
/* display: inline !important; */
flex: auto;
height: 40px;
gap: 12px;
}
.btn-remove{
padding: 5px;
width: 25px;
height: 25px;
font-size: 0.7rem;
font-weight: bold;
}
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- BOOTSTRAP + JQUERY -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/disposal.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/./disposal.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<form div class="flex">
<table>
<div class="flex-box"></div>
<tr>
<td align="right" id='date'><b>Date:</b></td>
<td align="left"><input type="date" id="date" /></td>
</tr>
<tr>
<td align="right" id='department'><b>Dept/Division:</b></td>
<td align="left"><input type="text" id="department" /></td>
</tr>
<tr>
<td align="right" id='location'><b>Location:</b></td>
<td align="left"><input type="text" id="location" /></td>
</tr>
<tr>
<td align="right" id='resp'><b>Resp. Ctr:</b></td>
<td align="left"><input type="text" id="resp" /></td>
</tr>
</table>
</div>
<br><br><br><br>
<div class="flex">
<table class='table' id='formTable'>
<div class="flex-box"></div>
<tr>
<th>  Asset Tag No.</th>
<th>Manufacturer Serial No.</th>
<th>   Description</th>
<th>  Cost/ Est. Cost</th>
<th>  Method of Disposal</th>
<th>  RC to Credit</th>
<th>   Remarks</th>
</tr>
</table>
</div>
<br><br><br><br>
<div class="button">
<div class="flex-box"></div>
<button type="button" class="btn btn-outline-primary" id='add' >+ Add New Asset</button>
</div>
<br>
<div class="button">
<div class="flex-box"></div>
<button type="button" class="btn btn-outline-primary" id='save'>SAVE</button>
<button class="btn btn-primary" type="submit" id='submit' >SUBMIT</button>
<button type="button" class="btn btn-secondary" onclick="window.print();return false;"/>EXPORT PDF</button>
</div>
</form>
</div>
</body>
</html>


You had added heights for both .flex and .flex-box. This was forcing them to stay the size they were.
Also, you didn't need the form tags for each row.
$('document').ready(() => {
// Handler to Add New Asset
const table = $("#formTable tbody");
let count = 1;
$('#add').click(() => {
const newRow = `
<tr index="${count}">
<td><input id='asset_tag_no${count}' type='text' bottom required /></td>
<td><input id='manufacturer_serial_no${count}' type='text' bottom required/></td>
<td><input id='description${count}' type='text'/></td>
<td><input id='cost${count}' type='value'/></td>
<td><input id='po_no${count}' type='text' /></td>
<td><input id='rc_to_credit${count}' type='text'/></td>
<td><input id='remarks${count}' type='text'/></td>
<td><button type="button" index="${count}" class="btn btn-danger btn-remove">X</button></td>
</tr>
`;
table.append(newRow);
// Handler to Remove New Asset
$('.btn-remove').click(function() {
let index = $(this).attr('index');
$(`tr[index='${index}'`).remove();
});
count++;
});
})
.header {
text-align: center;
margin-bottom: 50px;
}
h1,
h2 {
font-size: 1rem;
}
/* table{
font-size: 10pt;
} */
#media screen {
input {
text-align: center;
}
input#date {
width: -webkit-fill-available;
}
.flex {
display: flex;
flex: auto;
}
.flex-box {
width: 40px;
/* background: pink; */
}
.button {
display: flex;
/* display: inline !important; */
flex: auto;
height: 40px;
gap: 12px;
}
.btn-remove {
padding: 5px;
width: 25px;
height: 25px;
font-size: 0.7rem;
font-weight: bold;
}
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- BOOTSTRAP + JQUERY -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/disposal.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/./disposal.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<form div class="flex">
<table>
<div class="flex-box"></div>
<tr>
<td align="right" id='date'><b>Date:</b></td>
<td align="left"><input type="date" id="date" /></td>
</tr>
<tr>
<td align="right" id='department'><b>Dept/Division:</b></td>
<td align="left"><input type="text" id="department" /></td>
</tr>
<tr>
<td align="right" id='location'><b>Location:</b></td>
<td align="left"><input type="text" id="location" /></td>
</tr>
<tr>
<td align="right" id='resp'><b>Resp. Ctr:</b></td>
<td align="left"><input type="text" id="resp" /></td>
</tr>
</table>
</div>
<br><br><br><br>
<div class="flex">
<table class='table' id='formTable'>
<div class="flex-box"></div>
<tr>
<th>  Asset Tag No.</th>
<th>Manufacturer Serial No.</th>
<th>   Description</th>
<th>  Cost/ Est. Cost</th>
<th>  Method of Disposal</th>
<th>  RC to Credit</th>
<th>   Remarks</th>
</tr>
</table>
</div>
<br><br><br><br>
<div class="button">
<div class="flex-box"></div>
<button type="button" class="btn btn-outline-primary" id='add'>+ Add New Asset</button>
</div>
<br>
<div class="button">
<div class="flex-box"></div>
<button type="button" class="btn btn-outline-primary" id='save'>SAVE</button>
<button class="btn btn-primary" type="submit" id='submit'>SUBMIT</button>
<button type="button" class="btn btn-secondary" onclick="window.print();return false;" />EXPORT PDF</button>
</div>
</form>
</div>
</body>
</html>


The way I've done this in the past is to iterate a row count for each <tr> tag as the table is created. This helps with sorting, and you can easily specify a sort order.
However, since your table is pre-existing, the only answer I can really see is to simply rebuild the entire table and flow it into the correct element (the table element, in your case). No row order required, just put the rows in, in the order you want them.
I hope that helps a little.

Related

How can I add "Fractions" to input area with JavaScript calculator?

I am trying to create a fraction calculator. Being fairly new to javascript I am running into a few problems. I would like it to be accessible on mobile as well, that being the case I need to have input buttons available. I know what I am trying to do I just don't know how I need to do it.
When a button is pressed I would like to create a new div with the frac class with the corresponding elements and classes, as well as insert the pressed number into that part of the frac div. When an operator button is pressed I would like it to push the fraction that is already there over and display the operator and repeats the process for each fraction, I was thinking of using display:flex so they will add one after another.
How should I go about making that happen? Thank you!
:root {
--box-size: 35px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
color: #242424;
}
body {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.input-area {
display: flex;
justify-content: end;
align-items: center;
}
.input-area > * {
padding: 0 10px;
}
/* FRACTION */
.frac {
display: flex;
align-items: center;
}
.number {
height: var(--box-size);
width: var(--box-size);
text-align: center;
line-height: var(--box-size);
font-size: 2rem;
}
.divider {
height: 4px;
width: 100%;
background-color: #292929;
border-radius: 10px;
}
.add {
font-size: 2rem;
}
/* NumPads */
.button {
height: 40px;
width: 50px;
border: none;
cursor: pointer;
background-color: #e6e6e6;
border-radius: 3px;
}
.button:focus {
outline: none;
}
.button:hover {
background-color: #ececec;
}
.num-pads {
display: flex;
justify-content: center;
align-items: center;
}
.num-pads > *,.numerator-num-pad, .denominator-num-pad {
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fractions</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="input-area">
<div class="frac">
<div class="number whole-number">2</div>
<div class="frac-numbers">
<div class="number numerator">3</div>
<div class="divider"></div>
<div class="number denominator">8</div>
</div>
</div>
<div class="add">+</div>
<div class="frac">
<div class="number whole-number">5</div>
<div class="frac-numbers">
<div class="number numerator">1</div>
<div class="divider"></div>
<div class="number denominator">4</div>
</div>
</div>
<div class="add">+</div>
<div class="frac">
<div class="frac-numbers">
<div class="number numerator">7</div>
<div class="divider"></div>
<div class="number denominator">16</div>
</div>
</div>
</div>
<div class="num-pads">
<div class="whole-num-pad">
<table>
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4"></td>
<td><input type="button" class="button" value="5"></td>
<td><input type="button" class="button" value="6"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7"></td>
<td><input type="button" class="button" value="8"></td>
<td><input type="button" class="button" value="9"></td>
</tr>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="0"></td>
<td><input type="button" class="button" value="<"></td>
</tr>
</table>
</div>
<div class="frac-parts">
<div class="numerator-num-pad">
<table>
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4"></td>
<td><input type="button" class="button" value="5"></td>
<td><input type="button" class="button" value="6"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7"></td>
<td><input type="button" class="button" value="8"></td>
<td><input type="button" class="button" value="9"></td>
</tr>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="0"></td>
<td><input type="button" class="button" value="<"></td>
</tr>
</table>
</div>
<div class="divider"></div>
<div class="denominator-num-pad">
<table>
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4"></td>
<td><input type="button" class="button" value="5"></td>
<td><input type="button" class="button" value="6"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7"></td>
<td><input type="button" class="button" value="8"></td>
<td><input type="button" class="button" value="9"></td>
</tr>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="0"></td>
<td><input type="button" class="button" value="<"></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

I've created a simple example below which will allow the user to click on a fraction and then adjust each part of the selected fraction.
Note: I've used jQuery so if you don't have that currently, I'd suggest adding a reference to it.
The script works by listening for click events on the numpad. It will check the buttons value to determine what needs to happen (Clear, Remove last character, Add character).
I've added in operator buttons that will append an operator field and a new fraction. The new fraction can then be selected and updated the same way.
$(document)
.on("click", ".frac", function(){
// remove "active" class from all .frac
$(".frac").removeClass("active");
// add "active" class to this .frac
$(this).addClass("active");
})
.on("click", ".whole-num-pad .button", function(){
// whole number button pressed
var btnValue = $(this).val(),
$target = $(".frac.active .whole-number"), // get the current active frac
targetValue = $target.text(); // get the current value of the active frac
if(btnValue === "C"){
$target.text(""); // clear target
return;
}
if(btnValue === "<"){
// remove the last character from the current value
$target.text(targetValue.substr(0, targetValue.length - 1));
return;
}
// add btnValue to targetValue
// making sure we pass at least 1 as a string so that JS doesn't attempt to "add"
$target.text(targetValue + btnValue.toString());
})
.on("click", ".numerator-num-pad .button", function(){
// numerator button pressed
var btnValue = $(this).val(),
$target = $(".frac.active .numerator"), // get the current active frac
targetValue = $target.text(); // get the current value of the active frac
if(btnValue === "C"){
$target.text(""); // clear target
return;
}
if(btnValue === "<"){
// remove the last character from the current value
$target.text(targetValue.substr(0, targetValue.length - 1));
return;
}
// add btnValue to targetValue
// making sure we pass at least 1 as a string so that JS doesn't attempt to "add"
$target.text(targetValue + btnValue.toString());
})
.on("click", ".denominator-num-pad .button", function(){
// denominator button pressed
var btnValue = $(this).val(),
$target = $(".frac.active .denominator"), // get the current active frac
targetValue = $target.text(); // get the current value of the active frac
if(btnValue === "C"){
$target.text(""); // clear target
return;
}
if(btnValue === "<"){
// remove the last character from the current value
$target.text(targetValue.substr(0, targetValue.length - 1));
return;
}
// add btnValue to targetValue
// making sure we pass at least 1 as a string so that JS doesn't attempt to "add"
$target.text(targetValue + btnValue.toString());
})
.on("click", ".operator-button", function(){
var operator = $(this).val();
switch(operator){
case "+":
$(".input-area").append('<div class="add">+</div>');
break;
case "-":
$(".input-area").append('<div class="subtract">-</div>');
break;
case "x":
$(".input-area").append('<div class="multiply">x</div>');
break;
}
$(".input-area").append('<div class="frac">\
<div class="number whole-number"></div>\
<div class="frac-numbers">\
<div class="number numerator"></div>\
<div class="divider"></div>\
<div class="number denominator"></div>\
</div>\
</div>');
});
:root {
--box-size: 35px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
color: #242424;
}
body {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.input-area {
display: flex;
justify-content: end;
align-items: center;
}
.input-area > * {
padding: 0 10px;
}
/* FRACTION */
.frac {
display: flex;
align-items: center;
}
.frac.active {
border:1px solid blue;
}
.number {
height: var(--box-size);
width: var(--box-size);
text-align: center;
line-height: var(--box-size);
font-size: 2rem;
}
.divider {
height: 4px;
width: 100%;
background-color: #292929;
border-radius: 10px;
}
.add,
.subtract,
.multiply {
font-size: 2rem;
}
/* NumPads */
.button,
.operator-button {
height: 40px;
width: 50px;
border: none;
cursor: pointer;
background-color: #e6e6e6;
border-radius: 3px;
}
.button:focus {
outline: none;
}
.button:hover {
background-color: #ececec;
}
.num-pads {
display: flex;
justify-content: center;
align-items: center;
}
.num-pads > *,.numerator-num-pad, .denominator-num-pad {
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fractions</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="input-area">
<div class="frac">
<div class="number whole-number">2</div>
<div class="frac-numbers">
<div class="number numerator">3</div>
<div class="divider"></div>
<div class="number denominator">8</div>
</div>
</div>
<div class="add">+</div>
<div class="frac">
<div class="number whole-number">5</div>
<div class="frac-numbers">
<div class="number numerator">1</div>
<div class="divider"></div>
<div class="number denominator">4</div>
</div>
</div>
<div class="add">+</div>
<div class="frac">
<div class="number whole-number"></div>
<div class="frac-numbers">
<div class="number numerator">7</div>
<div class="divider"></div>
<div class="number denominator">16</div>
</div>
</div>
</div>
<div class="operator-buttons">
<input type="button" class="operator-button" value="+" />
<input type="button" class="operator-button" value="-" />
<input type="button" class="operator-button" value="x" />
</div>
<div class="num-pads">
<div class="whole-num-pad">
<table>
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4"></td>
<td><input type="button" class="button" value="5"></td>
<td><input type="button" class="button" value="6"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7"></td>
<td><input type="button" class="button" value="8"></td>
<td><input type="button" class="button" value="9"></td>
</tr>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="0"></td>
<td><input type="button" class="button" value="<"></td>
</tr>
</table>
</div>
<div class="frac-parts">
<div class="numerator-num-pad">
<table>
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4"></td>
<td><input type="button" class="button" value="5"></td>
<td><input type="button" class="button" value="6"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7"></td>
<td><input type="button" class="button" value="8"></td>
<td><input type="button" class="button" value="9"></td>
</tr>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="0"></td>
<td><input type="button" class="button" value="<"></td>
</tr>
</table>
</div>
<div class="divider"></div>
<div class="denominator-num-pad">
<table>
<tr>
<td><input type="button" class="button" value="1"></td>
<td><input type="button" class="button" value="2"></td>
<td><input type="button" class="button" value="3"></td>
</tr>
<tr>
<td><input type="button" class="button" value="4"></td>
<td><input type="button" class="button" value="5"></td>
<td><input type="button" class="button" value="6"></td>
</tr>
<tr>
<td><input type="button" class="button" value="7"></td>
<td><input type="button" class="button" value="8"></td>
<td><input type="button" class="button" value="9"></td>
</tr>
<tr>
<td><input type="button" class="button" value="C"></td>
<td><input type="button" class="button" value="0"></td>
<td><input type="button" class="button" value="<"></td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

How to hide and show table columns with selected check box

I have a table and in that table I give check box in <th> like <th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="1" />Sr No</th>. Currently it gives me the value of selected columns. Now I want to show and hide this column.
Following are my code
<form role="form" id="print_loading_sheet" method="POST" enctype="multipart/form-data">
<section class="content">
<div class="row">
<div class="table-responsive">
<table id="delivery_checklist_table" class="table table-bordered table-sm" style=" overflow: auto;">
<thead>
<tr>
<th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="1" />Sr No</th>
<th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="2" />Bilty Id</th>
<th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="3" />LR No</th>
<th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="4" />Consignor Name</th>
<th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="5" />Consignor GSTIN</th>
<th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="6" />Consignee Name</th>
<th><input type="checkbox" id="selectedrecord" name="selectedrecord" value="7" />Consignee GSTIN</th>
</tr>
</thead>
<tbody>
<?php $counter = 1; ?>
<?php foreach($bilties as $bilty):?>
<tr>
<td><?php echo $counter;?></td>
<td><?php echo $bilty->id;?></td>
<td><?php echo $bilty->lr_no;?></td>
<td><?php echo $bilty->consignor;?></td>
<td><?php echo $bilty->consignor_gst_no;?></td>
<td><?php echo $bilty->consignee;?></td>
<td><?php echo $bilty->consignee_gst_no;?></td>
</tr>
<?php $counter++; ?>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</section>
<button id="print" name="print" class="btn btn-block btn-outline-primary fa fa-newspaper-o col-10 offset-1" style="margin-top: 35px; margin-bottom: 25px;" data-clicked="unclicked"> Print </<button type=""></button>>
</form>
</div>
<script>
$('#print').click(function (event) {
event.preventDefault();
var allVals = [];
$('input[name=selectedrecord]:checked').each(function() {
allVals.push($(this).val());
});
console.log("check Column"+ allVals);
alert(allVals);
});
</script>
</body>
</html>

You can iterate over the array to set the display property with eq():
allVals.forEach(function(i){
$('tr').each(function(){
$(this).find('td, th').eq(i-1).css('display', 'none');
});
});
Demo:
$('#print').click(function (event) {
$('td').css('visibility', 'visible');
event.preventDefault();
var allVals = [];
$('input[name=selectedrecord]:checked').each(function() {
allVals.push($(this).val());
});
//console.log("check Column"+ allVals);
allVals.forEach(function(i){
$('tr').each(function(){
$(this).find('td, th').eq(i-1).css('display', 'none');
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" id="print_loading_sheet" method="POST" enctype="multipart/form-data">
<section class="content">
<div class="row">
<div class="table-responsive">
<table id="delivery_checklist_table" class="table table-bordered table-sm" style=" overflow: auto;">
<thead>
<tr>
<th><input type="checkbox" name="selectedrecord" value="1" />Sr No</th>
<th><input type="checkbox" name="selectedrecord" value="2" />Bilty Id</th>
<th><input type="checkbox" name="selectedrecord" value="3" />LR No</th>
</tr>
</thead>
<tbody>
<tr>
<td>1xy</td>
<td>1abc</td>
<td>1mnl</td>
</tr>
<tr>
<td>2xy</td>
<td>2abc</td>
<td>2mnl</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<button id="print" name="print" class="btn btn-block btn-outline-primary fa fa-newspaper-o col-10 offset-1" style="margin-top: 35px; margin-bottom: 25px;" data-clicked="unclicked"> Print</button>
</form>

This is your solution if you put checkbox in table heading then how to showing and hiding that column you need to put checkbox on above table
function hideshow(){
var cells=document.getElementById('tab').getElementsByTagName('td'), i=0, c;
var chb=document.getElementById('chboxes').getElementsByTagName('input');
while(c=cells[i++]){
c.style.display=chb[c.cellIndex].checked?'':'none';
}
}
function setEvent(){
var chb=document.getElementById('chboxes').getElementsByTagName('input'), i=0, c;
while(c=chb[i++]){
if(c.type=='checkbox'){
c.onclick=function(){
hideshow()
}
}
}
}
onload=setEvent;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<form>
<div id="chboxes">
<input type='checkbox' name='coffee' value='Address'>Address
<input type='checkbox' name='coffee' value='Name'>Name
<input type='checkbox' name='coffee' value='ID'>ID
<input type='checkbox' name='coffee' value='UserName'>UserName
<input type='checkbox' name='coffee' value='Code'>Code
</div>
<table id="tab" width="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Address</td>
<td>Name</td>
<td>ID</td>
<td>UserName</td>
<td>Code</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>

My solution...
const MyTable = document.querySelector('#my-table tbody')
document.querySelectorAll('#my-table thead input[type=checkbox]').forEach(inChk=>
{
inChk.checked = true
inChk.addEventListener('change', HeadClick)
})
function HeadClick(e) {
let Col_ALL = MyTable.querySelectorAll(`td:nth-child(${e.target.value})`)
if ( e.target.checked ) Col_ALL.forEach(eTD=>eTD.style.visibility='visible' )
else Col_ALL.forEach(eTD=>eTD.style.visibility='hidden')
}
table { border-collapse: collapse; margin: 1em }
td { border: 1px solid grey; padding: .5em 1em; height: 1em; }
<table id="my-table">
<thead>
<tr>
<td><input type="checkbox" value="1"/></td>
<td><input type="checkbox" value="2"/></td>
<td><input type="checkbox" value="3"/></td>
<td><input type="checkbox" value="4"/></td>
<td><input type="checkbox" value="5"/></td>
</tr>
</thead>
<tbody>
<tr><td>0.0</td><td>0.1</td><td>0.2</td><td>0.3</td><td>0.4</td></tr>
<tr><td>1.0</td><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td></tr>
<tr><td>2.0</td><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td></tr>
<tr><td>3.0</td><td>3.1</td><td>3.2</td><td>3.3</td><td>3.4</td></tr>
</tbody>
</table>

Try this out. I have updated your code this may helps you. I have shown column when it's checked and hide when unchecked.
<!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>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
th,
td {
white-space: nowrap;
}
div.dataTables_wrapper {
direction: rtl;
}
div.dataTables_wrapper {
width: 1000px;
margin: 0 auto;
font-family: Vazir;
font-size: 10px;
}
th {
background-color: #99a;
min-width: 80px;
height: 32px;
border: 1px solid #222;
white-space: nowrap;
}
td {
background-color: #bbc;
min-width: 80px;
height: 32px;
border: 1px solid #222;
white-space: nowrap;
text-align: center;
}
</style>
</head>
<body>
<form role="form" id="print_loading_sheet" method="POST" enctype="multipart/form-data">
<section class="content">
<div class="row">
<div class="table-responsive">
<table id="delivery_checklist_table" class="table table-bordered table-sm"
style=" overflow: auto;">
<thead>
<tr>
<th class="col-1"><input type="checkbox" name="selectedrecord" value="1"
onchange="showHideCols()" checked/>Sr No
</th>
<th class="col-2"><input type="checkbox" name="selectedrecord" value="2"
onchange="showHideCols()" checked/>Bilty
Id</th>
<th class="col-3"><input type="checkbox" name="selectedrecord" value="3"
onchange="showHideCols()" checked/>LR No
</th>
<th class="col-4"><input type="checkbox" name="selectedrecord" value="4"
onchange="showHideCols()" checked/>Consignor Name</th>
<th class="col-5"><input type="checkbox" name="selectedrecord" value="5"
onchange="showHideCols()" checked/>Consignor GSTIN</th>
<th class="col-6"><input type="checkbox" name="selectedrecord" value="6"
onchange="showHideCols()" checked/>Consignee Name</th>
<th class="col-7"><input type="checkbox" name="selectedrecord" value="7"
onchange="showHideCols()" checked/>Consignee GSTIN</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-1">1</td>
<td class="col-2">2</td>
<td class="col-3">3</td>
<td class="col-4">4</td>
<td class="col-5">5</td>
<td class="col-6">6</td>
<td class="col-7">7</td>
</tr>
<tr>
<td class="col-1">1</td>
<td class="col-2">2</td>
<td class="col-3">3</td>
<td class="col-4">4</td>
<td class="col-5">5</td>
<td class="col-6">6</td>
<td class="col-7">7</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<button id="print" name="print" class="btn btn-block btn-outline-primary fa fa-newspaper-o col-10 offset-1"
style="margin-top: 35px; margin-bottom: 25px;" data-clicked="unclicked"> Print </<button type=""></button>
</form>
</div>
<script>
$('#print').click(function (event) {
event.preventDefault();
});
window.onload = function () {
showHideCols();
}
function showHideCols() {
var allVals = [];
$('input[name=selectedrecord]:not(:checked)').each(function () {
$(".col-" + $(this).val()).css({
// visibility: 'hidden'
display:'none'
});
allVals.push($(this).val());
});
$('input[name=selectedrecord]:checked').each(function () {
$(".col-" + $(this).val()).css({
// visibility: 'visible'
display:'table-cell'
});
allVals.push($(this).val());
});
console.log("check Column" + allVals);
// alert(allVals);
}
</script>
</body>

Input and two buttons side by side in table

I got an input and two icons (that work like buttons) and I want them to be side by side in a table.
Besides, when on click of the icons ("buttons"), I want it to get me the value of the input.
$(document).on("click", "#add", function() {
alert($("#add").closest());
});
.w3-table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
display: table;
}
#quantidade input {
width: 40%;
height: 40px;
}
#quantidade div {
font-size: 15pt;
display: grid;
padding-left: 10px;
}
#quantidade i {
padding: 0 3px;
}
#quantidade i:hover {
background-color: #0F292F;
cursor: pointer;
}
#quantidade {
padding-left: 80px;
}
table {
width: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<table class="w3-table">
<thead>
<tr>
<th colspan="3">
<h2>Lista das Compras</h2>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arroz</td>
<td id='quantidade' class='w3-right'>
<input type='text' class='w3-input w3-left' value='1'>
<div>
<i id='add' class='fa fa-angle-up'></i>
<i id='rem' class='fa fa-angle-down'></i>
</div>
</td>
</tr>
</tbody>
</table>
Demo

Try the following:
$(document).on("click", "#add", function(){
alert($("#add").closest('td').prev().find('input[type=text]').val());
});
.w3-table {
border-collapse:collapse;
border-spacing:0;
width:100%;
display:table;
}
#quantidade input {
width: 40%;
height: 40px;
}
#quantidade div {
font-size: 15pt;
display: grid;
padding-left: 10px;
}
#quantidade i {padding: 0 3px;}
#quantidade i:hover {
background-color: #0F292F;
cursor:pointer;
}
#quantidade {padding-left: 80px;}
table {width: 40%;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="w3-table">
<thead>
<tr>
<th colspan="3"><h2>Lista das Compras</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td>Arroz</td>
<td>
<input type='text' id='button1' value='1'>
</td>
<td>
<div>
<span id='add' class='fa fa-angle-up'></span><br>
<span id='rem' class='fa fa-angle-down'></span>
</div>
</td>
</tr>
</tbody>
</table>

<tr>
<td>Arroz</td>
<td id='quantidade'>
<input type='text' id='button1' value='1'>
</td>
<td>
<div>
<span id='add' class='fa fa-angle-up'></span><br>
<span id='rem' class='fa fa-angle-down'></span>
</div>
</td>
</tr>
$(document).on("click", "#add", function(){
alert($("#button1").val());
});

Change your jquery code
$(document).on("click", "#add", function () {
alert($(this).parent().closest('div').prev('input').val());
});
As you said you have changed your table structure like this
<table class="w3-table">
<thead>
<tr>
<th colspan="3"><h2>Lista das Compras</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td>Arroz</td>
<td>
<input type='text' id='button1' value='1'>
</td>
<td>
<div>
<span id='add' class='fa fa-angle-up'></span><br>
<span id='rem' class='fa fa-angle-down'></span>
</div>
</td>
</tr>
</tbody>
</table>
So code for new structure table will be
$(document).on("click", "#add", function () {
alert($(this).parent().closest('div').parent().prev('td').find('#button1').val());
});
Hope this will help you.

It works with this:
$(document).on("click", "#add", function(){
alert($(this).closest("tr").find('input').val());
});

JQuery - Delete table row if delete button is clicked

I'm creating a basic database that's intended to only be stored in memory as practice in Javascript. Each new row gets it own corresponding delete and edit buttons. My problem now is how to get these delete buttons to work, that when you click on one it deletes it's row. Here is my code at this moment:
Javascript
function onload(){
$("#addbutton").on("click",addRow);
$(".delete").onclick(function(){
$(this).closest('tr').remove();
});
var i = 1;
function addRow(){
var newRow = "<tr rowID='" + i + "'>"+"<td><div>"+$("#namebox").val()+
"</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete'type='button'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button'>EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; //Adds the row with content and
// buttons
$(newRow).appendTo("#maintable"); //Append the new row
// to the table
// Next three commands clear the input boxes
$("#namebox").val('');
$("#surnamebox").val('');
$("#agebox").val('');
// Add to the numer of rows in the table
i++;
}// addRow END
};
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Memory-Only Database</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
<h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th id="buttons1">buttons1</th>
<th id="buttons2">buttons2</th>
<th id="counter">counter</th>
</tr>
<tr>
<td>
<input id="namebox" name="name" type="text" value="">
</td>
<td>
<input id="surnamebox" name="surname" type="text" value="">
</td>
<td>
<input id="agebox" name="age" type="number" value="">
</td>
<td>
<button id="addbutton" name="add" type="button">ADD</button>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS
body{
background-color: darkcyan;
}
div#header{
position: relative;
left: 30em;
width: 18em;
text-align: center;
}
div#input-table{
width:50em;
}
table,th,tr,td{
border: 1px solid black;
border-collapse: collapse;
}
td{
text-align: center;
}
th#buttons{
width: inherit;
}

There is no onclick method in jQuery, use click instead.
$(".delete").click(function() {
$(this).closest("tr").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Row 1</td>
<td><button class="delete">Del</button></td>
</tr>
<tr>
<td>Row 2</td>
<td><button class="delete">Del</button></td>
</tr>
<tr>
<td>Row 3</td>
<td><button class="delete">Del</button></td>
</tr>
</table>

You should use event delegation for delete button. since you are adding button dynamically.
$(document).on("click",'.delete',function(){
$(this).closest('tr').remove();
});
function onload(){
$("#addbutton").on("click",addRow);
var i = 1;
function addRow(){
var newRow = "<tr rowID='" + i + "'>"+"<td><div>"+$("#namebox").val()+
"</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete'type='button'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button'>EDIT</button></div></td><td><p>"+ i + "</p></td></tr>";
//Adds the row with content and
// buttons
$(newRow).appendTo("#maintable"); //Append the new row
// to the table
// Next three commands clear the input boxes
$("#namebox").val('');
$("#surnamebox").val('');
$("#agebox").val('');
// Add to the numer of rows in the table
i++;
}// addRow END
};
$(document).on("click",'.delete',function(){
$(this).closest('tr').remove();
});
body{
background-color: darkcyan;
}
div#header{
position: relative;
left: 30em;
width: 18em;
text-align: center;
}
div#input-table{
width:50em;
}
table,th,tr,td{
border: 1px solid black;
border-collapse: collapse;
}
td{
text-align: center;
}
th#buttons{
width: inherit;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
<h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th id="buttons1">buttons1</th>
<th id="buttons2">buttons2</th>
<th id="counter">counter</th>
</tr>
<tr>
<td>
<input id="namebox" name="name" type="text" value="">
</td>
<td>
<input id="surnamebox" name="surname" type="text" value="">
</td>
<td>
<input id="agebox" name="age" type="number" value="">
</td>
<td>
<button id="addbutton" name="add" type="button">ADD</button>
</td>
</tr>
</table>
</div>

Another way you can delete row .... during adding new row give that row an id and call an onclick function during delete.
function deleterow(id){
$("#newrow-"+id+"").remove();
}
function onload(){
$("#addbutton").on("click",addRow);
var i = 1;
function addRow(){
var newRow = "<tr id='newrow-"+i+"'>"+"<td><div>"+$("#namebox").val()+
"</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete' type='button' onclick='deleterow("+i+")'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button' >EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; //Adds the row with content and
// buttons
$(newRow).appendTo("#maintable"); //Append the new row
// to the table
// Next three commands clear the input boxes
$("#namebox").val('');
$("#surnamebox").val('');
$("#agebox").val('');
// Add to the numer of rows in the table
i++;
}// addRow END
};
body{
background-color: darkcyan;
}
div#header{
position: relative;
left: 30em;
width: 18em;
text-align: center;
}
div#input-table{
width:50em;
}
table,th,tr,td{
border: 1px solid black;
border-collapse: collapse;
}
td{
text-align: center;
}
th#buttons{
width: inherit;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
<h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th id="buttons1">buttons1</th>
<th id="buttons2">buttons2</th>
<th id="counter">counter</th>
</tr>
<tr>
<td>
<input id="namebox" name="name" type="text" value="">
</td>
<td>
<input id="surnamebox" name="surname" type="text" value="">
</td>
<td>
<input id="agebox" name="age" type="number" value="">
</td>
<td>
<button id="addbutton" name="add" type="button">ADD</button>
</td>
</tr>
</table>
</div>

Button, when clicked, reloads the page instead of calling function

I was making a calculator for a game and made a button like this:
<button onclick="myFunction()">Calculate</button>
When button is clicked, I want to run the following myFunction() script:
<script>
function myFunction() {
var currDura, maxDura, tempMaxDura, tempDura, totDura, optDura;
var iniCost, repCost;
var smithEffi, smithCharge;
var se, sc;
var totCostTillNow, costPerBattle = 0, minCPB;
var i;
var repCount = 1;
//Assigning the values
currDura=document.getElementById("currDura_").value;
maxDura=document.getElementById("maxDura_").value;
iniCost=document.getElementById("iniCost_").value;
repCost=document.getElementById("repCost_").value;
smithEffi=document.getElementById("smithEffi_").value;
smithCharge=document.getElementById("smithCharge_").value;
se = smithEffi / 100;
sc = smithCharge / 100;
tempMaxDura = maxDura;
tempDura = currDura;
totDura = tempDura;
totCostTillNow = iniCost;
costPerBattle = totCostTillNow / totDura;
minCPB = costPerBattle;
for(i=1; i<=60; i++)
{
totCostTillNow += (double) repCost * sc;
tempDura = tempMaxDura * se;
totDura += tempDura;
costPerBattle = (double) (totCostTillNow / totDura);
tempMaxDura -= 1;
if ( minCPB >= costPerBattle )
{
minCPB = costPerBattle;
optDura = tempMaxDura;
}
}
document.getElementById("result").value = eval(minCPB) + " gold at 0/"+ eval(optDura);
//alert("minimum cost per battle = "+ eval(minCPB)+ "at 0/"+ eval(optDura));
}
</script>
Here result is a label where I want to provide the final answer.
When I click the button, it should run the function myFunction() but it doesn't. Instead it refreshes the page and all the data entered is gone.
Can you help me why this is occurring?
<!DOCTYPE html>
<html>
<head>
<title>
Cost Per Battle Calculator
</title>
</head>
<style>
.smaller{
width: 50px;
padding: 12px 10px;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.bigger{
width: 110px;
padding: 12px 10px;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button{
width: 110px;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 0px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #badf6f;
padding:20px;
}
</style>
<body>
<div>
<form>
<!-- <label for="fname" id="fn">First Name</label> -->
<!-- <input type="text" id="fname" name="firstname"> -->
<!-- <button onclick="myFunction()">Calculate</button> -->
<table border="0">
<tr>
<td>
<center><img src="http://trial.6te.net/images/gold.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/wood_s.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/ore_s.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/mercury_s.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/sulphur_S.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/crystal_S.gif"></img></center>
</td>
<td>
<center><img src="http://trial.6te.net/images/gems_S.gif"></img></center>
</td>
</tr>
<tr>
<td>
<input type="text" id="gold_" name="Gold" class="bigger">
</td>
<td>
<input type="text" id="wood_" name="Wood" class="smaller">
</td>
<td>
<input type="text" id="ore_" name="Ore" class="smaller">
</td>
<td>
<input type="text" id="mercury_" name="Mercury" class="smaller">
</td>
<td>
<input type="text" id="sulphur_" name="Sulphur" class="smaller">
</td>
<td>
<input type="text" id="crystals_" name="Crystals" class="smaller">
</td>
<td>
<input type="text" id="gems_" name="Gems" class="smaller">
</td>
</tr>
<tr>
<td>
<input type="text" id="currDura_" name="Current Durability" class="smaller">
</td>
<td>
<input type="text" id="maxDura_" name="Maximum Durability" class="smaller">
</td>
</tr>
<tr>
<td>
<input type="text" id="repCost_" name="Repair Cost" class="bigger">
</td>
</tr>
<tr>
<td>
<input type="text" id="smithEffi_" name="Smith Efficiency" class="smaller">
</td>
<td>
<input type="text" id="smithCharge_" name="Smith Charge" class="smaller">
</td>
</tr>
<tr>
<td colspan="7">
<center><button onclick="myFunction()">Calculate</button></center>
</td>
</tr>
<tr>
<td colspan="7">
<label id="result"></label>
</td>
</tr>
</table>
</form>
</div>
<script>
//Here is the above script
</script>
</body>
</html>

By default the button is submitting the form. To fix it you need to return false;.
onclick="myFunction(); return false;"

Add param e in your function, and the just write e.preventDefault(). More about that.
myFunction(e){
e.preventDefault();
//rest of your code
}

Change your <button> to some other tag like <div> or <span>. It will not look like a button, but functionally it will do what you want. You can style the div with css to look more like button if you want.
<center><span onclick="myFunction()">Calculate</span></center>

Categories