We Keep Coding

How to display calculation of html table on another column

I have 3 columns, one column total_column_price uses to display the calculation result of amount and device_price. How to achieve that?
The Table
{{ Form::open(['action' => 'TransactionsINController#store', 'method' => 'POST']) }}
<table class="table table-hover table-bordered">
<thead align="center">
<tr>
<th>Amount</th>
<th>Device Price</th>
<th><a href="#" class="btn btn-primary btn-sm addRow">
<i class="fa fa-plus"></i>
</a>
</th>
<th>Column Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-group">
{{ Form::number('amount[]', 'value', ['name' => 'amount[]']) }}
</div>
</td>
<td>
<div class="form-group">
{{ Form::number('device_price[]', 'value', ['name' => 'device_price[]']) }}
</div>
</td>
<td align="center">
<a href="#" class="btn btn-danger btn-sm remove">
<i class="fa fa-times"></i>
</a>
</td>
<td>
{{ Form::text('total_column_price', '') }}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total: </td>
<td style="border: none"><b class="total_price"></b></td>
<td style="border: none"></td>
</tr>
</tfoot>
</table>
{{ Form::button('<i class="far fa-save"></i> Submit', ['type' => 'submit', 'class' => 'btn btn-info'] ) }}
{{ Form::close() }}
This is the calculation I try to use. the purpose is when I make input in amount and device_price column the result will automatically appear in total_column_price.
The Script to Calculate
<script type="text/javascript">
$('tbody').delegate('.amount,.device_price','keyup',function(){
var tr=$(this).parent().parent();
var amount=tr.find('.amount').val();
var device_price=tr.find('.device_price').val();
var total_column_price=(amount*device_price);
tr.find(.total_column_price).val(total_column_price);
total_price();
});
function total_price(){
var total_price=0;
$('.total_column_price').each(function(i,e){
var total_column_price=$(this).val()-0;
total_price +=total_column_price;
});
$('.total_price').html(total_price+",00");
}
</script>

Everything seems to be good in your code the problem is way you are using the JQuery find function, you need to add quotes while entering the selector.
tr.find('.total_column_price').val(total_column_price);
Use the new event handle .on()
The .on() syntax is the new syntax that version 1.7 uses and it is meant to substitute .bind(), .delegate() and .live().
Another problem in your javascript was related to fetching the parent from on keyup in input box.
It should be like this
var tr = $(this).parent().parent().parent();
Try the code below:
$(function() {
$(document).on('keyup', 'input[name="amount[]"],input[name="device_price[]"]', function() {
var tr = $(this).parent().parent().parent();
var amount = tr.find('input[name="amount[]"]').val();
var device_price = tr.find('input[name="device_price[]"]').val();
var total_column_price = (amount * device_price);
total_price();
});
function total_price() {
var total_price = 0;
$('input[name="total_column_price[]"]').each(function(i, e) {
var total_column_price = $(this).val() - 0;
total_price += total_column_price;
});
$('.total_price').html(total_price + ",00");
}
})

How to clone the Highlighted Row of one table to another Table by pressing Enter key

I have an HTML <table> with data. Upon clicking the table rows, I can add the clicked row to another table. But I want to highlight the row with arrow keys and, on pressing the Enter key on the highlighted row, add the data of the highlighted row to the new table.
How can I do that?
What I have tried so far:
$(document).ready(function(){
$('#myTable').focus();
});
function highlight(tableIndex) {
if ((tableIndex + 1) > $('#myTable tbody tr').length) //restart process
tableIndex = 0;
if ($('#myTable tbody tr:eq(' + tableIndex + ')').length > 0) {
$('#myTable tbody tr').removeClass('highlight');
$('#myTable tbody tr:eq(' + tableIndex + ')').addClass('highlight');
}
}
$('#goto_first').click(function() {
highlight(0);
});
$('#goto_prev').click(function() {
highlight($('#myTable tbody tr.highlight').index() - 1);
});
$('#goto_next').click(function() {
highlight($('#myTable tbody tr.highlight').index() + 1);
});
$('#goto_last').click(function() {
highlight($('#myTable tbody tr:last').index());
});
$(document).keydown(function(e) {
switch (e.which) {
case 38:
$('#goto_prev').trigger('click');
break;
case 40:
$('#goto_next').trigger('click');
break;
}
});
$(document).ready(function() {
var items = [];
$("#myTable tr").on('click', function(e) {
var newTr = $(this).closest("tr").clone();
items.push(newTr);
newTr.appendTo($("#cloneTable"));
});
})
<html><head><title>dynamictable</title>
<style>
table { cursor: pointer; }
.highlight { background-color: lightgreen; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table id="myTable" border="1px" style="width: 30%;">
<thead>
<tr>
<th>##</th>
<th>Name</th>
<th>code</th>
<th>unit</th>
<th>rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>aaa</td>
<td>aa1</td>
<td>aa</td>
<td>111</td>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
<td>aa1</td>
<td>aa</td>
<td>111</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<input type="button" id="goto_first" value="first" class="btn btn-success">
<input type="button" id="goto_prev" value="prev" class="btn btn-secondary">
<input type="button" id="goto_next" value="next" class="btn btn-secondary">
<input type="button" id="goto_last" value="last" class="btn btn-success">
<br>
<br>
<br>
<table id="cloneTable" border="1px" style="width: 30%; float :left;"><!--new table to clone data-->
<thead>
<tr>
<th>##</th>
<th>Name</th>
<th>code</th>
<th>unit</th>
<th>rate</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>

Here you go
// highlight first row default
$("#myTable tbody tr:first-child").addClass("highlight");
document.onkeydown = moveAndAdd;
function moveAndAdd(e) {
e = e || window.event;
if (e.keyCode == "38") {
// up arrow
activeRow = $("tr.highlight"); /* get highlighted row */
activeRow.focus();
prevRow = activeRow.prev('tr'); /*very previous siblings*/
if (prevRow.length>0) {
activeRow.removeClass("highlight"); /*remove highlight from active class */
prevRow.addClass("highlight"); /* make very prev row highlighted*/
}
} else if (e.keyCode == "40") {
// down arrow
activeRow = $("tr.highlight"); /* get highlighted row */
activeRow.focus();
nextRow = activeRow.next('tr'); /*very previous siblings*/
if (nextRow.length>0) {
activeRow.removeClass("highlight");
nextRow.addClass("highlight");
}
}
else if (e.which == 13 || e.which == 32) {
// Enter or Spacebar - edit cell
e.preventDefault();
cloneRow = $(".highlight").clone(true); /*clone highlighted row*/
$("#cloneTable").append(cloneRow.removeClass("highlight")); /*append cloned row but remove class */
}
}
table {
color:black;
background-color:white;
}
.highlight{
color:White;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" border="1px" style="width: 30%;">
<thead>
<tr >
<th>##</th>
<th>Name</th>
<th>code</th>
<th>unit</th>
<th>rate</th>
</tr>
</thead>
<tbody>
<tr>
<td >1</td>
<td>aaa</td>
<td>aa1</td>
<td>aa</td>
<td>111</td>
</tr>
<tr>
<td>2</td>
<td>bbb</td>
<td>bb2</td>
<td>bb</td>
<td>222</td>
</tr>
<tr>
<td>3</td>
<td>ccc</td>
<td>cc3</td>
<td>cc</td>
<td>333</td>
</tr>
<tr>
<td>4</td>
<td>ddd</td>
<td>dd1</td>
<td>dd</td>
<td>444</td>
</tr>
</tbody>
</table>
<table id="cloneTable" border="1px" style="width: 30%; float :left;">
<thead>
<tr>
<th>##</th>
<th>Name</th>
<th>code</th>
<th>unit</th>
<th>rate</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

I was going to write a custom response but check this out, it addresses your issue: Use arrow keys to navigate an HTML table
You're also missing a closing quotation mark around your "width: 30%" for your opening parent div

Changing text into an input and then back again on deselection

I have a button, when i click it, i transform its sibling into an input containing the text that it once held.
This works fine.
However, upon deselection of the input, I require it to go back to being text again, but the issue is, the const variable is being overwritten somehow?
Anyway, here is my current HTML and JS:
$(function() {
$(document).on("click", "table.table-striped > tbody > tr > td > a.copy-btn", function(e) {
e.preventDefault();
const $this = $(this),
text = $this.parent().parent().find("td.link").text();
$this.parent().parent().find("td.link").html(`<input type="text" class="form-control" value="${text}">`);
$this.parent().parent().find("td.link input").select();
if ($this.parent().parent().find("td.link input").blur()) {
$this.parent().parent().find("td.link").html(text);
}
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th class="title">link name</th>
<th class="title">Platform</th>
<th class="title">Link</th>
</tr>
</thead>
<tbody>
<tr>
<th class="body-text" scope="row">1</th>
<td class="body-text">Mark</td>
<td class="body-text link">Otto</td>
<td class="body-text">Copy
</td>
<td class="body-text">More
</td>
</tr>
<tr>
<th class="body-text" scope="row">1</th>
<td class="body-text">Otto</td>
<td class="body-text link">Mark</td>
<td class="body-text">Copy
</td>
<td class="body-text">More
</td>
</tr>
</tbody>
</table>

The line $this.parent().parent().find("td.link input").blur() will always return true.
It fires the blur event, and returns the jQuery collection.
If you wanted to check if the element was focused, the easiest would be just
$this.parent().parent().find("td.link input").get(0) === document.activeElement
However, that's not really what you want, you want an event handler instead, and you can add that during the creation of the element like this (with cleaned up code and cached elements etc)
$(function() {
$(document).on("click", "table.table-striped > tbody > tr > td > a.copy-btn", function(e) {
e.preventDefault();
var $this = $(this),
parent = $this.parent().parent(),
link = parent.find("td.link"),
text = link.text(),
input = $('<input />', {
'class' : 'form-control',
value : text,
type : 'text',
on : {
blur : function() {
$(this).parent().html(text);
}
}
});
link.html(input);
input.select().focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th class="title">link name</th>
<th class="title">Platform</th>
<th class="title">Link</th>
</tr>
</thead>
<tbody>
<tr>
<th class="body-text" scope="row">1</th>
<td class="body-text">Mark</td>
<td class="body-text link">Otto</td>
<td class="body-text">Copy
</td>
<td class="body-text">More
</td>
</tr>
<tr>
<th class="body-text" scope="row">1</th>
<td class="body-text">Otto</td>
<td class="body-text link">Mark</td>
<td class="body-text">Copy
</td>
<td class="body-text">More
</td>
</tr>
</tbody>
</table>

Change
if ($this.parent().parent().find("td.link input").blur()) {
$this.parent().parent().find("td.link").html(text);
}
to
var $input = $this.parent().parent().find("td.link input");
$input.off("blur")
$input.on("blur", function () {
$this.parent().parent().find("td.link").html(text);
});

Is something like this what you had in mind?
$(function() {
$(document).on("click", "table.table-striped > tbody > tr > td > a.copy-btn", function(e) {
e.preventDefault();
const $this = $(this),
text = $this.parent().parent().find("td.link").text();
$this.parent().parent().find("td.link").html('<input type="text" class="form-control" value="' + $.trim(text) + '">');
$this.parent().parent().find("td.link input").select();
$($this).closest('tr').find('.form-control').on('blur', function () {
var xThis = this;
var finText = $(xThis).val();
$(xThis).closest('td').html(finText);
$(xThis).off('blur');
});
return false;
});
})();
See my jsfiddle example: https://jsfiddle.net/fictus/mmwc06gm/

Filter by column using checkboxes

I would like to be able to filter my table of data with the use of checkboxes.
#{
var schools = CurrentPage.Children.OrderBy("kommun");
}
<dl class="dropdown">
<dt>
<a href="#">
<span class="hida">Select</span>
<p class="multiSel"></p>
</a>
</dt>
<dd>
<div class="mutliSelect">
<ul>
<li>
<input type="checkbox" value="Linköping" />Linköping
</li>
<li>
<input type="checkbox" value="Norrköping" />Norrköping
</li>
<li>
<input type="checkbox" value="Mjölby" />Mjölby
</li>
</ul>
</div>
</dd>
<button>Filter</button>
</dl>
<div id="no-more-tables" class="sorttable">
<table>
<thead>
<tr>
<th style="width: 15%;" data-sort-initial="true">
Kommun
</th>
<th style="width: 20%;">
Skola
</th>
<th style="width: 15%;">
Datum
</th>
<th style="width: 15%;" data-sort-ignore="true">
Tid
</th>
<th style="width: 20%;" data-sort-ignore="true">
Adress
</th>
<th style="width: 15%;" data-sort-ignore="true">
Övrigt
</th>
</tr>
</thead>
<tbody>
#foreach (var school in schools)
{
var times = school.Children.Where("date > DateTime.Now.Date").OrderBy("date");
foreach (var time in times)
{
<tr>
<td data-title="Kommun">
#if (!string.IsNullOrEmpty(school.kommun))
{
#school.kommun
}
else
{
<text> </text>
}
</td>
<td data-title="Skola">
#if (!string.IsNullOrEmpty(school.Name))
{
#school.Name
}
else
{
<text> </text>
}
</td>
<td data-title="Datum">
#if (time.date != null)
{
#time.date.ToString("yyyy-MM-dd")
}
else
{
<text> </text>
}
</td>
<td data-title="Tid">
#if (!string.IsNullOrEmpty(time.time))
{
#time.time
}
else
{
<text> </text>
}
</td>
<td data-title="Adress">
#if (!string.IsNullOrEmpty(school.adress))
{
#school.adress
}
else
{
<text> </text>
}
</td>
<td data-title="Övrigt">
#if (!string.IsNullOrEmpty(school.oevrigt.ToString()))
{
#school.oevrigt
}
else
{
<text> </text>
}
</td>
</tr>
}
}
</tbody>
</table>
Where do I go from here? I've never worked with filters before but I'm assuming I have to check the value from the filter with the table of data. I also know I need JavaScript too because I don't want the page to reload every time the user picks a filter.
I would appreciate any help

Using just javascript
/* Demo filtering table using checkboxes. Filters against first td value */ /* Demo filtering table using checkboxes. Filters against first td value */
/* Set 'ready' handler' */
document.addEventListener('DOMContentLoaded', initFunc);
/* When document ready, set click handlers for the filter boxes */
function initFunc(event) {
var filters = document.getElementsByName('tablefilter');
for (var i = 0; i < filters.length; i++) {
filters[i].addEventListener('click', buildAndExecFilter);
}
}
/*
This function gets called when clicking on table filter checkboxes.
It builds a list of selected values and then filters the table based on that
*/
function buildAndExecFilter() {
var show = [];
var filters = document.getElementsByName('tablefilter');
for (var i = 0; i < filters.length; i++) {
if (filters[i].checked) {
show.push(filters[i].value);
}
}
execFilter(show); // Filter based on selected values
}
function execFilter(show) {
/* For all rows of table, see if td 0 contains a selected value to filter */
var rows = document.getElementById('tablebody').getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
var display = ""; // Default to display
// If it is not found in the selected filter values, don't show it
if (show.indexOf(rows[i].children[0].textContent) === -1) {
display = "none";
}
// Update the display accordingly
rows[i].style.display = display;
}
}
<input name='tablefilter' type='checkbox' value='1' id='tablefilter1' checked/>
<label for='tablefilter1'>1</label>
<input name='tablefilter' type='checkbox' value='2' id='tablefilter2' checked/>
<label for='tablefilter2'>2</label>
<input name='tablefilter' type='checkbox' value='3' id='tablefilter3' checked/>
<label for='tablefilter3'>3</label>
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody id='tablebody'>
<tr>
<td>1</td>
<td>One</td>
<td>First</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
<td>Second</td>
</tr>
<tr>
<td>3</td>
<td>Three</td>
<td>Third</td>
</tr>
</tbody>
</table>

HTML table and external Php file that change value

I have table like this:
<table border="1">
<tr align="left" valign="top">
<th>ID</th>
<th>NAME</th>
<th>VALUE</th>
</tr>
<tr align="left" valign="top">
<td>1</td>
<td>Item 1</td>
<td><button>-</button> 5 <button>+</button></td>
</tr>
</table>
It is generated by Php and all information are from MySql DB..
I would like to activate buttons "-" and "+", so when I click minus, value 5 (in this case) will became 4 or when I click plus value 5 will became 6, and also in MySql DB some external php file will change values in real time..
I tried with some AJAX scripts, but I am stuck..
Please help.. Thanks..

Try storing first the value in an HTML element like <span></span>, and assign class tag for the + and - button:
<table border="1">
<tr align="left" valign="top">
<th>ID</th>
<th>NAME</th>
<th>VALUE</th>
</tr>
<tr align="left" valign="top">
<td>1</td>
<td>Item 1</td>
<td><button class="minus">-</button> <span>5</span> <button class="plus">+</button></td>
</tr>
</table>
Then create the script:
$(document).ready(function(){
$(document).on("click", ".minus", function(){ /* WHEN MINUS IS CLICKED */
var elem = $(this); /* THE ELEMENT CLICKED */
var id = elem.parent().siblings(":first").text(); /* ID OF THIS ROW IN THE DATABASE */
var current_no = Number(elem.closest("td").find("span").html()); /* CURRENT VALUE OF THIS ROW */
var new_no = current_no - 1; /* REDUCE ONE VALUE */
elem.closest("td").find("span").html(new_no); /* REPLACE WITH THE NEW NUMBER INSIDE THE SPAN */
});
$(document).on("click", ".plus", function(){ /* WHEN PLUS IS CLICKED */
var elem = $(this); /* THE ELEMENT CLICKED */
var id = elem.parent().siblings(":first").text(); /* ID OF THIS ROW IN THE DATABASE */
var current_no = Number(elem.closest("td").find("span").html()); /* CURRENT VALUE OF THIS ROW */
var new_value = current_no + 1; /* ADD ONE VALUE */
elem.closest("td").find("span").html(new_no); /* REPLACE WITH THE NEW NUMBER INSIDE THE SPAN */
});
});
For updating the data in your MySQL database in real-time, you need to use AJAX.
$.ajax({ /* START AJAX */
type: "POST", /* METHOD TO USE TO PASS THE DATA */
url: "update.php", /* FILE DESTINATION OF THE DATA */
data: {"id": id, "value": new_value} /* THE DATA TO BE PASSED ON */
}); /* END OF AJAX */
On the update.php file, it must contain the UPDATE query:
/*** YOUR ESTABLISHED CONNECTION HERE ***/
$stmt = $connection->prepare("UPDATE table SET value = ? WHERE id = ?");
$stmt->bind_param("ii", $_POST["value"], $_POST["id"]);
$stmt->execute();
Here is a jsfiddle (but without the AJAX).

If you use a form to fetch this value, you can use the <input type="number" />:
<table border="1">
<tr align="left" valign="top">
<th>ID</th>
<th>NAME</th>
<th>VALUE</th>
</tr>
<tr align="left" valign="top">
<td>1</td>
<td>Item 1</td>
<td><input type="number" value="5" /></td>
</tr>
</table>
Modern web browsers will display buttons to decrease or increase the value.

Using JS/jQuery:
/* JS: */
var counter = 5;
$(".down").on("click", function() {
if (counter > 0) {
counter--;
$('.anumber').text(counter);
}
});
$(".up").on("click", function() {
counter++;
$('.anumber').text(counter);
});
<!-- HTML: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr align="left" valign="top">
<th>ID</th>
<th>NAME</th>
<th>VALUE</th>
</tr>
<tr align="left" valign="top">
<td>1</td>
<td>Item 1</td>
<td>
<button class="down">-</button> <span class="anumber">5</span>
<button class="up">+</button>
</td>
</tr>
</table>
JSFiddle

Better if you can change your html and add some classes, check the following suggestion :
$(function(){
$('body').on('click' ,'.minus', function(){
var current_number = parseInt($(this).parent().find('.number').text());
current_number--;
$(this).parent().find('.number').text(current_number);
});
$('body').on('click' ,'.plus', function(){
var current_number = parseInt($(this).parent().find('.number').text());
current_number++;
$(this).parent().find('.number').text(current_number);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr align="left" valign="top">
<th>ID</th>
<th>NAME</th>
<th>VALUE</th>
</tr>
<tr align="left" valign="top">
<td>1</td>
<td>Item 1</td>
<td>
<button class='minus'>-</button>
<span class='number'>5</span>
<button class='plus'>+</button>
</td>
</tr>
</table>
Hope this helps.