Sum TD in one TR - javascript

How can i sum values from td input in one TR?
<table>
<tr class="here">
<td><input type="text" class="one" value="2" /></td>
<td><input type="text" class="two" value="4" /></td>
<td><input type="text" class="three" value="5" /></td>
<td><input type="text" class="four" value="3" /></td>
<td><input type="text" class="sum" /></td>
<td><input type="text" class="five" value="2" /></td>
</tr>
<tr class="here">
<td><input type="text" class="one" value="2" /></td>
<td><input type="text" class="two" value="4" /></td>
<td><input type="text" class="three" value="5" /></td>
<td><input type="text" class="four" value="3" /></td>
<td><input type="text" class="sum" /></td>
<td><input type="text" class="five" value="2" /></td>
</tr>
<tr class="here">
<td><input type="text" class="one" value="2" /></td>
<td><input type="text" class="two" value="6" /></td>
<td><input type="text" class="three" value="4" /></td>
<td><input type="text" class="four" value="2" /></td>
<td><input type="text" class="sum" /></td>
<td><input type="text" class="five" value="2" /></td>
</tr>
<tr class="here">
<td><input type="text" class="one" value="5" /></td>
<td><input type="text" class="two" value="2" /></td>
<td><input type="text" class="three" value="3" /></td>
<td><input type="text" class="four" value="8" /></td>
<td><input type="text" class="sum" /></td>
<td><input type="text" class="five" value="4" /></td>
</tr>
</table>
LIVE DEMO
I can sum all values with function .each but how to make this for each tr, not td?
I would like sum values from input with class TWO and class THREE and class FOUR and add this to input with class SUM in same TR.
For my example should be:
2 4 5 3 **12** 2 // 4+5+3
2 4 5 3 **12** 2 // 4+5+3
2 6 4 2 **12** 2 // 6+4+2
5 2 3 8 **13** 4 // 2+3+8


Your code should look like this.
You need to iterate over the td with the particular class in question and sum up the values. Then assign that value to the input that you were referring to.
$('tr.here').each(function(){
var sum = 0;
$('.two, .three, .four', this).each(function() {
sum += parseFloat(this.value);
});
$('.sum', this).val(sum);
})
Check Fiddle


Try below code
$('tr.here').each(function () {
var sum = parseFloat($(this).find('.two').val()) + parseFloat($(this).find('.three').val()) + parseFloat($(this).find('.four').val());
$(this).find('.sum').val(sum);
})
Check this Fiddle

Related

Loop through all cells in all rows in a table

I'm trying to loop through all the <td> in each <tr> in this table in order to assign a value to each <td>.
<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>
So far I've tried this:
const grid = document.getElementById("grid");
const row = grid.getElementsByTagName('tr');
const cell = row.getElementsByTagName('td');
for(row in grid) {
for(cell in row) {
cell.textContent = "1";
}
}
But it errors with TypeError: row.getElementsByTagName is not a function.
How can I fix this?

You can use document.querySelectorAll('td') to get all of your cells and then you can loop through it by using forEach for example.
// looping through the inputs inside the cells
// to demonstrate that it works I log the id of the input field
document.querySelectorAll('td > input').forEach((x) => {
console.log(x.id)
})
// here looping through the cells
document.querySelectorAll('td').forEach((x) => {
console.log(x)
})
<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>

How can I make an alert with the number of the buttons that are not checked?

I have n radio buttons within an HTML form. A dialog box appears if not all of them are checked. How can I make an alert with the number of the buttons that are not checked?
<tr>
<td><strong>a</strong></td>
<td><input type="radio" id="RadioButton" name="a"/></td>
<td><input type="radio" id="RadioButton" name="a"/></td>
</tr>
<tr>
<td><strong>acronym</strong></td>
<td><input type="radio" id="RadioButton" name="acronym"/></td>
<td><input type="radio" id="RadioButton" name="acronym"/></td>
</tr>
<tr>
<td><strong>blockquote</strong></td>
<td><input type="radio" id="RadioButton" name="blockquote"/></td>
<td><input type="radio" id="RadioButton" name="blockquote"/></td>
</tr>
<tr>
<td><strong>br</strong></td>
<td><input type="radio" id="RadioButton" name="br"/></td>
<td><input type="radio" id="RadioButton"name="br"/></td>
</tr>
<tr>
<td><strong>div</strong></td>
<td><input type="radio" id="RadioButton" name="div"/></td>
<td><input type="radio" id="RadioButton" name="div"/></td>
</tr>
I want to display the number of the radios that are not checked

Use .reduce to identify all radio names, then use .filter over each name and :checked selector to figure out the number of unchecked radio fields:
const allRadioNames = [...document.querySelectorAll('input[type="radio"]')]
.reduce((names, { name }) => {
if (!names.includes(name)) names.push(name);
return names;
}, []);
document.querySelector('button').addEventListener('click', () => {
const checkedCount = allRadioNames.filter(name => {
return document.querySelector(`input[type="radio"][name="${name}"]:checked`);
}).length;
console.log('uncheckedCount: ' + (allRadioNames.length - checkedCount));
});
<tr>
<td><strong>a</strong></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
</tr>
<tr>
<td><strong>acronym</strong></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
</tr>
<tr>
<td><strong>blockquote</strong></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
</tr>
<tr>
<td><strong>br</strong></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
</tr>
<tr>
<td><strong>div</strong></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
</tr>
<br>
<button>submit</button>

Note: this solution will fetch the number of boxes checked but will not match by name. As long as you know how may boxes should be checked, it shouldn't be a problem. The browser allows only one of the boxes with matching names to be checked. Let me know if you need something more specific.
This is a single-line solution. Simply use a query selector all within the confines of the table. Fetch :checked boxes and then alert the length.
function init() {
var table = document.getElementById('table');
var radioBoxes = table.querySelectorAll('input[type="radio"]:checked')
alert(radioBoxes.length)
}
<table id="table">
<tr>
<td><strong>a</strong></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
</tr>
<tr>
<td><strong>acronym</strong></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
</tr>
<tr>
<td><strong>blockquote</strong></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
</tr>
<tr>
<td><strong>br</strong></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
</tr>
<tr>
<td><strong>div</strong></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
</tr>
</table>
<input type="button" onclick="init()" id="button" value="How many are checked?">

How to enable an input by clicking a checkbox

I have inventory list, I want to create invitation from the list.
All products have 2 inputs: price and counts (qtys) that are disabled.
I tried to create function that make the inputs enabled when the user clicked on the checkbox, but it's working only after 2 clicks...
function niv(id)
{
$("input:checkbox").click(function() {
$('#'+id).attr("disabled", !this.checked);
$('#p'+id).attr("disabled", !this.checked);
});
}
The HTML:
<tr class="even">
<td>225/45/17</td>
<td id=Bridgestone>Bridgestone</td>
<td>Putenza <h6>91y</h6></td>
<td><input type="text" id="p21" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 650</small> ₪</td>
<td><input type="checkbox" name="check[]" value="21" onclick="niv(21)"></td>
<td><input type="text" id="21" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
<tr class="even">
<td>225/45/19</td>
<td id=Bridgestone>Bridgestone</td>
<td>Putenza <h6>96w</h6></td>
<td><input type="text" id="p20" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 1100</small> ₪</td>
<td><input type="checkbox" name="check[]" value="20" onclick="niv(20)"></td>
<td><input type="text" id="20" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
<tr class="even">
<td>225/55/17</td>
<td id=Bridgestone>Bridgestone</td>
<td>Turanza runflat <h6>97y</h6></td>
<td><input type="text" id="p18" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
<td><input type="checkbox" name="check[]" value="18" onclick="niv(18)"></td>
<td><input type="text" id="18" name="counts[]" disabled="disabled" /><small> מתוך 9 במלאי</small></td>
</tr>
<tr class="even">
<td>225/55/18</td>
<td id=Bridgestone>Bridgestone</td>
<td>t001 <h6>98v</h6></td>
<td><input type="text" id="p19" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 550-600</small> ₪</td>
<td><input type="checkbox" name="check[]" value="19" onclick="niv(19)"></td>
<td><input type="text" id="19" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
<tr class="even">
<td>255/50/20</td>
<td id=Bridgestone>Bridgestone</td>
<td>Hp Sport <h6>109v</h6></td>
<td><input type="text" id="p14" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
<td><input type="checkbox" name="check[]" value="14" onclick="niv(14)"></td>
<td><input type="text" id="14" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>

Your niv function is wrong. Try to change it to:
function niv(id)
{
var isCheck = $("input:checkbox[value='" + id + "']").is(':checked');
$('#'+id).prop("disabled", !isCheck);
$('#p'+id).prop("disabled", !isCheck);
}
Another possible solution is to pass the this value to the niv function in the call:
onclick="niv(this)"
And so the new niv function will be:
function niv(obj)
{
$('#'+obj.value).prop("disabled", !obj.checked);
$('#p'+obj.value).prop("disabled", !obj.checked);
}
My snippet:
function niv(id)
{
var isCheck = $("input:checkbox[value='" + id + "']").is(':checked');
$('#'+id).prop("disabled", !isCheck);
$('#p'+id).prop("disabled", !isCheck);
}
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<table>
<tr class="even">
<td>225/45/17</td>
<td id=Bridgestone>Bridgestone</td>
<td>Putenza <h6>91y</h6></td>
<td><input type="text" id="p21" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 650</small> ₪</td>
<td><input type="checkbox" name="check[]" value="21" onclick="niv(21)"></td>
<td><input type="text" id="21" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr><tr class="even">
<td>225/45/19</td>
<td id=Bridgestone>Bridgestone</td>
<td>Putenza <h6>96w</h6></td>
<td><input type="text" id="p20" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 1100</small> ₪</td>
<td><input type="checkbox" name="check[]" value="20" onclick="niv(20)"></td>
<td><input type="text" id="20" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr><tr class="even">
<td>225/55/17</td>
<td id=Bridgestone>Bridgestone</td>
<td>Turanza runflat <h6>97y</h6></td>
<td><input type="text" id="p18" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
<td><input type="checkbox" name="check[]" value="18" onclick="niv(18)"></td>
<td><input type="text" id="18" name="counts[]" disabled="disabled" /><small> מתוך 9 במלאי</small></td>
</tr><tr class="even">
<td>225/55/18</td>
<td id=Bridgestone>Bridgestone</td>
<td>t001 <h6>98v</h6></td>
<td><input type="text" id="p19" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 550-600</small> ₪</td>
<td><input type="checkbox" name="check[]" value="19" onclick="niv(19)"></td>
<td><input type="text" id="19" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr><tr class="even">
<td>255/50/20</td>
<td id=Bridgestone>Bridgestone</td>
<td>Hp Sport <h6>109v</h6></td>
<td><input type="text" id="p14" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
<td><input type="checkbox" name="check[]" value="14" onclick="niv(14)"></td>
<td><input type="text" id="14" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
</table>

Use the change() event listener, it's better for this purpose.
As the checkbox is in a table, I've just found the parent <tr> and then found all the text inputs within that row.
$('input[type="checkbox"]').change(function () {
$(this).closest('tr').find('input[type="text"]').attr("disabled", !this.checked);
})
You'll notice that this does away with the inline call to JavaScript, abstracting your JS code from your HTML. It also means that you don't need to be concerned with IDs and making sure they are sensible - possibly reducing BE workload and making everything more simple.
The reason that your code didn't work - and more specifically why it required two clicks is as follows:
You have an inline click event - which then calls a function to set a listener. Only when your inline click is called, is the listener applied.
The second time you click the new listener - with your logic - has been created, which means that it's used.
Additionally, every time you click on this checkbox element, you create a new listener - which means that within a couple of clicks, there is a big list of duplicated event listeners.
jsFiddle example: https://jsfiddle.net/likestothink/kgL4q0jg/

checking all checkboxes in a column

I have the following html page
I want to make a check box at the heading of every column which when checked will check all the check boxes in the column.How do I achieve that functionality? I think jquery or javascript will help but I am new to them
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="next.php" method="post">
<select style="width: 200px;" name="d">
<option value="1" id="spanDate"></option>
<option value="2" id="spanDate1"></option>
<option value="3" id="spanDate2"></option>
</select>
<br><br><br>
<table class="CSSTableGenerator">
<tr>
<th>Date</th>
<th>00:00-03:00</th>
<th>03:00-06:00</th>
<th>06:00-09:00</th>
<th>09:00-12:00</th>
<th>12:00-15:00</th>
<th>15:00-18:00</th>
<th>18:00-21:00</th>
<th>21:00-00:00</th>
</tr>
<tr>
<td>Noida Sector 1</td>
<td><input type="checkbox" name="time[]" value="1" ></td>
<td><input type="checkbox" name="time[]" value="2" ></td>
<td><input type="checkbox" name="time[]" value="3" ></td>
<td><input type="checkbox" name="time[]" value="4" ></td>
<td><input type="checkbox" name="time[]" value="5" ></td>
<td><input type="checkbox" name="time[]" value="6" ></td>
<td><input type="checkbox" name="time[]" value="7" ></td>
<td><input type="checkbox" name="time[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 2</td>
<td><input type="checkbox" name="time1[]" value="1" ></td>
<td><input type="checkbox" name="time1[]" value="2" ></td>
<td><input type="checkbox" name="time1[]" value="3" ></td>
<td><input type="checkbox" name="time1[]" value="4" ></td>
<td><input type="checkbox" name="time1[]" value="5" ></td>
<td><input type="checkbox" name="time1[]" value="6" ></td>
<td><input type="checkbox" name="time1[]" value="7" ></td>
<td><input type="checkbox" name="time1[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 3</td>
<td><input type="checkbox" name="time2[]" value="1" ></td>
<td><input type="checkbox" name="time2[]" value="2" ></td>
<td><input type="checkbox" name="time2[]" value="3" ></td>
<td><input type="checkbox" name="time2[]" value="4" ></td>
<td><input type="checkbox" name="time2[]" value="5" ></td>
<td><input type="checkbox" name="time2[]" value="6" ></td>
<td><input type="checkbox" name="time2[]" value="7" ></td>
<td><input type="checkbox" name="time2[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 4</td>
<td><input type="checkbox" name="time3[]" value="1" ></td>
<td><input type="checkbox" name="time3[]" value="2" ></td>
<td><input type="checkbox" name="time3[]" value="3" ></td>
<td><input type="checkbox" name="time3[]" value="4" ></td>
<td><input type="checkbox" name="time3[]" value="5" ></td>
<td><input type="checkbox" name="time3[]" value="6" ></td>
<td><input type="checkbox" name="time3[]" value="7" ></td>
<td><input type="checkbox" name="time3[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 5</td>
<td><input type="checkbox" name="time4[]" value="1" ></td>
<td><input type="checkbox" name="time4[]" value="2" ></td>
<td><input type="checkbox" name="time4[]" value="3" ></td>
<td><input type="checkbox" name="time4[]" value="4" ></td>
<td><input type="checkbox" name="time4[]" value="5" ></td>
<td><input type="checkbox" name="time4[]" value="6" ></td>
<td><input type="checkbox" name="time4[]" value="7" ></td>
<td><input type="checkbox" name="time4[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 6</td>
<td><input type="checkbox" name="time5[]" value="1" ></td>
<td><input type="checkbox" name="time5[]" value="2" ></td>
<td><input type="checkbox" name="time5[]" value="3" ></td>
<td><input type="checkbox" name="time5[]" value="4" ></td>
<td><input type="checkbox" name="time5[]" value="5" ></td>
<td><input type="checkbox" name="time5[]" value="6" ></td>
<td><input type="checkbox" name="time5[]" value="7" ></td>
<td><input type="checkbox" name="time5[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 7</td>
<td><input type="checkbox" name="time6[]" value="1" ></td>
<td><input type="checkbox" name="time6[]" value="2" ></td>
<td><input type="checkbox" name="time6[]" value="3" ></td>
<td><input type="checkbox" name="time6[]" value="4" ></td>
<td><input type="checkbox" name="time6[]" value="5" ></td>
<td><input type="checkbox" name="time6[]" value="6" ></td>
<td><input type="checkbox" name="time6[]" value="7" ></td>
<td><input type="checkbox" name="time6[]" value="8" ></td>
</tr>
</table>
<br><br><br>
<input type="submit" name="enable" value="enable">
<input type="submit" name="disable" value="disable">
</form>
<script>
var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime() + (1000*3600*24));
document.getElementById("spanDate1").innerHTML = months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " + tomorrow.getFullYear();
</script>
<script>
var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime());
document.getElementById("spanDate").innerHTML = months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " + tomorrow.getFullYear();
</script>
<script>
var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime() + (1000*3600*24) + (1000*3600*24));
document.getElementById("spanDate2").innerHTML = months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " + tomorrow.getFullYear();
</script>
</body>
</html>

Add <input type="checkbox" name="checkall" value="1" /> at the heading of every column and change value to correspond to the value of the checkboxes in the colummn.
Then using jquery, add
$('input[name=checkall]').each(function(){
$(this).click(function(){
if(this.checked === true){
checkAll(this.value);
}else{
unCheckAll(this.value);
}
})
})
function checkAll(value){
var checkboxes = $('input:checkbox[value=' + value + ']');
checkboxes.prop( "checked" , true );
}
function unCheckAll(value){
var checkboxes = $('input:checkbox[value=' + value + ']');
checkboxes.prop( "checked" , false );
}

Update total in table row with jquery

I have a table
<table>
<tbody>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
</tbody>
</table>
How can I update the total input field when a change in quantity or price happens?
I have thought of something like
$('table tbody tr td').filter(':nth-child(1), :nth-child(2)').children('input').change(function() {
$(this).parent('td').siblings('td').filter(':nth-child(3)').val(?);
});
but it seems a bit unhandy.

You can use:
$('table tbody tr td').find('input').keyup(function() {
var total=0;
total=(parseInt($(this).parent('td').siblings('td').not(':nth-child(3)').find('input').val())||0)+(parseInt($(this).val())||0);
$(this).closest('tr').find('input:last').val(total)
});
Working Demo

Much easy to read and control if you can assign some dummy class to quantity, price and total input.
Something like this:
HTML
<table>
<tbody>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
</tbody>
</table>
Script
$('table tbody tr').find('.qty, .prc').on('keyup',function() {
var parent = $(this).parents('tr');
var quantity = parseInt(parent.find('.qty').val())||0;
var price = parseInt(parent.find('.prc').val())||0;
parent.find('.total').val(quantity*price);
});
Check working example here

Personally, i prefer not to select elements by their position. If you wind up changing them later, or adding another your code is broken.
I would do something like:
$(this).closest('tr').find('input[name=total]').val(?);

Categories

Resources