Display:inline-block on table elements is inconsistent between browsers - javascript

I have a comment field and I want to expand if the user wants more lines to write comments.
I can have up to 4 supported lines.
All 4 lines are part of a form which is fine because they can be blank.
I have the code as below:
$('#addcomment').click(function(){
$('.hiddenComment').css("display", "inline-block");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td class="formtitle">Comments</td>
<td class="formfield"><input id="inputdesc" name="comments" type="text" size="70" maxlength="60" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span><img id="addcomment" style="vertical-align: text-bottom" src="/files/icons/label.png" /></td>
</tr>
<tr class="hiddenComment" id="comment2" style="display: none">
<td class="formtitle">Comments 2</td>
<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
</tr>
<tr class="hiddenComment" id="comment3" style="display: none">
<td class="formtitle">Comments 3</td>
<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
</tr>
<tr class="hiddenComment" id="comment4" style="display: none">
<td class="formtitle">Comments 4</td>
<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
</tr>
So when the button is clicked, it should display the extra rows.
It works in IE.. Surprisingly..
However is doesn't seem to work in Chrome. It weirdly spews the rows out of line with the others:
Does anyone have any ideas at to why Chrome displays the tables this way?
Thanks

you can use the jquery functions '.show()' and '.hide()'
I also added width="120" to fix width of the column but not very necessary.
$('.formtitle, .formfield').hide();
$('.base, .hiddenComment').show();
$('#addcomment').click(function(){
$('.formtitle, .formfield').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="formtitle base" width="120">Comments</td>
<td class="formfield base"><input id="inputdesc" name="comments" type="text" size="70" maxlength="60" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span><img id="addcomment" style="vertical-align: text-bottom" src="/files/icons/label.png" /></td>
</tr>
<tr class="hiddenComment" id="comment2" style="display: none">
<td class="formtitle">Comments 2</td>
<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
</tr>
<tr class="hiddenComment" id="comment3" style="display: none">
<td class="formtitle">Comments 3</td>
<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
</tr>
<tr class="hiddenComment" id="comment4" style="display: none">
<td class="formtitle">Comments 4</td>
<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
</tr>
</table>
Solution 2 :
and you can try this code for show and hide on click :
<script>
$('.formtitle, .formfield').hide();
$('.base, .hiddenComment').show();
var view=false;
$('#addcomment').click(function(){
view = !view;
if(view){
$('.formtitle, .formfield').show();
}
else{
$('.formtitle, .formfield').hide();
$('.base, .hiddenComment').show();
}
});
</script>
Solution 3 :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="formtitle" width="120">Comments</td>
<td class="formfield"><input id="inputdesc" name="comments" type="text" size="70" maxlength="60" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span><img id="addcomment" style="vertical-align: text-bottom" src="/files/icons/label.png" /></td>
</tr>
<tr class="hiddenComment" id="comment2" style="display: none">
<td class="formtitle">Comments 2</td>
<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
</tr>
<tr class="hiddenComment" id="comment3" style="display: none">
<td class="formtitle">Comments 3</td>
<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
</tr>
<tr class="hiddenComment" id="comment4" style="display: none">
<td class="formtitle">Comments 4</td>
<td class="formfield"><input id="inputdesc" name="comments2" type="text" size="70" maxlength="40" /><span id="charcount" style="display:none; padding-left:10px; padding-right: 10px; color:#B5B5B5; width: 10px;">60</span></td>
</tr>
</table>
<script>
$('.hiddenComment').show();
$('.hiddenComment > td').hide();
var view=false;
$('#addcomment').click(function(){
view = !view;
if(view){
$('.hiddenComment > td').show();
}
else{
$('.hiddenComment > td').hide();
}
});
</script>

Related

Print The Grand Total

Once user insert a quantity of a good and click on submit, this calculator should print the sub total of that good(quantity * unit price) and the grand total(sum of sub total rows).
please someone help me to write this jquery in JS fucntion..
body{
font-family:Consolas;
}
table{
border:1px solid blue;
padding-left:3px;
}
#submit{
background-color:green;
padding-left:20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="font-size:30px;color:red;text-align:left;word-spacing:100px;">ABC Supermarket</h1>
<table border-collapse="collapse" >
<tr>
<th>Item</th>
<th>Unit Price</th>
<th class="q">Quantity</th>
<th>Subtotal</th>
</tr>
<tr>
<td>Bread</td>
<td><input type="text" id="u1" value="120.00" readonly="readonly" onclick="reSum();"></td>
<td><input type="text" id="q1" onclick="reSum();"></td>
<td><input type="text" id="s1" readonly="readonly"></td>
</tr>
<tr>
<td>Grandtotal</td>
<td></td>
<td></td>
<td><input type="text" id="tot" readonly="readonly"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" value="clear" id="clear"></td>
<td><input type="button" id="submit" value="Submit" ></td>
</tr>
</table>
The JavaScript functions I wrote to replace the jqueries are below.
<script>
function subTotal(u1,q1){
var u1=document.getElementById("u1").value;
var q1=document.getElementById("q1").value;
var subTotal=u1*q1;
var grandTotal= subTotal;
document.getElementById("s1").innerHTML=subTotal;
document.getElementById("tot").innerHTML=grandTotal;
}
</script>
<script>
function clear(){
document.getElementById("q1").value="";
document.getElementById("s1").value="";
document.getElementById("tot").value="";
}
</script>
HTML code
<td><input type="number" class="qty" value="" name="qty" id="qty" style="border: 1px solid lightgray;width: 100%; padding: 6px;
border-radius: 5px;"></td>
<td><input class="price" type="number" id="price" name="price" style="border: 1px solid lightgray;width: 100%; padding: 6px;
border-radius: 5px;" ></td>
<td><input class="total" type="number" name="total" id="total" style=";width: 100%; padding: 6px;
border-radius: 5px; border:none ;font-size: 27px " ></td>
script
$(document).on('keyup', '.qty', function (){
let Ele = $(this);
let qtyEle = Ele.parent().parent().find('.price');
let totalEle = Ele.parent().parent().find('.total');
totalEle.val(qtyEle.val() * Ele.val());
});

How to Multiply Table Inputs

I'm having issues multiply two columns of a table, outputing the result in to the 3rd column, then adding the totals into the subtotal.
I've got it where it can ADD the input fields but not MULTIPLY. Below is a jsFiddle where I attempt to multiply but it doesn't work
I assume that the issue has to do with multiplying by zero, but I'm not sure exactly where I am going wrong
My code:
$('table input').on('input', function() {
var $tr = $(this).closest('tr');
var total = 0;
$('input:not(:last)', $tr).each(function() {
total *= Number($(this).val()) || 0;
console.log(total)
});
$('td:last input', $tr).val(total);
subTotalPrice();
}).trigger('input');
function subTotalPrice() {
var total = 0;
$(".amount").each(function() {
total += parseFloat($(this).val() || 0);
});
$("#subTotalResult").text(total);
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="0" valign="TOP" style="background-color:#fff;">
<tbody align="left">
<tr>
<td colspan="5" class="tablzag2">
From Our Smoker
</td>
</tr>
<tr class="tablzag3">
<td colspan="2" class="tablzag3">
Menu Items
</td>
<td align="center" class="tablzag3">
Servings
</td>
<td align="center" class="tablzag3">
Per Servings
</td>
<td align="center" class="tablzag3">
Ext Cost
</td>
</tr>
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
BBQ Beef Brisket
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--pulled pork row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Pulled Pork
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Boneless/Skinless Chicken Breast-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Boneless/Skinless Chicken Breast
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Smoked Leg Quarter Row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Smoked Leg Quarter
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--1/2 Cornish Hen-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
1/2 Cornish Hen
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Buffet Ham-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Buffet Ham
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Mild or Hot Links in BBQ Sauce-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Mild or Hot Links in BBQ Sauce
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--BBQ Pork Spareribs-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
BBQ Pork Spareribs
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Bratwurst Row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Bratwurst
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--subtotal for "from our smoker" row-->
<tr>
<td colspan="4" align="right" valign="middle" class="subTotalResult">
Subtotal for "From our Smoker" :
</td>
<td align="right" valign="middle" class="subTotalResult" style="padding-right:10px;">
<span id="subTotalResult">
0.00
</span>
</td>
</tr>
</tbody>
</table>
<style>
.tablzag3 {
padding: 5px;
height: 20px;
background-color: #75A3D3;
font-family: Tahoma, Helvetica, Sans-serif;
margin: 0px;
color: #fff;
font-weight: normal;
}
.tablzag2 {
padding: 5px;
height: 20px;
background-color: #4C759F;
font-family: Tahoma, Helvetica, Sans-serif;
margin: 0px;
color: #fff;
font-weight: normal;
}
.tablechet {
padding: 2px 5px 2px 5px;
height: 24px;
color: #627484;
}
.tablcheta {
padding: 2px 5px 2px 5px;
height: 24px;
color: #627484;
font-weight: bold;
text-decoration: underline;
}
.subTotalResult {
height: 24px;
background-color: #E4EEF8;
margin: 0px;
color: #627484;
font-weight: bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
</style>
If you're multiplying a series of numbers, you need to initialize the product with 1, not 0. Multiplying by zero produces zero, multiplying by one produces the same value.
You should also use toFixed() to discard extra fractional digits that often occur when dealing with floating point numbers.
You also had a typo: maxlenght should be maxlength.
$('table input').on('input', function() {
var $tr = $(this).closest('tr');
var total = 1;
$('input:not(:last)', $tr).each(function() {
total *= Number($(this).val()) || 0;
});
$('td:last input', $tr).val(total.toFixed(2));
subTotalPrice();
}).trigger('input');
function subTotalPrice() {
var total = 0;
$(".amount").each(function() {
total += parseFloat($(this).val() || 0);
});
$("#subTotalResult").text(total.toFixed(2));
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="0" valign="TOP" style="background-color:#fff;">
<tbody align="left">
<tr>
<td colspan="5" class="tablzag2">
From Our Smoker
</td>
</tr>
<tr class="tablzag3">
<td colspan="2" class="tablzag3">
Menu Items
</td>
<td align="center" class="tablzag3">
Servings
</td>
<td align="center" class="tablzag3">
Per Servings
</td>
<td align="center" class="tablzag3">
Ext Cost
</td>
</tr>
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
BBQ Beef Brisket
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlength="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--pulled pork row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Pulled Pork
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Boneless/Skinless Chicken Breast-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Boneless/Skinless Chicken Breast
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Smoked Leg Quarter Row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Smoked Leg Quarter
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--1/2 Cornish Hen-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
1/2 Cornish Hen
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Buffet Ham-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Buffet Ham
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Mild or Hot Links in BBQ Sauce-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Mild or Hot Links in BBQ Sauce
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--BBQ Pork Spareribs-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
BBQ Pork Spareribs
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Bratwurst Row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Bratwurst
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--subtotal for "from our smoker" row-->
<tr>
<td colspan="4" align="right" valign="middle" class="subTotalResult">
Subtotal for "From our Smoker" :
</td>
<td align="right" valign="middle" class="subTotalResult" style="padding-right:10px;">
<span id="subTotalResult">
0.00
</span>
</td>
</tr>
</tbody>
</table>
<style>
.tablzag3 {
padding: 5px;
height: 20px;
background-color: #75A3D3;
font-family: Tahoma, Helvetica, Sans-serif;
margin: 0px;
color: #fff;
font-weight: normal;
}
.tablzag2 {
padding: 5px;
height: 20px;
background-color: #4C759F;
font-family: Tahoma, Helvetica, Sans-serif;
margin: 0px;
color: #fff;
font-weight: normal;
}
.tablechet {
padding: 2px 5px 2px 5px;
height: 24px;
color: #627484;
}
.tablcheta {
padding: 2px 5px 2px 5px;
height: 24px;
color: #627484;
font-weight: bold;
text-decoration: underline;
}
.subTotalResult {
height: 24px;
background-color: #E4EEF8;
margin: 0px;
color: #627484;
font-weight: bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
</style>

Input is not deletable

I have a telephone input on my form. It allows numbers only.So I use a simple javascript code to do this.But this time input box cannot be deleted.
<form id="aylikal" action="https://web.myadress.co" method="post">
<table style="height: 116px;" width="100%">
<tbody>
<tr>
<input name="adres" required="" style="width: 100%;height: 1px;visibility: hidden;" type="text">
<td style="width: 590px;"><input name="ad" type="text" placeholder="Ad" required style="width: 100%;height: 40px;font-size: 18px;"></td>
</tr>
<tr>
<td style="width: 590px;">
<input name="soyad" type="text" placeholder="Soyad" required style="width: 100%;height: 40px;font-size: 18px;">
</td>
</tr>
<tr>
<td style="width: 590px;">
<input name="telefon" required type="tel" class="sa" placeholder="(5__) ___-__-__" onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">
</td>
</tr>
<tr>
<td style="width: 590px;">
<button id="pisko" onclick="formyolla()" style="display: inherit;margin: 0 auto;background: #2f889a;color: #FFF;font-size: 20px;padding: 16px 5px;height: auto;border-radius: 5px;width: 100%;">Devam et</button>
</td>
</tr>
</tbody>
</table>
</form>
Code
function isInputNumbersa(evt) {
var ch = String.fromCharCode(evt.which);
if (!(/[0-9]/.test(ch))) {
evt.preventDefault();
}
}
KeyboardEvent.which is deprecated. Use KeyboardEvent.key instead.
Note that although this prevents user from typing letters, it does not prevent pasting letters. I'd use a robust library instead.
function isInputNumbersa(e) {
if (!(/[0-9]/.test(e.key))) {
e.preventDefault();
}
}
<form id="aylikal" action="https://web.myadress.co" method="post">
<table style="height: 116px;" width="100%">
<tbody>
<tr>
<input name="adres" required="" style="width: 100%;height: 1px;visibility: hidden;" type="text">
<td style="width: 590px;"><input name="ad" type="text" placeholder="Ad" required style="width: 100%;height: 40px;font-size: 18px;"></td>
</tr>
<tr>
<td style="width: 590px;">
<input name="soyad" type="text" placeholder="Soyad" required style="width: 100%;height: 40px;font-size: 18px;">
</td>
</tr>
<tr>
<td style="width: 590px;">
<input name="telefon" required type="tel" class="sa" placeholder="(5__) ___-__-__" onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">
</td>
</tr>
<tr>
<td style="width: 590px;">
<button id="pisko" onclick="formyolla()" style="display: inherit;margin: 0 auto;background: #2f889a;color: #FFF;font-size: 20px;padding: 16px 5px;height: auto;border-radius: 5px;width: 100%;">Devam et</button>
</td>
</tr>
</tbody>
</table>
</form>
If you want users to only enter numbers then you can use type="number".
<input name="telefon" required type="number" class="sa" placeholder="(5__) ___-__-__" onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">
Or if you want to, you can also validate the if the input only has numbers using Javascript. Write a method like below and call it using event listeners.
let input=document.querySelector('.sa');
input.onblur = e => {
if(isNaN(parseInt(input.innerHTML))){
alert('Please enter Number');
input.innerHTML = '';
}
}
Alternatively you can also use the pattern attribute.
<input name="telefon" required type="tel" class="sa" placeholder="(5__) ___-__-__" pattern='5[0-9]{2}-[0-9]{3}-[0-9]{2}-[0-9]{2}' onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">

Save Data From Html Table to excel using JavaScript

Save Data From Html Table to excel using JavaScript
That following code is working fine but when i fill the data in input text box than Filled Data is not exporting in excel.
Like Dealer Name So Please Take a Look On code and tell me how to export Html Table With input text into Excel.
Appreciate Your Help..
My Code :
var table2excel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)))
},
format = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p];
})
}
return function(table, name, text) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {
worksheet: name || 'Worksheet',
table: table.innerHTML
}
window.location.href = uri + base64(format(template, ctx))
}
})()
<html>
<head>
<title>
excel sheet
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="table2excel.js"></script>
<input type="button" onclick="table2excel('testTable', 'Analysis Results')" value="Export to Excel" />
<div id="hidTable">
<table id="testTable">
<tr>
<td class="xl67">Pre Approval form for marketing Claims</td>
</tr>
<tr>
<td class="xl68" colspan="2" rowspan="2" style='height:40.50pt;border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext ;'>
<pre>Dealer Name:</pre>
<input id="tab1" type="text" style="width: 150px; padding-top: 2px; ">
</td>
<td class="xl68" colspan="3" style='border-right:.5pt solid windowtext; border-bottom:initial;'>
<pre>Request Number</pre>
<input id="tab2" type="text" style="width: 95px; padding-top: 2px;">
</td>
<td class="xl68" colspan="2" style='border-right:.5pt solid windowtext;border-bottom:initial;'>
<pre>Date Issued:</pre>
<input id="tab3" type="text" style="width: 75px; padding-top: 2px;">
</td>
</tr>
<tr>
<td class="xl71" colspan="3" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td>
<td class="xl71" colspan="2" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td>
</tr>
<tr>
<td class="xl74">Start Date:</td>
<td class="xl75">
<input type="text" style="width: 150px ; padding-top: 2px;" />
</td>
<td class="xl76"></td>
<td class="xl77" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td>
<td class="xl74">End Date:
</td>
<td class="xl78" colspan="2" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'>
<input type="text" style="width: 120px; padding-top: 2px;">
</td>
</tr>
<tr>
<td class="xl80" colspan="7" style='height:15.75pt;border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'>Type of Marketing Activity<span style='mso-spacerun:yes;'> </span></td>
</tr>
<tr style='height:38.25pt;'>
<td class="xl83" style='height:38.25pt;'>Print Advert
</td>
<td class="xl84">Name of Publication</td>
<td class="xl85">Size sqm/sqf</td>
<td class="xl85">Cost per sqm/sqf</td>
<td class="xl86"># of Inserts</td>
<td class="xl87">Cost per insert</td>
<td class="xl86">total Cost</td>
</tr>
<tr>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="magazine" name="magazine" value="magazine" />
<label for="magazine">Magazine</label>
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="numVal1" id="qty" onkeyup="getValues()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="numVal2" id="price" onkeyup="getValues()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="numVal3" id="discount" onkeyup="getValues()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="numVal5" id="freight" onkeyup="getValues()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalValue" id="total" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="Newspaper" name="Newspaper" value="Newspaper" />
<label for="Newspaper">Newspaper</label>
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="value1" id="quantity" onkeyup="getnews()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="value2" id="priceRange" onkeyup="getnews()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="value3" id="discountPer" onkeyup="getnews()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="value5" id="Offer" onkeyup="getnews()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalrock" id="totalCost" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="Directories" value="Directories" />Directories
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam1" id="quantity1" onkeyup="getDir()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam2" id="priceRange1" onkeyup="getDir()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam3" id="discountPer1" onkeyup="getDir()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam5" id="Offer1" onkeyup="getDir()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalRock" id="totalSam" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="NewspaperInserts" value="NewspaperInserts" />Newspaper No.
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam11" id="quantity11" onkeyup="getPaper()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam22" id="priceRange11" onkeyup="getPaper()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam33" id="discountPer11" onkeyup="getPaper()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam55" id="Offer11" onkeyup="getPaper()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalRock1" id="totalPaper" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="Journals" value="Journals" />Journals
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam111" id="quantity111" onkeyup="getJourn()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam222" id="priceRange111" onkeyup="getJourn()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam333" id="discountPer111" onkeyup="getJourn()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam555" id="Offer111" onkeyup="getJourn()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalRock11" id="totalJourn" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl90" style='height:21.00pt;'>Position of the Advert</td>
<td class="xl86" colspan="6" style='border-right:.5pt solid border-bottom:.5pt solid'>
</td>
</tr>
<tr style='height:39.00pt;'>
<td class="xl92" style='height:39.00pt;'>Out Door Advertising</td>
<td class="xl86">Location</td>
<td class="xl85">Size sqm/sqf</td>
<td class="xl85">Cost per sqm/sqf</td>
<td class="xl86">Per Month</td>
<td class="xl86">Period</td>
<td class="xl86">total Cost</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="hoardings" name="hoardings" value="hoardings" />Hoardings
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="hoard1" id="mage1" onkeyup="getHoard()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="hoard2" id="mage2" onkeyup="getHoard()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="hoard3" id="mage3" onkeyup="getHoard()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="hoard5" id="mage5" onkeyup="getHoard()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageRock" id="totalHoard" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="MobileBillboards" name="Mobile Billboards" value="MobileBillboards" />Mobile Bill
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="bill1" id="mage11" onkeyup="getBill()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="bill2" id="mage22" onkeyup="getBill()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="bill3" id="mage33" onkeyup="getBill()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="bill5" id="mage55" onkeyup="getBill()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageBill" id="totalBill" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" height="28" style='height:21.00pt;'>
<input type="checkbox" id="Posters" name="Posters" value="Posters" />Posters
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="post1" id="mage111" onkeyup="getPost()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="post2" id="mage222" onkeyup="getPost()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="post3" id="mage333" onkeyup="getPost()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="post5" id="mage555" onkeyup="getPost()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="magePost" id="totalPost" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="VinylBanners" name="Vinyl Banners" value="VinylBanners" />Vinyl Banners
</td>
<td class="xl90">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl95">
<input type="text" class="post11" id="ban1" onkeyup="getBan()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="post22" id="ban2" onkeyup="getBan()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="post33" id="ban3" onkeyup="getBan()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="post55" id="ban5" onkeyup="getBan()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageBan" id="totalBan" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="LEDDisplays" name="LED Displays" value="LEDDisplays" />
<label for="LEDDisplays">LED Displays</label>
</td>
<td class="xl90">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl95">
<input type="text" class="post111" id="ban11" onkeyup="getLed()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="post222" id="ban22" onkeyup="getLed()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="post333" id="ban33" onkeyup="getLed()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="post555" id="ban55" onkeyup="getLed()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageLed" id="totalLed" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:15.00pt;'>
<td class="xl96" style='height:15.00pt;'>Digital Marketing</td>
<td class="xl97"></td>
<td class="xl98"></td>
<td class="xl97"></td>
<td class="xl97"></td>
<td class="xl97"></td>
<td class="xl99"></td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl100" colspan="2" style='height:21.00pt;border-right:.5pt solid border-bottom:.5pt solid'>
<input type="checkbox" id="GoogleAdwords" name="Google Adwords" value="GoogleAdwords" />Google Adwords
</td>
<td class="xl102" colspan="3" style='border-right:none; border-bottom:.5pt solid windowtext;'>
<input type="text" style="width: 300px; padding-top: 2px;" />
</td>
<td class="xl103"></td>
<td class="xl104"></td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl105" colspan="2" style='height:21.00pt;border-right:.5pt border-bottom:.5pt solid '>
<input type="checkbox" id="SocialMediaMarketing" name="Social Media Marketing" value="SocialMediaMarketing" />Social Media Marketing
</td>
<td class="xl107" colspan="3" style='border-right:none; border-bottom:.5pt solid'>
<input type="text" style="width: 300px; padding-top: 2px;" />
</td>
<td class="xl108"></td>
<td class="xl109"></td>
</tr>
<tr style='height:29.25pt;'>
<td class="xl110" style='height:29.25pt;'>
Electronic Adverts</td>
<td class="xl86">City/Station/Channel</td>
<td class="xl86">No of Spots</td>
<td class="xl111">Duration</td>
<td class="xl86">Cost</td>
<td class="xl91">Cost for durtation</td>
<td class="xl90"></td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="MultiplexAdv." name="Multiplex Adv." value="MultiplexAdv." />Multiplex Adv.
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="multi1" id="multi11" onkeyup="getMulti()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="multi2" id="multi22" onkeyup="getMulti()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="multi3" id="multi33" onkeyup="getMulti()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="multi5" id="multi55" onkeyup="getMulti()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageMulti" id="totalMulti" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="RadioSpots" name="Radio Spots" value="RadioSpots" />Radio Spots
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="radio1" id="radio11" onkeyup="getRadio()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="radio2" id="radio22" onkeyup="getRadio()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="radio3" id="radio33" onkeyup="getRadio()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="radio5" id="radio55" onkeyup="getRadio()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageRadio" id="totalRadio" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="TVAds" name="TV Ads" value="TVAds" />TV Ads
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="tv1" id="tv11" onkeyup="getTv()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="tv2" id="tv22" onkeyup="getTv()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="tv3" id="tv33" onkeyup="getTv()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="tv5" id="tv55" onkeyup="getTv()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageTv" id="totalTv" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:18.00pt;'>
<td class="xl786 " colspan="7" rowspan="5" style='height:90.00pt;border-right:.5pt solid windowtext; border-bottom:.5pt solid windowtext;'>working description
<br />
<textarea rows="6" cols="140" name="comment" form="usrform"></textarea>
</td>
</tr>
<tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr>
<tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr>
<tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr>
<tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr>
<tr style='height:2.00pt;'></tr>
<tr style='height:15.00pt;'>
<td class="xl115" colspan="7" style='height:15.00pt;border-right:.5pt solid border-bottom:.5pt solid '>Contact Details of Media to be Used</td>
</tr>
<tr class="xl65" style='height:19.50pt;'>
<td class="xl88" style='height:19.50pt;'>Contact Person</td>
<td class="xl88" colspan="2" style='border-right:.5pt solid border-bottom:.5pt solid '>
<input type="text" style="width: 180px; padding-top: 2px;" />
</td>
<td class="xl86" colspan="4" style='border-right:.5pt solid border-bottom:.5pt solid'> Email Address</td>
</tr>
<tr class="xl65" style='height:19.50pt;'>
<td class="xl88" style='height:19.50pt;'>Contact Number</td>
<td class="xl88" colspan="2" style='border-right:.5pt solid border-bottom:.5pt solid '>
<input type="text" style="width: 180px; padding-top: 2px;" />
</td>
<td class="xl86" colspan="4" style='border-right:.5pt solid border-bottom:.5pt solid '>
<input type="text" style="width: 272px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:15.00pt;'>
<td class="xl70" colspan="7" style='height:15.00pt;border-right:none;border-bottom:none;'>For ABC
</td>
</tr>
<tr style='height:15.00pt;'>
<td class="xl96" style='height:15.00pt;'>Checklist </td>
<td class="xl116"></td>
<td class="xl99"></td>
<td class="xl117"></td>
<td class="xl116"></td>
<td class="xl118"></td>
<td class="xl99"></td>
</tr>
<tr style='height:15.75pt;'>
<td class="xl119" style='height:15.75pt;'>
<input type="checkbox" id="Artwork" name="Artwork" value="Artwork " />Artwork or Design Approval By ABC
</td>
<td class="xl66"></td>
<td class="xl120"></td>
<td class="xl121">
<input type="checkbox" id="Sample" name="Sample" value="Sample " />Sample Artwork included
</td>
<td class="xl66" colspan="2" style='mso-ignore:colspan;'>
</td>
<td class="xl120"></td>
</tr>
<tr style='height:15.75pt;'>
<td class="xl119" style='height:15.75pt;'>
<input type="checkbox" id="Cost" name="Cost" value="Cost " />Cost Approval by ABC
</td>
<td class="xl66"></td>
<td class="xl120"></td>
<td class="xl121">
<input type="checkbox" id="Image" name="Image" value="Image" />Sample Image included
</td>
<td class="xl66" colspan="2">
</td>
<td class="xl120"></td>
</tr>
<tr style='height:15.75pt;'>
<td class="xl119" style='height:15.75pt;'>
<input type="checkbox" id="Location" name="Cost" value="Location" />Location:
</td>
<td class="xl122"></td>
<td class="xl123"></td>
<td class="xl121">
<input type="checkbox" id="Costing" name="Costing" value="Costing" />Costing included
</td>
<td class="xl66" colspan="2">
</td>
<td class="xl120"></td>
</tr>
</table>
</div>
</body>
</html>
This seems to work with jQuery:
Download:
https://www.jqueryscript.net/demo/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel/
Source:
<script src="scripts/jquery.table2excel.js"></script>
Script:
$("#testTable").table2excel({
// exclude CSS class
exclude: ".noExl",
name: "Worksheet Name",
filename: "Products" //do not include extension
});
It will give you the download.

Placing Check Boxes Next To Each Other

I want to place the check boxes and the tables next to each other with a proper alignment. I can seem to put the three check boxes that I've created beside each other in the same row but I am unable to align them all properly and neatly. I find some difficulties in formatting them by using Notepad++ as my developing tool.
Need help on this one.
Here is the CSS and HTML codes. Under this HTML section, the check boxes consist of respective table created in them. I have separated all the codes with the comment 'Scenario 1,2,3 and Main'.
td.left {
text-align: left;
}
th {
border: 1.5px solid #4682B4;
text-align: center;
padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed<br>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 1-->
<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed<br>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 2-->
<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output<br>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>Headcount II</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>
<!--Main-->
<form id="radioForm2" method="get" align="center">
<table style="width:30%" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
</form>
<!--End of Form-->
<br><br><br>
I put the corrected input in an answer to show how it should look like. The comment is not the right place for html snippets. But this answer did still not resolve the view problem.
td.left {
text-align: left;
}
th {
border: 1.5px solid #4682B4;
text-align: center;
padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed</td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 1-->
<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed</td>
</tr>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 2-->
<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output</td>
</tr>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>Headcount II</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>
<!--Main-->
<form id="radioForm2" method="get" align="center">
<table style="width:30%" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
</form>
<!--End of Form-->
<br><br><br>

Categories