Develop Reference

Jquery sort a list of checkboxes in the initial order after unchecked

I have a table with a list of checkboxes that are input alphabetically; some of them are already checked.
I want the checked checkboxes to go to the top of the list when the page loads and to revert to alphabetical order when a user unchecks a checkbox.
Although I've done something with my lame skills in JQuery, the checkboxes are not at the top of the list as you can see in the preview when the page loads.
$(document).ready(function() {
var table = $("#vm_table tbody");
$("input[type='checkbox']").change(function() {
var checkbox = $(this);
var tr = checkbox.closest("tr");
if (checkbox.is(":checked")) {
tr.prependTo(table);
} else {
table.find("tr").sort(function(a, b) {
var tda = $(a).find("td:first-child").text();
var tdb = $(b).find("td:first-child").text();
return tda.localeCompare(tdb);
}).appendTo(table);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="vm_table">
<thead>
<tr>
<th scope="col">A-Z</th>
<th scope="col">Class</th>
</tr>
</thead>
<tbody>
<tr class="clickable_vm">
<td>
<label for="218">
<input type="checkbox" name="vms" value="218" class="displaynone" id="218">A
</label>
</td>
<td class="schedule-name" id="schname">
A1<br>
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="219">
<input type="checkbox" name="vms" value="219" class="displaynone" id="219">B
</label>
</td>
<td class="schedule-name" id="schname">
A1<br>
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="221">
<input type="checkbox" name="vms" value="221" class="displaynone" id="221">C
</label>
</td>
<td class="schedule-name" id="schname">
A3<br>
</td>
</tr>
<tr class="clickable_vm background-color-secondary">
<td>
<label for="222">
<input type="checkbox" name="vms" value="222" class="displaynone" checked="" id="222">D
</label>
</td>
<td class="schedule-name" id="schname">
A1<br>
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="223">
<input type="checkbox" name="vms" value="223" class="displaynone" id="223">E
</label>
</td>
<td class="schedule-name" id="schname">
</td>
</tr>
<tr class="clickable_vm background-color-secondary">
<td>
<label for="224">
<input type="checkbox" name="vms" value="224" class="displaynone" checked="" id="224">F
</label>
</td>
<td class="schedule-name" id="schname">
A1<br>
</td>
</tr>
<tr class="clickable_vm background-color-secondary">
<td>
<label for="225">
<input type="checkbox" name="vms" value="225" class="displaynone" checked="" id="225">G
</label>
</td>
<td class="schedule-name" id="schname">
B2<br>
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="226">
<input type="checkbox" name="vms" value="226" class="displaynone" id="226">H
</label>
</td>
<td class="schedule-name" id="schname">
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="213">
<input type="checkbox" name="vms" value="213" class="displaynone" id="213">I
</label>
</td>
<td class="schedule-name" id="schname">
</td>
</tr>
<tr class="clickable_vm background-color-secondary">
<td>
<label for="216">
<input type="checkbox" name="vms" value="216" class="displaynone" checked="" id="216">J
</label>
</td>
<td class="schedule-name" id="schname">
C3<br>
</td>
</tr>
<tr class="clickable_vm background-color-secondary">
<td>
<label for="217">
<input type="checkbox" name="vms" value="217" class="displaynone" checked="" id="217">K
</label>
</td>
<td class="schedule-name" id="schname">
B1<br>
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="215">
<input type="checkbox" name="vms" value="215" class="displaynone" id="215">L
</label>
</td>
<td class="schedule-name" id="schname">
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="220">
<input type="checkbox" name="vms" value="220" class="displaynone" id="220">M
</label>
</td>
<td class="schedule-name" id="schname">
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="214">
<input type="checkbox" name="vms" value="214" class="displaynone" id="214">N
</label>
</td>
<td class="schedule-name" id="schname">
</td>
</tr>
</tbody>
</table>

You never order them, when the page first loads. You only order them in the change event.
You can order them on page load by adding this line
$("input[type='checkbox']:checked").closest("tr").prependTo(table);
like I did below.
$(document).ready(function() {
var table = $("#vm_table tbody");
$("input[type='checkbox']:checked").closest("tr").prependTo(table);
$("input[type='checkbox']").change(function() {
var checkbox = $(this);
var tr = checkbox.closest("tr");
if (checkbox.is(":checked")) {
tr.prependTo(table);
} else {
table.find("tr").sort(function(a, b) {
var tda = $(a).find("td:first-child").text();
var tdb = $(b).find("td:first-child").text();
return tda.localeCompare(tdb);
}).appendTo(table);
// Put the checked ones to the top of the table
$("input[type='checkbox']:checked").closest("tr").prependTo(table);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="vm_table">
<thead>
<tr>
<th scope="col">A-Z</th>
<th scope="col">Class</th>
</tr>
</thead>
<tbody>
<tr class="clickable_vm">
<td>
<label for="218">
<input type="checkbox" name="vms" value="218" class="displaynone" id="218">A
</label>
</td>
<td class="schedule-name" id="schname">
A1<br>
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="219">
<input type="checkbox" name="vms" value="219" class="displaynone" id="219">B
</label>
</td>
<td class="schedule-name" id="schname">
A1<br>
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="221">
<input type="checkbox" name="vms" value="221" class="displaynone" id="221">C
</label>
</td>
<td class="schedule-name" id="schname">
A3<br>
</td>
</tr>
<tr class="clickable_vm background-color-secondary">
<td>
<label for="222">
<input type="checkbox" name="vms" value="222" class="displaynone" checked="" id="222">D
</label>
</td>
<td class="schedule-name" id="schname">
A1<br>
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="223">
<input type="checkbox" name="vms" value="223" class="displaynone" id="223">E
</label>
</td>
<td class="schedule-name" id="schname">
</td>
</tr>
<tr class="clickable_vm background-color-secondary">
<td>
<label for="224">
<input type="checkbox" name="vms" value="224" class="displaynone" checked="" id="224">F
</label>
</td>
<td class="schedule-name" id="schname">
A1<br>
</td>
</tr>
<tr class="clickable_vm background-color-secondary">
<td>
<label for="225">
<input type="checkbox" name="vms" value="225" class="displaynone" checked="" id="225">G
</label>
</td>
<td class="schedule-name" id="schname">
B2<br>
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="226">
<input type="checkbox" name="vms" value="226" class="displaynone" id="226">H
</label>
</td>
<td class="schedule-name" id="schname">
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="213">
<input type="checkbox" name="vms" value="213" class="displaynone" id="213">I
</label>
</td>
<td class="schedule-name" id="schname">
</td>
</tr>
<tr class="clickable_vm background-color-secondary">
<td>
<label for="216">
<input type="checkbox" name="vms" value="216" class="displaynone" checked="" id="216">J
</label>
</td>
<td class="schedule-name" id="schname">
C3<br>
</td>
</tr>
<tr class="clickable_vm background-color-secondary">
<td>
<label for="217">
<input type="checkbox" name="vms" value="217" class="displaynone" checked="" id="217">K
</label>
</td>
<td class="schedule-name" id="schname">
B1<br>
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="215">
<input type="checkbox" name="vms" value="215" class="displaynone" id="215">L
</label>
</td>
<td class="schedule-name" id="schname">
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="220">
<input type="checkbox" name="vms" value="220" class="displaynone" id="220">M
</label>
</td>
<td class="schedule-name" id="schname">
</td>
</tr>
<tr class="clickable_vm">
<td>
<label for="214">
<input type="checkbox" name="vms" value="214" class="displaynone" id="214">N
</label>
</td>
<td class="schedule-name" id="schname">
</td>
</tr>
</tbody>
</table>
EDIT: Now the checked ones remain on top and the unchecked one returns into alphabetical order.

Monitor the changes in table using JavaScript or HTML

I want to change the total price when the count or unit price of the products are changed on the website. I know I should use the onChange function, but I have no idea about how to write the JavaScript code.
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true" >
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true" >
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true" >
<input id="productCount" type="text" name="countList" onchange="update()" class="layui-input count"
th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true" >
<input id="normalPrice" type="text" name="priceList" onchange="update()" class="layui-input price"
th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price"
th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
<a href="javascript:void(0)" class="delBtn redType" onclick='delColumns(this)'>Del</a>
</td>
</tr>
</tbody>
</table>
I hope that the totalPrice = count*price could refresh whenever the user changes one of those values.

You can easily monitor the pointed input fields (#productCount and #normalPrice) and change the value of #total according to it. In the code below, I use the input event and I'm not using inline event handlers, but rather the function addEventListener() (know why).
const productCountInput = document.querySelector('#productCount');
const productPriceInput = document.querySelector('#normalPrice');
const totalPriceInput = document.querySelector('#total');
function updateTotalPrice() {
totalPriceInput.value = (parseFloat(productCountInput.value) * parseFloat(productPriceInput.value)) || 0;
}
productCountInput.addEventListener('input', updateTotalPrice);
productPriceInput.addEventListener('input', updateTotalPrice);
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true">
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true">
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true">
<input id="productCount" type="text" name="countList" class="layui-input count" th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true">
<input id="normalPrice" type="text" name="priceList" class="layui-input price" th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price" th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
Del
</td>
</tr>
</tbody>
</table>

Remove 3 checkboxes from a table

I created a table with some checkboxes and I want to create a JavaScript that remove the ones I don't want there but I'm stuck in the JavaScript part. Could you please help me in this small challenge? Thanks!
<table class="isTable">
<tbody>
<tr>
<td>
<input id="firstCheckBox" type="checkbox" name="number1" value="All">
<label for="firstCheckBox">All</label>
</td>
</tr>
<tr>
<td>
<input id="secondCheckBox" type="checkbox" name="number2" value="Some text">
<label for="secondCheckBox">Some text</label>
</td>
</tr>
<tr>
<td>
<input id="thirdCheckBox" type="checkbox" name="number3" value="1st to be removed">
<label for="thirdCheckBox">1st to be removed</label>
</td>
</tr>
<tr>
<td>
<input id="fourthCheckBox" type="checkbox" name="number4" value="Some other text">
<label for="fourthCheckBox">Some other text</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number5" value="2nd to be removed">
<label for="">2nd to be removed</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number6" value="Some other text again">
<label for="">Some other text again</label>
</td>
<tr>
<td>
<input id="sixthCheckBox" type="checkbox" name="number7" value="3rd to be removed">
<label for="">3rd to be removed</label>
</td>
</tr>
</tbody>
</table>
The JS part done so far, but the way I tried to removed the tr doesn't work
let findTableOfCheckBoxes = document.getElementsByClassName('.isTable');
for (let i = 0; i < findTableOfCheckBoxes.length; i++) {
let selectTr = document.getElementsByTagName("tr")[2];
selectTr.parentNode.removeChild(selectTr);
}

You're committing the cardinal sin of assuming your selector is finding elements. It's not, because you need isTable not .isTable when using getElementsByClassName() which, since it's about classes, assumes the . for you.
There's also a more modern, cleaner way to achieve what you need. Follows:
document.querySelectorAll('.isTable').forEach(tbl => {
let row = tbl.querySelector('tr:nth-child(3)');
row && row.remove();
});

You added "." character for the getElementsByClassName. Just remove it.
let findTableOfCheckBoxes = document.getElementsByClassName('isTable');
let findTableOfCheckBoxes = document.getElementsByClassName('isTable');
for (let i = 0; i < findTableOfCheckBoxes.length; i++) {
let selectTr = document.getElementsByTagName("tr")[2];
selectTr.parentNode.removeChild(selectTr);
}
<table class="isTable">
<tbody>
<tr>
<td>
<input id="firstCheckBox" type="checkbox" name="number1" value="All">
<label for="firstCheckBox">All</label>
</td>
</tr>
<tr>
<td>
<input id="secondCheckBox" type="checkbox" name="number2" value="Some text">
<label for="secondCheckBox">Some text</label>
</td>
</tr>
<tr>
<td>
<input id="thirdCheckBox" type="checkbox" name="number3" value="1st to be removed">
<label for="thirdCheckBox">1st to be removed</label>
</td>
</tr>
<tr>
<td>
<input id="fourthCheckBox" type="checkbox" name="number4" value="Some other text">
<label for="fourthCheckBox">Some other text</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number5" value="2nd to be removed">
<label for="">2nd to be removed</label>
</td>
<tr>
<td>
<input id="fifthCheckBox" type="checkbox" name="number6" value="Some other text again">
<label for="">Some other text again</label>
</td>
<tr>
<td>
<input id="sixthCheckBox" type="checkbox" name="number7" value="3rd to be removed">
<label for="">3rd to be removed</label>
</td>
</tr>
</tbody>
</table>

How to sum values from form text field array using jquery onlick function

I am new to jQuery and javascript, I need a help on how to do computation on form text field in an array. See below sample code;
<head lang="en">
<meta chartaxt="UTF-8">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<title>Sample salary computation</title>
</head>
<body>
<form method="POST" name="regis" id="regis">
<table align="center" border="1" width="200">
<tr>
<th>Staff ID</th>
<th>Salary</th>
<th>Total Tax</th>
<th>Total Net Pay</th>
</tr>
<!--Staff 1-->
<tr data-id="STAFF/2016/001">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/001" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="500">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/002">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/002" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="500">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="50">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/003">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/003" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="600">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
</table>
</form>
</body>
I want a jquery script that can sum total = (salary + tax) for each staff using onclick button

$("#submit").click(function() {
$("tr").each(function() {
if ($(this).find(".salary")) {
var salary = parseInt($(this).find(".salary").val(), 10)
var tax = parseInt($(this).find(".tax").val(), 10)
$(this).find(".total").val(salary + tax)
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" name="regis" id="regis">
<table align="center" border="1" width="200">
<tr>
<th>Staff ID</th>
<th>Salary</th>
<th>Total Tax</th>
<th>Total Net Pay</th>
</tr>
<!--Staff 1-->
<tr data-id="STAFF/2016/001">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/001" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="500">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/002">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/002" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="500">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="50">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
<tr data-id="STAFF/2016/003">
<td>
<input type="text" name="staffid[]" class="staffid" value="STAFF/2016/003" readonly="readonly">
</td>
<td>
<input type="text" name="salary[]" class="salary" placeholder="salary" value="5000">
</td>
<td>
<input type="text" name="tax[]" class="tax" placeholder="tax" value="600">
</td>
<td>
<input type="text" name="total[]" class="total" placeholder="total" readonly="readonly">
</td>
</tr>
</table>
<button id="submit" type="button">Submit</button>

You can use selector to get or set the val with iQuery. Something like this
$("button").click(function(){
var total = $("input[name=salary]").val()+$("input[name=tax]").val();
$("input[name=total]").val(tatal);
});

Here is one solution:
http://codepen.io/tryggvigy/pen/BzAqGR
var sums = []
$('input[type=button]').click(function() {
var salaries = $('.salary')
.toArray()
.map(function(salary) { return salary.value })
var taxes = $('.tax')
.toArray()
.map(function(tax) { return tax.value})
sums = salaries.map(function(salary, i) {
return parseInt(salary) + parseInt(taxes[i])
})
alert(document.sums)
})

javascript calculator with click to calculate

I have a working calculator on my website that is used for business expense savings estimation. currently the calculator auto-calculates in real time as the user inputs numbers. i would like the user to have to click a calculate button in order to see any results. could someone please help as i am having a hard time adjusting the code myself. here is the current code:
function calc() {
var cost = document.getElementById('phone').value * (.30) +
document.getElementById('energy').value * (.05) +
document.getElementById('cell').value * (.30) + document.getElementById('office').value * (.15) + document.getElementById('card').value *
(.35) + document.getElementById('waste').value * (.5) +
document.getElementById('payroll').value * (.5);
document.getElementById('cost').value = (cost * 12).toFixed(2);
}
<form name="form1" method="post" action="">
<table width="33%" align="center">
<tr>
<td valign="top" style="text-align: center"><strong>
Category</strong>
</td>
<td style="text-align: center"><strong>Monthly Expenses</strong>
</td>
</tr>
<tr>
<td valign="top"> </td>
<td> </td>
</tr>
<tr>
<td width="47%" valign="top">Telephone & Internet</td>
<td width="53%">
<input name="phone" id="phone" type="text" onchange="calc
()" />
</td>
</tr>
<tr>
<td valign="top">Energy</td>
<td>
<input name="energy" id="energy" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Cell Phone</td>
<td>
<input name="cell" id="cell" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Office Supplies</td>
<td>
<input name="office" id="office" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Merchant Card Fees</td>
<td>
<input name="card" id="card" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Waste Removal</td>
<td>
<input name="waste" id="waste" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td height="31" valign="top">3rd Party Payroll Fees</td>
<td>
<input name="payroll" id="payroll" type="text" onchange="calc
()" />
</td>
</tr>
<tr>
</tr>
</table>
<p> </p>
<div align="center">
<table width="33%" border="0">
<tr>
<td width="54%" height="31" valign="top"><strong>Estimated Annual
Savings:</strong>
</td>
<td width="46%">
<textarea name="cost" rows="1" id="cost" readonly style="overflow:hidden" input type="number"></textarea>
</td>
</tr>

Currently, your inputs are set up to call calc() whenever their onchange event is fired. This happens whenever the value is changed and the input is blurred (no longer in focus).
Remove the onchange="calc()" attribute on all your inputs, and add a button whever it makes sense to on your page with onclick="calc()":
<button onclick="calc()">Calculate</button>

Place button with Javascript event outside form
<button onclick="calc();">Calculate</button>

Delete all onchange="calc()" and add this html code to your page, that's it.
<button onclick="calc()">Calculate Expenses</button>

Remove the call to onchange="calc()" from all.
Put <div align="center">
<table width="33%" border="0">
<tr>
<td align="Center">
<input type="button" value="Click To Calculate" onclick="calc()" />
</td>
</tr>
</div>