Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a table of cells in html
<table id="grid">
<tr>
<td><input type="text" id="1" /></td>
<td><input type="text" id="2" /></td>
<td><input type="text" id="3" /></td>
<td><input type="text" id="4" /></td>
<td><input type="text" id="5" /></td>
<td><input type="text" id="6" /></td>
<td><input type="text" id="7" /></td>
<td><input type="text" id="8" /></td>
<td><input type="text" id="9" /></td>
</tr>
<tr>
<td><input type="text" id="10" /></td>
<td><input type="text" id="11" /></td>
<td><input type="text" id="12" /></td>
<td><input type="text" id="13" /></td>
<td><input type="text" id="14" /></td>
<td><input type="text" id="15" /></td>
<td><input type="text" id="16" /></td>
<td><input type="text" id="17" /></td>
<td><input type="text" id="18" /></td>
</tr>
<tr>
<td><input type="text" id="19" /></td>
<td><input type="text" id="20" /></td>
<td><input type="text" id="21" /></td>
<td><input type="text" id="22" /></td>
<td><input type="text" id="23" /></td>
<td><input type="text" id="24" /></td>
<td><input type="text" id="25" /></td>
<td><input type="text" id="26" /></td>
<td><input type="text" id="27" /></td>
</tr>
<tr>
<td><input type="text" id="28" /></td>
<td><input type="text" id="29" /></td>
<td><input type="text" id="30" /></td>
<td><input type="text" id="31" /></td>
<td><input type="text" id="32" /></td>
<td><input type="text" id="33" /></td>
<td><input type="text" id="34" /></td>
<td><input type="text" id="35" /></td>
<td><input type="text" id="36" /></td>
</tr>
<tr>
<td><input type="text" id="37" /></td>
<td><input type="text" id="38" /></td>
<td><input type="text" id="39" /></td>
<td><input type="text" id="40" /></td>
<td><input type="text" id="41" /></td>
<td><input type="text" id="42" /></td>
<td><input type="text" id="43" /></td>
<td><input type="text" id="44" /></td>
<td><input type="text" id="45" /></td>
</tr>
<tr>
<td><input type="text" id="46" /></td>
<td><input type="text" id="47" /></td>
<td><input type="text" id="48" /></td>
<td><input type="text" id="49" /></td>
<td><input type="text" id="50" /></td>
<td><input type="text" id="51" /></td>
<td><input type="text" id="52" /></td>
<td><input type="text" id="53" /></td>
<td><input type="text" id="54" /></td>
</tr>
<tr>
<td><input type="text" id="55" /></td>
<td><input type="text" id="56" /></td>
<td><input type="text" id="57" /></td>
<td><input type="text" id="58" /></td>
<td><input type="text" id="59" /></td>
<td><input type="text" id="60" /></td>
<td><input type="text" id="61" /></td>
<td><input type="text" id="62" /></td>
<td><input type="text" id="63" /></td>
</tr>
<tr>
<td><input type="text" id="64" /></td>
<td><input type="text" id="65" /></td>
<td><input type="text" id="66" /></td>
<td><input type="text" id="67" /></td>
<td><input type="text" id="68" /></td>
<td><input type="text" id="69" /></td>
<td><input type="text" id="70" /></td>
<td><input type="text" id="71" /></td>
<td><input type="text" id="72" /></td>
</tr>
<tr>
<td><input type="text" id="73" /></td>
<td><input type="text" id="74" /></td>
<td><input type="text" id="75" /></td>
<td><input type="text" id="76" /></td>
<td><input type="text" id="77" /></td>
<td><input type="text" id="78" /></td>
<td><input type="text" id="79" /></td>
<td><input type="text" id="80" /></td>
<td><input type="text" id="81" /></td>
</tr>
</table>
With the following css
* { box-sizing: border-box; }
table { margin: 10px; }
tr:first-child td {
border-top-color: black;
}
tr:nth-child(3n) td {
border-bottom-color: black;
}
td {
border: 1px solid lightgrey;
height: 40px;
width: 40px;
}
td:first-child {
border-left-color: black;
}
td:nth-child(3n) {
border-right-color: black;
}
input {
padding: 0;
text-align: center;
border: 0;
height: 40px;
width: 40px;
text-align: center;
}
input:hover {
background: #eee;
}
This allows each cell to be editable and when you hover over the cell it changes colour slightly
I added this js to add values to the cells
document.querySelectorAll('td').forEach((cell) => {
cell.textContent = "1";
})
This does its job it fills the grid with the number but it also makes the css stop working it no longer lets me edit and no longer has the hover effects it also seems to change the font?
Im i correct in using 'textContent' ?
Any help would be appreciated thanks
you need to set the value to the input, not to the cell as a text,
ex, like this:
document.querySelectorAll('td').forEach((cell) => {
cell.querySelector('input').value = '1'
})
also, it's not stopping CSS, and it's important to know that your cells are editable because you have input elements, it's not doable to make elements editable by CSS,
Related
I want the input each tr disabled if its checkbox is unchecked - on page load. As I understand, I have to call a function to check if the checkbox was checked. But as my code below, it's not working.
$(function() {
fn_chkBox('.form-check-input'); //see if checked on load
function fn_chkBox() {
if ($(this).is(':checked')) {
$(this).closest("tr").find("input.form-control").prop("disabled", false);
} else {
$(this).closest("tr").find("input.form-control").prop("disabled", true);
}
}
});
$(".form-check-input").change(function() {
if ($(this).is(':checked')) {
$(this).closest("tr").find("input.form-control").prop("disabled", false);
} else { //unchecked
$(this).closest("tr").find("input.form-control").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>
I want all the input in each row tr disabled when load if its checkbox is empty.
You can use the .form-check-input:not(:checked) selector to select all checkboxes that are not checked.
$(function() {
$('.form-check-input:not(:checked)').closest("tr").find("input.form-control").prop("disabled", true);
});
$(".form-check-input").change(function() {
if ($(this).is(':checked')) {
$(this).closest("tr").find("input.form-control").prop("disabled", false);
} else { //unchecked
$(this).closest("tr").find("input.form-control").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>
To do what you require you can simply trigger() your change event handler on the checkboxes when the page loads.
Two other things to note here. Firstly, the logic there can be simplified by providing the inverse checked property state to the prop('disabled') call. Secondly, be careful when placing your event handlers outside document.ready. If you've put the jQuery code in the head of the page you encounter issues with the event not being bound.
With all that said, try this:
jQuery($ => {
$(".form-check-input").on('change', e => {
$(e.target).closest('tr').find('input.form-control').prop('disabled', !e.target.checked);
}).trigger('change');
});
.form-control { width: 50px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>
You can leverage your existing function and just trigger a 'change' event on load. You can also shorten your function by setting disabled to !$(this).is(':checked')
$(function() {
$('input[type=checkbox]').trigger('change')
});
$(".form-check-input").change(function() {
$(this).closest("tr").find("input.form-control").prop("disabled", !$(this).is(':checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Day</th>
<th>Fish</th>
<th>Crab</th>
<th>Shrimp</th>
<th>Squid</th>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="mon" value="1" checked/> Mon</label></td>
<td><input type="text" class="form-control" name="mon[1]" /></td>
<td><input type="text" class="form-control" name="mon[2]" /></td>
<td><input type="text" class="form-control" name="mon[3]" /></td>
<td><input type="text" class="form-control" name="mon[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="tue" value="1" /> Tue</label></td>
<td><input type="text" class="form-control" name="tue[1]" /></td>
<td><input type="text" class="form-control" name="tue[2]" /></td>
<td><input type="text" class="form-control" name="tue[3]" /></td>
<td><input type="text" class="form-control" name="tue[4]" /></td>
</tr>
<tr>
<td><label><input type="checkbox" class="form-check-input" name="wed" value="1" /> Wed</label></td>
<td><input type="text" class="form-control" name="wed[1]" /></td>
<td><input type="text" class="form-control" name="wed[2]" /></td>
<td><input type="text" class="form-control" name="wed[3]" /></td>
<td><input type="text" class="form-control" name="wed[4]" /></td>
</tr>
</table>
This question already has answers here:
How to set tbody height with overflow scroll
(16 answers)
Closed 2 years ago.
I am trying to enter entries in table inputs for my inventory website. I want to freeze the headers of each column and tried doing it with this -> Freeze the top row for an html table only (Fixed Table Header Scrolling)
window.onload = function(){
var to_show = '';
for(var i = 1 ; i < 50 ; i++){
to_show += '<tr><td><input type="text" autocomplete="off" id="product_name_'+ i +'" name="product_name_'+i+'" onkeyup="productSearch(this.value, '+i+')" tabindex="-1" style="font-size:larger;"></td>';
to_show += '<td><input type="text" autocomplete="off" id="location_'+ i +'" name="location_'+ i +'" onkeyup="productSearch(this.value, '+ i +')" tabindex="-1" style="font-size:larger;"></td></tr>';
}
document.getElementById('addInside_tr_20').innerHTML = to_show;
}
#import url("https://fonts.googleapis.com/css?family=Montserrat:300,400|Oswald:200,300,400&display=swap");
:root {
--purple-theme: #091428;
--lightpurple-theme: #0f3a41;
--gray-bg-heading: #b8b8b8;
--gray-bg-sidebar: #dee3e7;
--lightgreen-theme: #65ffce;
--green-theme: #46b692;
--red-theme: #f75b54;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 0px 0px 10px 10px;
background: var(--lightpurple-theme);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--green-theme);
border-radius: 0 0 10px 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--lightgreen-theme);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
::-moz-selection {
/* Code for Firefox */
color: var(--purple-theme);
background: var(--green-theme);
}
::selection {
color: var(--purple-theme);
background: var(--green-theme);
}
input:focus,
option:focus,
select:focus {
outline-color: var(--lightgreen-theme);
}
body {
height: 100%;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
table,
select,
input,
a {
color: whitesmoke;
}
input {
width: 100%;
line-height: 5px;
font-size: 10px;
}
input[type="text"],
input[type="url"],
input[type="number"] {
height: 30px;
border: 1px solid var(--green-theme);
background-color: transparent;
color: whitesmoke;
font-size: 15px;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid var(--green-theme);
background-color: var(--green-theme);
color: var(--purple-theme);
text-decoration-style: bold;
font-size: 15px;
border-radius: 0px 15px 15px 0px;
}
/* ------grid container------ */
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
}
input[type="date"] {
height: 100%;
}
.grid_container {
display: grid;
grid-template-columns: repeat(auto, 1fr);
grid-gap: 10px;
padding: 10px;
margin: 0 auto;
color: whitesmoke;
}
.grid {
background-color: var(--purple-theme);
border: 1px solid lightgrey;
padding: 20px;
}
.inside > span {
font-family: "Oswald", sans-serif;
font-weight: 400;
font-size: 18px;
}
.item1 {
grid-column: 1 / 3;
}
.item2 {
grid-column: 3 / 5;
}
.item3 {
grid-column: 5 / 7;
}
.item4 {
grid-column: 7 / 9;
}
.item5 {
grid-column: 1 / 9;
}
.inside {
padding: 0;
padding-bottom: 10px;
border: none;
}
.item2 {
grid-column: 1 / 9;
grid-row: 1 / 5;
}
.inside input[type="text"] {
width: 200px;
}
.item2 select,
.item2 option {
width: 100%;
height: 30px;
background-color: var(--purple-theme);
border: 1px solid var(--green-theme);
text-align: center;
}
.item2 select option {
background: var(--purple-theme);
}
.item2 table {
width: 100%;
text-align: center;
margin-top: 20px;
font-size: 20px;
}
.details table:nth-child(1) {
margin-top: -20px;
}
.details {
margin-top: -20px;
}
.item2 th {
background-color: var(--green-theme);
color: var(--purple-theme);
padding: 15px;
}
.item2 a {
text-decoration: underline;
}
/* main edit here start */
#text-area td:nth-child(1) {
width: 80%;
}
#text-area td:nth-child(2) {
width: 20%;
}
#text-area thead th:nth-child(1) {
width: 80%;
}
#text-area thead th:nth-child(2) {
width: 20%;
}
#text-area thead {
display: block;
}
#text-area tbody {
height: 440px;
display: block;
overflow: auto;
width: 100%;
}
#text-area input {
width: 100%;
}
#text-area input {
border: none;
}
#text-area {
border: 1px solid var(--green-theme);
}
#text-area tr:nth-child(2n + 1) {
background: var(--lightpurple-theme);
}
#text-area td:nth-child(4) {
border-right: none;
}
#text-area td {
border-right: 1px solid var(--green-theme);
}
/* main edit here ends */
.item2 .inside table * {
padding-bottom: 20px;
}
.suggestion {
position: absolute;
background-color: var(--purple-theme);
font-size: smaller;
cursor: pointer;
}
.suggestion_i:hover {
color: var(--purple-theme);
background-color: var(--green-theme);
}
.suggestion_i {
cursor: pointer;
text-align: center;
text-justify: center;
padding: 10px 10px -5px 10px;
}
#sorted_div {
background-color: var(--purple-theme);
/*position:absolute;*/
top: 123px;
}
#sorted_div tr:nth-child(2n + 1) {
background: var(--lightpurple-theme);
}
<div class="grid_container">
<div class="grid item2">
<div class="inside" id="topTableID">
<form action="php/invoiceFetch.php" method="post" enctype="multipart/form-data" id='myForm' onkeypress="return event.keyCode != 13;">
<table>
<tr>
<td><label for="">Location :</label></td>
<td><input type="text" autocomplete="off" name="invoice_name" id="invoice_name" onchange="invoiceSpliter()" onkeyup="customerSearch(this.value)" style="width: 500;"></td>
<td><label>Product Suggestion : </label></td>
<td>
<div id="product_suggestion" class="suggestion"></div>
</td>
</tr>
<tr>
<td>
<div id="suggestion" class="suggestion"></div>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="details">
<table id="text-area">
<thead>
<tr>
<th><label>Product Name</label></th>
<th><label>Current Locations</label></th>
</tr>
</thead>
<tbody id="addInside_tr_20">
<!--there will be some rows added here -->
</tbody>
</table>
<table>
<tr>
<td><input type="reset" value="Reset" tabindex="-1"></td>
<td><input type="button" onclick="document.getElementById('myModal').style.display = 'block';" value="Submit"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
You can check the code on [codepen]{https://codepen.io/zaidi2293/pen/WNwmJrP} (Ignore most of the css as they are just to replicate what I had so that I don't miss something out)
(Sorry for the extensive code length) The Problem is the "thead" is not aligned with "tbody" as in column perspective because of overflow in vertical direction. I've asked this question before but that doesn't seem to work for me. Also, there will be some more columns added in the future. No custom size width answers please
You may reset the table-layout to fixed, turn tr into tables and apply the width to each cells, then add a 1.2em padding or margin right on thead (average width of a scrollbar).
answer inspired from How to set tbody height with overflow scroll and probably a duplicate.
table {
border: 1px solid;
}
tr {
display: table;
table-layout: fixed;
}
#text-area {
border: 1px solid;
}
#text-area tr :nth-child(1) {
width: 15%;
}
#text-area tr :nth-child(2) {
width: 60%;
}
#text-area tr :nth-child(3) {
width: 10%;
}
#text-area tr :nth-child(4) {
width: 15%;
}
#text-area thead {
display: block;
padding-right:1.2em;
}
#text-area tbody {
height: 200px;
display: block;
overflow: auto;
}
input {
box-sizing:border-box;
min-width: 100%;
}
<table id="text-area">
<thead>
<tr>
<th><label>Barcode</label></th>
<th><label>Product Name</label></th>
<th><label>Count</label></th>
<th><label>QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE"></td>
<td><input type="text" value="6"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS"></td>
<td><input type="text" value="4"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE"></td>
<td><input type="text" value="6"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER"></td>
<td><input type="text" value="2"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
</tbody>
</table>
You could set input box width 100% and add pixels width to th and td, instead of percentages.,
The input box width 100% will help to set it to its parent width and remove its default width. The pixels can help to have a fixed width and alignment problems.
table{
border: 1px solid;
}
#text-area{
border: 1px solid;
}
#text-area td:nth-child(1){
width: 100px;
}
#text-area td:nth-child(2){
width: 200px;
}
#text-area td:nth-child(3){
width: 100px;
}
#text-area td:nth-child(4){
width: 100px;
}
#text-area thead th:nth-child(1){
width: 100px;
}
#text-area thead th:nth-child(2){
width: 200px;
}
#text-area thead th:nth-child(3){
width: 100px;
}
#text-area thead th:nth-child(4){
width: 100px;
}
#text-area thead{
display:block;
}
#text-area tbody{
height:200px;
display:block;
overflow:auto;
}
#text-area input{
width:100%
}
<table id="text-area">
<thead>
<tr>
<th><label >Barcode</label></th>
<th><label >Product Name</label></th>
<th><label >Count</label></th>
<th><label >QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS" ></td>
<td><input type="text" value="4" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER" ></td>
<td><input type="text" value="2" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
</tbody>
</table>
th {
background-color: #fff;
}
th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
}
<table id="text-area">
<thead>
<tr>
<th><label >Barcode</label></th>
<th><label >Product Name</label></th>
<th><label >Count</label></th>
<th><label >QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS" ></td>
<td><input type="text" value="4" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER" ></td>
<td><input type="text" value="2" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
</tbody>
</table>
I have a Client Data Entry Form, it is quite large but works great. Except for one problem I added a script to calculate the total of up to 5 fields Max. The script works, it does the calculation and the total appears. When I submit the form the data isn't being submitted to mysql.
Here is the script:
<script>
var calculateForm = function () {
document.getElementById("total_paid").value = (Number(document.getElementById("amount1").value) + Number(document.getElementById("amount2").value) + Number(document.getElementById("amount3").value) + Number(document.getElementById("amount4").value) + Number(document.getElementById("amount5").value));
};
</script>
Here is part of the form:
<div class="rent_own_info">
<fieldset name="rent_own">
<legend>Rent / Own</legend>
<table><tbody>
<tr>
<td>Address</td>
<td>Postal Code</td>
<td>Months</td>
<td>Amount</td>
<td>Landlord / Township</td>
</tr>
<tr>
<td><input type="text" name="address1" id="address1"></td>
<td><input type="text" name="pcode1" id="pcode1" size="10"></td>
<td><input type="text" name="months1" id="months1" size="10"></td>
<td><input type="text" name="amount1" id="amount1" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid1" id="paid1"></td>
</tr>
<tr>
<td><input type="text" name="address2" id="address2"></td>
<td><input type="text" name="pcode2" id="pcode2" size="10"></td>
<td><input type="text" name="months2" id="months2" size="10"></td>
<td><input type="text" name="amount2" id="amount2" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid2" id="paid2"></td>
</tr>
<tr>
<td><input type="text" name="address3" id="address3"></td>
<td><input type="text" name="pcode3" id="pcode3" size="10"></td>
<td><input type="text" name="months3" size="10"></td>
<td><input type="text" name="amount3" id="amount3" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid3" id="paid3"></td>
</tr>
<tr>
<td><input type="text" name="address4" id="address4"></td>
<td><input type="text" name="pcode4" id="pcode4" size="10"></td>
<td><input type="text" name="months4" size="10"></td>
<td><input type="text" name="amount4" id="amount4" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid4" id="paid4"></td>
</tr>
<tr>
<td><input type="text" name="address5" id="address5"></td>
<td><input type="text" name="pcode5" id="pcode5" size="10"></td>
<td><input type="text" name="months5" size="10"></td>
<td><input type="text" name="amount5" id="amount5" value="" onblur="calculateForm();" size="10"></td>
<td><input type="text" name="paid5" id="paid5"></td>
</tr>
<tr>
<td><input type="hidden" name="" id=""></td>
<td><input type="hidden" name="" id="" size="10"></td>
<td><input type="text" name="" size="10" value="Total Paid"></td>
<td><input type="text" name="total_paid" id="total_paid" value="" size="10"></td>
<td><input type="hidden" name="" id=""></td>
</tr>
</tbody></table>
</fieldset>
</div>
I have checked the apache2 and the mysql logs and no errors.
Any help would be greatly appreciated.
Thanx ZZ
I have made an invoice form.. everything is working but sum of all product price is showing wrong. I am not very good with the Javascript. Need Your help.
js for total sum:
<script type="text/javascript">
window.sumInputs = function() {
var inputs = document.getElementsByTagName('input'),
result = document.getElementById('total'),
sum = 0;
for(var i=0; i<inputs.length; i++) {
var ip = inputs[i];
if (ip.name && ip.name.indexOf("total") < 0) {
sum += parseInt(ip.value) || 0;
}
}
result.value = sum;
}
</script>
html table:
Here I have declared my id's for my calculations. This
is working well.
<table>
<tr>
<td><input type="text" class="street" class="menu_name" name="user[0][name]" value=""></td>
<td><input type="text" id="q2" name="user[0][age]" value=""></td>
<td><input type="text" id="q1" class="menu_price" name="user[0][address]" value=""><br></td>
<td><input type="text" id="t3" name="user[0][email]" value=""></td>
</tr>
<tr>
<td><input type="text" class="street1" class="menu_name1" name="user[1][name]" value=""></td>
<td><input type="text" id="r2" name="user[1][age]" value=""></td>
<td><input type="text" id="r1" class="menu_price1" name="user[1][address]" value=""><br></td>
<td><input type="text" id="t4" name="user[1][email]" value=""></td>
</tr>
<tr>
<td><input type="text" class="street2" class="menu_name2" name="user[2][name]" value=""></td>
<td><input type="text" id="t2" name="user[2][age]" value=""></td>
<td><input type="text" id="t1" class="menu_price2" name="user[2][address]" value=""><br></td>
<td><input type="text" id="t7" name="user[2][email]" value=""></td>
</tr>
<tr>
<td><input type="text" class="street3" class="menu_name3" name="user[3][name]" value=""></td>
<td><input type="text" id="h2" name="user[3][age]" value=""></td>
<td><input type="text" id="h1" class="menu_price3" name="user[3][address]" value=""><br></td>
<td><input type="text" id="t8" name="user[3][email]" value=""></td>
</tr>
<tr>
<td><input type="text" class="street4" class="menu_name4" name="user[4][name]" value=""></td>
<td><input type="text" id="y2" name="user[4][age]" value=""></td>
<td><input type="text" id="y1" class="menu_price4" name="user[4][address]" value=""><br></td>
<td><input type="text" id="t9" name="user[4][email]" value=""></td>
</tr>
<tr><td>Total : <input type="text" name="total" id="total"/>
Sum //Here is my problem it's not showing correct value
</td>
</tr>
<?php echo form_submit($submit);?>
</table>
Here is a JSFiddle
I have made some changes. Actually the js is adding up all the inputs value. But you require only the value of price input.
http://fiddle.jshell.net/h9753snz/
I'm looking to Group my Table data and Sum by the group (like sum price by product). In a second Table.
I want group or filter by Item column, and sum the result of the Price column.
So Oranges (having two lines) should be one line with Sum price.
See this example below:
<table width="400" border="1">
<tr>
<td>Item</td>
<td>Location</td>
<td>Quantity</td>
<td>Price</td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="3" /></td>
<td><input name="price" type="text" id="price" value="3.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item2" value="Apple" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="1" /></td>
<td><input name="price" type="text" id="price" value="1.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Orange" /></td>
<td><input name="location" type="text" id="location" value="Tree" /></td>
<td><input name="quantity" type="text" id="quantity" value="4" /></td>
<td><input name="price" type="text" id="price" value="4.00" /></td>
</tr>
<tr>
<td><input name="item" type="text" id="item" value="Grapes" /></td>
<td><input name="location" type="text" id="location" value="Vine" /></td>
<td><input name="quantity" type="text" id="quantity" value="10" /></td>
<td><input name="price" type="text" id="price" value="10.00" /></td>
</tr>
</table>
<p> </p>
<table width="400" border="1">
<tr>
<td>Orange</td>
<td>7</td>
<td>7.00</td>
</tr>
<tr>
<td>Apple</td>
<td>1</td>
<td>1.00</td>
</tr>
<tr>
<td>Grapes</td>
<td>10</td>
<td>10.00</td>
</tr>
</table>
First change id "price" to class, then
$(document).ready(function(){
var sum = 0;
$('.price').each(function(){
sum += $(this).val();
});
alert("The sum is " + sum);
});
You can modify above code to get sum in button click event too.