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.
Related
<!DOCTYPE html>
<html>
<body>
<table style="width:100%; border-collapse: collapse; text-align: center;" id="stockinboundedittable">
<tr>
<th style="display:none;">subcategory</th>
<th>Sl.No</th>
<!--<th>I.U.Code</th>-->
<th>Item Name</th>
<th> old stock</th>
<th> new stock</th>
<th> Total Stock</th>
<th> qty</th>
<th>Edit</th>
</tr>
<tr>
<td style="display:none;">sdvsvds</td>
<td>
<input style=" width: 100%;" id="slno1editinbound1" value="1" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname1" value="Fresh Goat Meat - Curry Cut" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock1" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock1" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock1" value="30" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty1" value="5">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut1">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">sdvs</td>
<td>
<input style=" width: 100%;" id="slno1editinbound2" value="2" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname2" value="Everest - Kasur Methi" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock2" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock2" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock2" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty2" value="5">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut2">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">sdvsvd</td>
<td>
<input style=" width: 100%;" id="slno1editinbound3" value="3" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname3" value="Fresh Coconut Milk 150 ml" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock3" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock3" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock3" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty3" value="5">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut3">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">svdsdv</td>
<td>
<input style=" width: 100%;" id="slno1editinbound4" value="4" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname4" value="Sakthi - Chicken Masala" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock4" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock4" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock4" value="30" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty4" value="5">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut4">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">dvdvdvs</td>
<td>
<input style=" width: 100%;" id="slno1editinbound5" value="5" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname5" value="Goat Bones - Regular Soup Pack" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock5" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock5" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock5" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty5" value="5">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut5">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">ddd</td>
<td>
<input style=" width: 100%;" id="slno1editinbound5" value="6" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname5" value="some product" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock5" value="1" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock5" value="1" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock5" value="0" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty5" value="0">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut5">EDIT</button>
</td>
</tr>
</table>
</table>
<span id="demo"></span>
<script>
const res=[...document.querySelectorAll("#stockinboundedittable tr")].slice(1).map(tr=>
Object.fromEntries(
[...tr.querySelectorAll("input")].slice(1).map(inp=>[inp.id.replace(/.*inboundedit/,"").replace(/\d+$/,""),inp.value]))).filter(
function ({ oldstock, newstock}) {
return (oldstock!="" && newstock!="")&&(oldstock!="0" && newstock!="")
}
);
var js=JSON.stringify(res);
document.getElementById("demo").innerHTML=js;
</script>
</body>
</html>
Description
As you can see from above code I have been getting json from html table.
And have been filtering if the oldstock is non empty and non zero and nestock is non empty
All the json data are in string.
What I need
I have been getting all the data like itemname,newstock,oldstock,qty, and total stock as String.
I need json of oldstock, newstock, totalstock and qty as integer and itemname in string.
Output for my code
[{"itemname":"Fresh Goat Meat - Curry Cut","oldstock":"20","newstock":"10","totalstock":"30","qty":"5"},
{"itemname":"Everest - Kasur Methi","oldstock":"10","newstock":"10","totalstock":"10","qty":"5"},{"itemname":"Fresh Coconut Milk 150 ml","oldstock":"10","newstock":"10","totalstock":"20","qty":"5"},
{"itemname":"Sakthi - Chicken Masala","oldstock":"20","newstock":"10","totalstock":"30","qty":"5"},
{"itemname":"Goat Bones - Regular Soup Pack","oldstock":"10","newstock":"10","totalstock":"10","qty":"5"},
{"itemname":"some product","oldstock":"1","newstock":"1","totalstock":"0","qty":"0"}]
Description:
As you can see the output for my current code contains all the data as string.
Output I Need
[{"itemname":"Fresh Goat Meat - Curry Cut","oldstock":20,"newstock":10,"totalstock":30,"qty":5},
{"itemname":"Everest - Kasur Methi","oldstock":10,"newstock":10,"totalstock":10,"qty":5},{"itemname":"Fresh Coconut Milk 150 ml","oldstock":10,"newstock":10,"totalstock":20,"qty":5},
{"itemname":"Sakthi - Chicken Masala","oldstock":20,"newstock":10,"totalstock":30,"qty":5},
{"itemname":"Goat Bones - Regular Soup Pack","oldstock":10,"newstock":10,"totalstock":10,"qty":5},
{"itemname":"some product","oldstock":1,"newstock":1,"totalstock":0,"qty":0}]
Description:
As you can see from the sample output oldstock, newstock, totalstock and qty are in integer and itemname are in string
You need to use for loop on data as below.
// input data json
const data = [{"itemname":"Fresh Goat Meat - Curry Cut","oldstock":"20","newstock":"10","totalstock":"30","qty":"5"}]
let formattedData = [];
for (const currentVal of data){
let currentObj = currentVal;
if(parseInt(currentVal['oldstock]) >= 0) {
currentObj['oldstock] = parseInt(currentVal['oldstock])
}
if(parseInt(currentVal['newstock]) >= 0) {
currentObj['newstock] = parseInt(currentVal['newstock])
}
if(parseInt(currentVal['totalstock]) >= 0) {
currentObj['totalstock] = parseInt(currentVal['totalstock])
}
if(parseInt(currentVal['qty]) >= 0) {
currentObj['qty] = parseInt(currentVal['qty])
}
formattedData.push(currentObj);
}
// Should print number type as you want
console.log('formatted data ', formattedData);
try following:
const res = [...document.querySelectorAll("#stockinboundedittable tr")].slice(1).map(tr =>
Object.fromEntries(
[...tr.querySelectorAll("input")].slice(1).map(inp =>
[
inp.id.replace(/.*inboundedit/, "").replace(/\d+$/, ""),
(inp.id.indexOf('itemname') >= 0 ? inp.value : parseInt(inp.value))
]))).filter(
function ({ oldstock, newstock }) {
return (oldstock != "" && newstock != "") && (oldstock != "0" && newstock != "");
}
);
var js = JSON.stringify(res);
document.getElementById("demo").innerHTML = js;
<table style="width:100%; border-collapse: collapse; text-align: center;" id="stockinboundedittable">
<tr>
<th style="display:none;">subcategory</th>
<th>Sl.No</th>
<!--<th>I.U.Code</th>-->
<th>Item Name</th>
<th> old stock</th>
<th> new stock</th>
<th> Total Stock</th>
<th> qrt</th>
<th>Edit</th>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_2</td>
<td>
<input style=" width: 100%;" id="slno1editinbound1" value="1" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname1" value="Fresh Goat Meat - Curry Cut" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock1" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock1" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock1" value="30" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty1">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut1">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_5</td>
<td>
<input style=" width: 100%;" id="slno1editinbound2" value="2" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname2" value="Everest - Kasur Methi" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock2" value="0" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock2" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock2" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty2">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut2">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_13</td>
<td>
<input style=" width: 100%;" id="slno1editinbound3" value="3" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname3" value="Fresh Coconut Milk 150 ml" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock3" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock3" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock3" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty3">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut3">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_5</td>
<td>
<input style=" width: 100%;" id="slno1editinbound4" value="4" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname4" value="Sakthi - Chicken Masala" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock4" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock4" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock4" value="30" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty4">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut4">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_2</td>
<td>
<input style=" width: 100%;" id="slno1editinbound5" value="5" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname5" value="Goat Bones - Regular Soup Pack" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock5" value="0" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock5" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock5" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty5">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut5">EDIT</button>
</td>
</tr>
</table>
</table>
##i need to read values inside tag and save it like json array with sl.no and edit button excluded in json array##
[{"itemname":"Chicken Drumstick","oldstock":"20","newstock":"10","totalstock":"30"},
{"itemname":"Chicken Drumstick","oldstock":"0","newstock":"10","totalstock":"10"},
{"itemname":"Chicken Drumstick","oldstock":"10","newstock":"10","totalstock":"20"},
{"itemname":"Chicken Drumstick","oldstock":"20","newstock":"10","totalstock":"30"},
{"itemname":"Chicken Drumstick","oldstock":"0","newstock":"10","totalstock":"10"}]
*the above json array is the example format i needed
i need to read it with loop from whole table
This will do the job:
const res=[...document.querySelectorAll("#stockinboundedittable tr")].slice(1).map(tr=>
[...tr.querySelectorAll("input")].slice(0).map(inp=>[inp.id.replace(/.*inboundedit/,"").replace(/\d+$/,""),inp.value]))
.reduce((a,c)=>{
a[c[0][1]]=
Object.fromEntries(c.slice(1));
return a},{});
console.log(res[2]);
<table style="width:100%; border-collapse: collapse; text-align: center;" id="stockinboundedittable">
<tr>
<th style="display:none;">subcategory</th>
<th>Sl.No</th>
<!--<th>I.U.Code</th>-->
<th>Item Name</th>
<th> old stock</th>
<th> new stock</th>
<th> Total Stock</th>
<th> qrt</th>
<th>Edit</th>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_2</td>
<td>
<input style=" width: 100%;" id="slno1editinbound1" value="1" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname1" value="Fresh Goat Meat - Curry Cut" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock1" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock1" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock1" value="30" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty1">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut1">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_5</td>
<td>
<input style=" width: 100%;" id="slno1editinbound2" value="2" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname2" value="Everest - Kasur Methi" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock2" value="0" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock2" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock2" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty2">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut2">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_13</td>
<td>
<input style=" width: 100%;" id="slno1editinbound3" value="3" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname3" value="Fresh Coconut Milk 150 ml" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock3" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock3" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock3" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty3">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut3">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_5</td>
<td>
<input style=" width: 100%;" id="slno1editinbound4" value="4" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname4" value="Sakthi - Chicken Masala" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock4" value="20" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock4" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock4" value="30" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty4">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut4">EDIT</button>
</td>
</tr>
<tr>
<td style="display:none;">tmcsubctgy_2</td>
<td>
<input style=" width: 100%;" id="slno1editinbound5" value="5" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedititemname5" value="Goat Bones - Regular Soup Pack" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditoldstock5" value="0" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundeditnewstock5" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="stockinboundedittotalstock5" value="10" readonly="">
</td>
<td>
<input style=" width: 100%;" id="inboundeditqty5">
</td>
<td>
<button style="background: #fdd110; width: 100%;" id="stockinboundeditditbut5">EDIT</button>
</td>
</tr>
</table>
</table>
I have a nested .map() loop that will collect both, the ids and the values of each input field (apart from the first one in each row). The Object.fromEntries() call will then assemble the inner arrays back into objects, using the first array element as the key and the second one as the value.
My answer also doesn't return a JSON string but an array of objects instead. Simply put it through JSON.stringify() if you really want a JSON string.
Update
Following OP's latest comments I updated my answer. I now use the first column as an "Id-key" and create an object of objects instead of an array of objects. The Id-key can be used to address each menu individually, as can be seen in my example console.log() where I selected the menu with Id-key 2.
You can try this:
function table_to_array(table_id) {
myData = document.getElementById(table_id).rows
//console.log(myData)
my_liste = []
for (var i = 0; i < myData.length; i++) {
el = myData[i].children
my_el = []
for (var j = 0; j < el.length; j++) {
my_el.push(el[j].innerText);
}
my_liste.push(my_el)
}
return my_liste
}
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>
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;">
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>