Automatic row highlighting - javascript

What I need is I want to automatically highlight the entire row that has 'KIV' value. The 'KIV' value is fetched from the database under 'masalah' field.
Here is my code:
<table id="myTable" class="w3-table-all w3-small w3-striped w3-hoverable w3-responsive">
<thead>
<tr>
<th></th>
<th></th>
<th class="text-center">Daerah</th>
<th class="text-center">Checkers</th>
<th>Nama Pesara</th>
<th class="text-center">No. Kad Pengenalan</th>
<th>No. Fail</th>
<th>Jawatan</th>
<th >Tarikh Bersara</th>
<th>Jenis Bersara</th>
<th>Umur Bersara</th>
<th >Tarikh Dokumen Diterima</th>
<th>Tarikh Kuiri</th>
<th >Tarikh Dokumen Lengkap</th>
<th >Tarikh Hantar KPM</th>
<th >Tarikh Sokongan KPM</th>
<th >Tarikh Hantar KWAP</th>
<th >Tarikh Lulus KWAP</th>
<th>Catatan</th>
</tr>
</thead>
<tbody>
<?php
include('connection.php');
if (isset($_GET['page_no']) && $_GET['page_no']!="") {
$page_no = $_GET['page_no'];
} else {
$page_no = 1;
}
$total_records_per_page = 20;
$offset = ($page_no-1) * $total_records_per_page;
$previous_page = $page_no - 1;
$next_page = $page_no + 1;
$adjacents = "2";
$result_count = mysqli_query($con,"SELECT COUNT(*) As total_records FROM rekod_pesara");
$total_records = mysqli_fetch_array($result_count);
$total_records = $total_records['total_records'];
$total_no_of_pages = ceil($total_records / $total_records_per_page);
$second_last = $total_no_of_pages - 1; // total page minus 1
$result = mysqli_query($con,"SELECT * FROM rekod_pesara LIMIT $offset, $total_records_per_page");
while($row = mysqli_fetch_array($result)){
echo "<tr>
'<td><a href="datarekod.php?id='.$row['id'].'" class="btn btn-primary" ></a></td>' .
"<td class='a'>".$row['masalah']."</td>
<td>".$row['daerah']."</td>
<td>".$row['checkers']."</td>
<td>".$row['nama_pesara']."</td>
<td>".$row['no_kp']."</td>
<td>".$row['no_fail']."</td>
<td>".$row['jawatan']."</td>
<td>".$row['tarikh_bersara']."</td>
<td>".$row['jenis_bersara']."</td>
<td>".$row['umur_bersara']."</td>
<td>".$row['tar_terima_dok']."</td>
<td>".$row['tar_kuiri']."</td>
<td>".$row['tar_lengkap_dok']."</td>
<td>".$row['tar_hantar_KPM']."</td>
<td>".$row['tar_sokongan_KPM']."</td>
<td>".$row['tar_hantar_KWAP']."</td>
<td>".$row['tar_lulus_KWAP']."</td>
<td>".$row['catatan']."</td>
</tr>";
}
mysqli_close($con);
?>
<script type="text/javascript">
$('td a').click(function(e){
// prevent browser following link
e.preventDefault();
//open in new window
window.open(this.href,"","width=1000,height=650,top=100,left=100" );
});
</script>
</tbody>
</table>
Output as follows
But, what I need is the entire row with 'KIV' value only will be highlighted. I hope anyone can help me.. thank you in advance..

It's a simple case of using an if statement, or, as in my example below, shortening that to a ternary operator
"<td class='a'".($row['masalah'] == "KIV" ? "style='background-color:red'" : "").">"
N.B. If you want to do it on the whole row you'll need to set the style on the enclosing <tr> rather than a single <td>, but the basic approach is the same. (Your example code doesn't contain any <tr>s but I assume you must have omitted them for brevity.)

Related

how can i add each value entered in my TD using javascript?

i have a list of rows and columns. basically the first_value and second_value column is an input type where the user can enter and the total column is a span. how can i add the first_value and second_value column to its specific row?
ID| first_value | second value | total
1 0 50 50
2 20 0 20
3 10 0 10
4 20 10 30
5 10 0 10
here is my html/php code
<table class="table table-striped" id="user_set_goal_table" width="100%">
<thead>
<tr>
<th>#</th>
<th>First_value</th>
<th>Second_value</th>
<th>total</th>
</thead>
<tbody>
for($i=1;$i<=16;$i++){
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo "<input type='text' class='navigate_TD_ID' id='first_value".$i."' "; ?></td>
<td><?php echo "<input type='text' class='navigate_TD_ID' id='second_value".$i."' "; ?></td>
<td><?php echo "<span id='total".$i." '></span>"?></td>
</tr>
<?php
}
</tbody>
javascript code:
$('.navigate_TD_ID').on('change', function() {
var input_id = $(this).attr('id');
alert(input_id);
});
i can already get which id the user click on TD but i dont know how will i implement this calculations, i mean how can i calculate and display to its specific position in row. any help would be really appreciated.
To achieve this you can use jQuery's DOM traversal methods to find the span relative to the input that raised the event. Specifically, use the this reference along with closest() and find().
Also note that it's better practice to use common classes on repeated content, instead of generating dynamic id attributes. Try this:
$('.first, .second').on('input', function() {
var $tr = $(this).closest('tr');
var f = parseFloat($tr.find('.first').val()) || 0;
var s = parseFloat($tr.find('.second').val()) || 0;
$tr.find('.total').text(f + s);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="user_set_goal_table" width="100%">
<thead>
<tr>
<th>#</th>
<th>First_value</th>
<th>Second_value</th>
<th>total</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" class="navigate first" /></td>
<td><input type="text" class="navigate second" /></td>
<td><span class="total"></span></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" class="navigate first" /></td>
<td><input type="text" class="navigate second" /></td>
<td><span class="total"></span></td>
</tr>
</tbody>
</table>
Quick example with vanilla js and without PHP
<table class="table table-striped" id="user_set_goal_table" width="50%">
<thead style="text-align:left;">
<tr>
<th>#</th>
<th>First_value</th>
<th>Second_value</th>
<th>total</th>
</thead>
<tbody>
</tbody>
</table>
<script>
// table body
let tbody = document.querySelectorAll('table tbody')[0];
// trs
let rows = tbody.children;
// fill table body
for(let j = 0; j < 16; j++)
{
tbody.innerHTML += `
<td>${j}</td>
<td><input type="text" class="first"></td>
<td><input type="text" class="second"></td>
<td><span></span></td>
`;
}
for(let i = 0; i < rows.length; i++)
{
let firstInput = rows[i].children[1].firstElementChild;
let secondInput = rows[i].children[2].firstElementChild;
let total = rows[i].children[3].firstElementChild;
[firstInput, secondInput].forEach((elem) => {
elem.addEventListener('input' ,(e) => {
let first = e.target.value;
let second = (e.target.className == "first") ? secondInput.value : firstInput.value;
total.innerText = parseFloat(first) + parseFloat(second);
});
});
}
Result:

How can I change my code into clickable row from input checkbox row in jquery?

I have a table and the data in this table is from database. I want to click this row and transfer it to other table. I can transfer this row using input checkbox. I'd realize that it will be easy and convenient to transfer the rows by just clicking it without checkbox. I have a hard time converting it to a clickable instead of checkbox.
I tried using this code
$(document).ready(function() {
$( "#table1 tbody tr" ).on( "click", function( event ) {
var product = $(this).attr('data-product');
var price = $(this).attr('data-price');
var barcode = $(this).attr('data-barcode');
var unit = $(this).attr('data-unt');
var qty = prompt("Enter number of items",1);
var total = qty*price;
$('#tableData').append("<tr><td>"+barcode+"</td><td>"+product+"</td><td>₱"+price+"</td><td>"+unit+"</td><td>"+qty+"</td><td>₱"+total+"</td><tr>");});
This is my jquery that I wanted to convert into clickable code.
function add(){
$('input:checked[name=tab1]').each(function() {
var product = $(this).attr('data-product');
var price = $(this).attr('data-price');
var barcode = $(this).attr('data-barcode');
var unit = $(this).attr('data-unt');
var qty = prompt("Enter number of items",1);
var total = qty*price;
$('#tableData').append("<tr><td>"+barcode+"</td><td>"+product+"</td><td>₱"+price+"</td><td>"+unit+"</td><td>"+qty+"</td><td>₱"+total+"</td><tr>"); });}
My PHP code.
<?php
include('server/connection.php');
if (isset($_POST['products'])){
$name = mysqli_real_escape_string($db,$_POST['products']);
$num = 1;
$show = "SELECT * FROM products WHERE product_name LIKE '$name%' ";
$query = mysqli_query($db,$show);
if(mysqli_num_rows($query)>0){
while($row = mysqli_fetch_array($query)){
$total = $num*$row['sell_price'];
echo "<tr id='sas'><td>".$row['id']."</td><td>".$row['product_name']."</td>";
echo "<td>₱".$row['sell_price']."</td>";
echo "<td>".$row['unit']."</td>";
echo "<td>".$row['quantity']."</td>";
echo "<td><input type='checkbox' name='tab1' data-barcode='".$row['id']."' data-product='".$row['product_name']."' data-price='".$row['sell_price']."' data-unt='".$row['unit']."' data-qty='".$num."' data-total='".$total."'/></td></tr>";
}
}
else{
echo "<td></td><td>No Products found!</td><td></td>";
}
}
My Table
<table id="table1">
<thead>
<tr>
<td>Barcode</td>
<td>Product Name</td>
<td>Price</td>
<td>Unit</td>
<td>Stocks</td>
<td>Action</td>
</tr>
</thead>
<tbody id="products">
</tbody>
</table>
<table id="table2">
<thead>
<tr>
<th>Barcode</th>
<th>Description</th>
<th>Price</th>
<th>Unit</th>
<th>Qty</th>
<th>Sub.Total</th>
</tr>
</thead>
<tbody id="tableData">
</tbody>
</table>
I expect by just clicking the row it will automatically transfer to the table2 with a dialog box using prompt that will ask for quantity of a product then it will be printed to the second table along with the entire row.
This is my UI with css.
You are on the right way, just fix JS selectors using $(this) and formating the price...
$("#table1 .js-add").on("click", function() {
var target = $(this);
var product = target.attr('data-product');
var price = target.attr('data-price');
var barcode = target.attr('data-barcode');
var unit = target.attr('data-unt');
var qty = prompt("Enter number of items", 1);
var total = qty * price;
$('#tableData').append("<tr><td>" + barcode + "</td><td>" + product + "</td><td>" + price + "</td><td>" + unit + "</td><td>" + qty + "</td><td>" + total.toFixed(2) + "</td><tr>");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<table id="table1" class="table">
<thead>
<tr>
<th>Barcode</th>
<th>Product Name</th>
<th>Price</th>
<th>Unit</th>
<th>Stocks</th>
<th>Action</th>
</tr>
</thead>
<tbody id="products">
<tr>
<td>123412</td>
<td>Test</td>
<td>12.99</td>
<td>1</td>
<td>10</td>
<td>
<input name='tab1' type="checkbox" class='js-add' data-barcode="123412" data-product="Test" data-price="12.99" data-unt="1"/>
</td>
</tr>
</tbody>
</table>
<br>
<table id="table2" class="table">
<thead>
<tr>
<th>Barcode</th>
<th>Description</th>
<th>Price</th>
<th>Unit</th>
<th>Qty</th>
<th>Sub.Total</th>
</tr>
</thead>
<tbody id="tableData">
</tbody>
</table>
You need to use event.target instead of this in the function.
$(document).ready(function() {
$( "#table1 tbody tr" ).on( "click", function( event ) {
var target = event.target;
var product = target.attr('data-product');
var price = target.attr('data-price');
var barcode = target.attr('data-barcode');
var unit = target.attr('data-unt');
var qty = prompt("Enter number of items",1);
var total = qty*price;
$('#tableData').append("<tr><td>"+barcode+"</td><td>"+product+"</td><td>₱"+price+"</td><td>"+unit+"</td><td>"+qty+"</td><td>₱"+total+"</td><tr>");});
On tr click event, you are using data-product and other selectors. data-product is not defined for tr. You have to add data-product attribute for each row. You can refer this - JQuery: Find (the index of) a row with a specific data attribute value

Javascript/jQuery/Datatables sum values triggered by checkboxes

I can't figure out how to correct my javascript to make it work correctly. My goal is to have a sum of values in the table footer, picking up only checked rows. Single rows selection works fine, but using the thead checkbox to add 'checked' property to every row displayed it doesn't trigger the action. Here is my code:
Javascript
//check all
$("#check-all").click(function () {
$(".data-check").prop('checked', $(this).prop('checked'));
});
$('#sumchecked').html('KG selezione: ');
$('#inventario', 'thead').on('change', 'input[type="checkbox"]', function(){
var totalSUM = 0;
$('#sumchecked').html('KG selezione: ' +totalSUM.toFixed(3));
$('tr:has(:checked)').each(function () {
var getValue = parseFloat($(this).find("td:eq(3)").html().replace(",", "."));
totalSUM += getValue;
$('#sumchecked').html('KG selezione: ' +totalSUM.toFixed(3));
});
});
HTML Markup
<table id="inventario" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th><input type="checkbox" id="check-all"></th>
<th>N° Collo</th>
<th>Ordine</th>
<th>KG</th>
<th>Operatore</th>
<th><span style="font-size:1.5em;" title="Cimosa" class="icon-scissors-cutting-by-broken-line"></span></th>
<th><span style="font-size:1.5em;" title="Specola" class="icon-silk"></span></th>
<th>Falli</th>
<th>Note</th>
<th>Data Produzione</th>
<th>Stato</th>
<th>Consegna</th>
<th>Azioni</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th></th>
<th><div id="sumchecked"></div></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
Php controller in Codeigniter, ajax_list function used to generate table data
public function ajax_list()
{
$list = $this->packing->get_datatables();
$data = array();
$no = $_POST['start'];
foreach ($list as $pezza) {
$no++;
$row = array();
$row[] = '<input type="checkbox" class="data-check" value="'.$pezza->n_pezza.'">';
$row[] = $pezza->n_pezza;
$row[] = $pezza->ID_ordine;
$row[] = number_format($pezza->kg_pezza,3,",",".");
$row[] = $pezza->nome_operatore;
if($pezza->selvedge == '1'){
$row[] = '<span style="font-size:1.5em;" class="glyphicon glyphicon-ok-sign"></span>';
}else{
$row[] = '';
}
if($pezza->specola == '1'){
$row[] = '<span style="font-size:1.5em;" class="glyphicon glyphicon-ok-sign"></span>';
}else{
$row[] = '';
}
$row[] = $pezza->falli;
$row[] = $pezza->note;
$row[] = $this->conversione1($pezza->data);
if ($pezza->stato == '1'){
$row[] = '<span style="font-size:1.5em;" title="Consegnata"class="icon-logistics-delivery-truck-in-movement"></span>';
$row[] = $this->conversione2($pezza->data_consegna);
}else{
$row[] = '<span style="font-size:1.5em;" title="Magazzino" class="icon-warehouse"></span>';
$row[] = '';
}
$row[] = '<div class="btn-group btn-group-justified" style="width:136px">
<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Modifica" onclick="modifica_pezza('."'".$pezza->n_pezza."'".')"><i class="glyphicon glyphicon-pencil"></i></a>
<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Info Filati" onclick="info_pezza('."'".$pezza->n_pezza."'".')"><i class="glyphicon glyphicon-info-sign"></i></a>
<a class="btn btn-sm btn-danger" href="javascript:void(0)" title="Cancella" onclick="cancella_pezza('."'".$pezza->n_pezza."'".')"><i class="glyphicon glyphicon-trash"></i></a>
</div>';
$data[] = $row;
}
$output = array(
"draw" => $_POST['draw'],
"recordsTotal" => $this->packing->count_all(),
"recordsFiltered" => $this->packing->count_filtered(),
"data" => $data,
);
//output to json format
echo json_encode($output);
}
This is my output if I check the first checkbox in thead
output sum checkboxes
Suggestions?
Thanks to everyone who will take some time to read and solve my problem.
Andy
It's easier to generate HTML code in #sumchecked on server side and put the attribute visibility: hidden to it. When you select a row, you do not need to run through all the selected rows every time. To minimize DOM traversing, it is better to request the current value of the total sum, and then add / subtract the price of the selected item to / from it. To get the sum of all selected items, simply insert in #checked-prices-total-sum the value from #totalkg.
For example, I took a 3 rows from your HTML table only with price columns and changed the code of your script:
$(document).ready(function() {
$("#check-all").click(function() {
var isChecked = $(this).prop('checked');
$(".data-check").prop('checked', isChecked);
var $sumchecked = $('#sumchecked');
var $totalSum = $('#checked-prices-total-sum');
if (isChecked) {
$totalSum.html($('#totalkg').html());
$sumchecked.css('visibility', 'visible');
} else {
$totalSum.html(0);
$sumchecked.css('visibility', 'hidden');
}
});
$('#inventario-data').on('change', 'input[type="checkbox"]', function(){
var $sumchecked = $('#sumchecked');
var $totalSum = $('#checked-prices-total-sum');
var totalSumValue = parseFloat($totalSum.html());
var price = parseFloat($(this).parent().next().next().html().replace(",", "."));
if ($(this).is(':checked')) {
totalSumValue += price;
} else {
totalSumValue -= price;
}
$totalSum.html(totalSumValue.toFixed(3));
totalSumValue > 0 ? $sumchecked.css('visibility', 'visible') : $sumchecked.css('visibility', 'hidden');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table id="inventario" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th><input type="checkbox" id="check-all"></th>
<th>N° Collo</th>
<th>Ordine</th>
</tr>
</thead>
<tbody id="inventario-data">
<tr>
<td><input type="checkbox" class="data-check"></td>
<td>test</td>
<td>10,200</td>
</tr>
<tr data-rowid="2">
<td><input type="checkbox" class="data-check"></td>
<td>test</td>
<td>30,400</td>
</tr>
<tr data-rowid="3">
<td><input type="checkbox" class="data-check"></td>
<td>test</td>
<td>50,600</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th><div id="sumchecked" style="visibility: hidden;">KG selezione: <span id="checked-prices-total-sum">0</span></div></th>
<th>Tot. KG <span id="totalkg">91,200</span></th>
</tr>
</tfoot>
</table>

Codeigniter Pagination in loaded Ajax page Table

PS. I know there are abundant answers for this but they seemed so complex and I'm just a beginner in codeigniter and jquery with semantic UI so I'm having difficulty in web development.
I want to know how you can implement pagination in my code from the page which is loaded with an ajax function. I find it very difficult combining ajax with codeigniter and im not a very skilled programmer so please help me on this.
The java script which it loads all the data
function viewhardware(){
$.ajax({
type: "GET",
url: "gethw",
async: true,
}).done(function( data ) {
$('#hardware').html(data);
});
}
The Controller function
public function gethw(){
$this->load->model('asset_model');
$this->data['hwares'] = $this->asset_model->get_allhw();
$this->load->view('gethware',$this->data);
}
My Model function
public function get_allhw(){
$this->db->select('*');
$this->db->from('hardware h');
$query = $this->db->get();
if($query->num_rows() != 0)
{
return $query->result_array();
}
else
{
return false;
}
}
and the VIEW
<table class="ui compact table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Description</th>
<th>Date Installed</th>
<th>Serial No.</th>
<th>PC ID</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<center><i class="huge desktop icon""></i><h3>Hardwares</h3>
<hr>
<?php
if(!empty($hwares)){
foreach($hwares as $hwares){
$hw_id = $hwares['hw_id'];
$hw_name = $hwares['hw_name'];
$hw_description = $hwares['hw_description'];
$hw_dateinstalled = $hwares['hw_dateinstalled'];
$hw_serialno = $hwares['hw_serialno'];
$hw_comp_id = $hwares['hw_comp_id'];
$hw_status = $hwares['hw_status'];
?>
<tr>
<th>
<?php echo $hw_id; ?>
</th>
<th>
<?php echo $hw_name; ?>
</th>
<th>
<?php echo $hw_description; ?>
</th>
<th>
<?php echo $hw_dateinstalled; ?>
</th>
<th>
<?php echo $hw_serialno; ?>
</th>
<th>
<?php echo $hw_comp_id;?>
</th>
<th>
<button class="ui basic button">
<center><i class=" <?php if($hw_status==1){ echo 'green';}else{ echo 'red'; }; ?>
desktop icon"></i>
</button>
</th>
<th><a id="editpc" class="ui button mini yellow"><i class="write icon"></i></a>
<a class="ui mini red button" href="#"><i class="remove icon"></i></a></th>
</tr>
<?php
}
}
?>
</tbody>
</table>
You can use Ajax_pagination library.
Here you will find example of how to use it.
Your controller should looks like:
function __construct() {
parent::__construct();
$this->load->library('Ajax_pagination');
$this->perPage = 1;
}
public function gethw(){
$this->load->model('asset_model');
//total rows count
$totalRec = count($this->asset_model->getRows());
//pagination configuration
$config['first_link'] = 'First';
$config['div'] = 'div-to-refresh'; //parent div tag id
$config['base_url'] = base_url().'controller/ajaxPaginationData';
$config['total_rows'] = $totalRec;
$config['per_page'] = $this->perPage;
$this->ajax_pagination->initialize($config);
//get the posts data
$this->data['hwares'] = $this->asset_model->getRows(array('limit'=>$this->perPage));
$this->load->view('view1',$this->data);
}
function ajaxPaginationData()
{
$page = $this->input->post('page');
if(!$page){
$offset = 0;
}else{
$offset = $page;
}
//total rows count
$totalRec = count($this->asset_model->getRows());
//pagination configuration
$config['first_link'] = 'First';
$config['div'] = 'div-to-refresh'; //parent div tag id
$config['base_url'] = base_url().'controller/ajaxPaginationData';
$config['total_rows'] = $totalRec;
$config['per_page'] = $this->perPage;
$this->ajax_pagination->initialize($config);
//get the posts data
$this->data['hwares'] = $this->asset_model->getRows(array('start'=>$offset,'limit'=>$this->perPage));
//load the view
$this->load->view('view2', $this->data, false);
}
You have to split your view in 2 parts
VIEW1
<div id="hardware">
<div id="div-to-refresh">
<?php $this->load->view('view2',$this->data); ?>
</div>
<div id="pagination"><?php echo $this->ajax_pagination->create_links(); ?></div>
</div>
view2
<table class="ui compact table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Description</th>
<th>Date Installed</th>
<th>Serial No.</th>
<th>PC ID</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<center><i class="huge desktop icon""></i><h3>Hardwares</h3>
<hr>
<?php
if(!empty($hwares)){
foreach($hwares as $hwares){
$hw_id = $hwares['hw_id'];
$hw_name = $hwares['hw_name'];
$hw_description = $hwares['hw_description'];
$hw_dateinstalled = $hwares['hw_dateinstalled'];
$hw_serialno = $hwares['hw_serialno'];
$hw_comp_id = $hwares['hw_comp_id'];
$hw_status = $hwares['hw_status'];
?>
<tr>
<th>
<?php echo $hw_id; ?>
</th>
<th>
<?php echo $hw_name; ?>
</th>
<th>
<?php echo $hw_description; ?>
</th>
<th>
<?php echo $hw_dateinstalled; ?>
</th>
<th>
<?php echo $hw_serialno; ?>
</th>
<th>
<?php echo $hw_comp_id;?>
</th>
<th>
<button class="ui basic button">
<center><i class=" <?php if($hw_status==1){ echo 'green';}else{ echo 'red'; }; ?>
desktop icon"></i>
</button>
</th>
<th><a id="editpc" class="ui button mini yellow"><i class="write icon"></i></a>
<a class="ui mini red button" href="#"><i class="remove icon"></i></a></th>
</tr>
<?php
}
}
?>
</tbody>
</table>
I can not write all code for you but this can help you.
Make changes in your model to match with this.

automatically multiply two values to give a total jquery

I have a jQuery question an was wondering if anyone could help me out.
I have an html table with information in it specifically for stones. I have a price per carat and a price per stone at the end of the table. I wish to have the price per carat multiply by the weight to give the price per stone. I also have a markup box that i have created in which the user inputs a number which is then regarded as a % and is automatically added to the price per carat and price per stone. here is what i have so far:
Here is the jquery
jQuery(document).ready(function () {
jQuery("#markup").keyup(multInputs);
function multInputs() {
var $inmult = jQuery(this).val();
jQuery("tr").each(function () {
var $val1 = jQuery('.price .amount', this).text().substring(1);
var $mult = $inmult / 100;
$mult += 1;
var $total = $val1 * $mult;
jQuery('.adjprice .amount', this).text("$" + $total.toFixed(2));
$val1 = jQuery('.org_ct', this).text();
$mult = $inmult / 100;
$mult += 1;
$total = $val1 * $mult;
jQuery('.adj_ct', this).text($total.toFixed(2));
});
}
});
Here is the HTML
<span class="markup">Adjust Price: <input name="markup" id="markup"> % </span>
<table id="myTable" class="tablesorter-blackice">
<thead>
<tr>
<th>Sku#</th>
<th>Availability</th>
<th>Cert #</th>
<th>Shape</th>
<th>Weight</th>
<th>Colour</th>
<th>Clarity</th>
<th>Cut</th>
<th>[MM]</th>
<th style="display:none" class="header">US$/ct</th>
<th class="header">US$/ct</th>
<!--<th>CDN$/ct</th>-->
<th style="display:none" class="header">Hidden Orig Price</th>
<th class="header">US$/St</th>
</tr>
</thead>
<tbody>
<tr>
<td>rerew</td>
<td>erewr</td>
<td>wrer</td>
<td>ewrer</td>
<td>erwer</td>
<td>ere</td>
<td>ewr</td>
<td>ewrew</td>
<td>wreew</td>
<td class="org_ct" style="display:none">
<td class="adj_ct">1234</td>
</td>
<td class="price" style="display:none">
<td class="adjprice">
<span class="amount"></span>
</td>
</td>
</tr>
</tbody>
</table>
The number is not automatically being multiplied to give me a price per stone. also the markup is not working either I really appreciate the help. THANKS!
If I understand your question correctly, this should do what you need. Note that I un-hid some of the columns to make it easier to work with, you'll need to hide them again.
jQuery(document).ready(function () {
function iDoMathsGood() {
$('.amount').map(function () {
// get all of the elements we'll need to manipulate
var row = $(this).parent().parent();
var originalTtl = row.find('.price');
var adjusted = row.find('.adj_ct');
// get the numbers we'll need and do some math
var cts = Number(row.find('.weight').html());
var origPPCT = Number(row.find('.org_ct').html()) * 1000;
var markupPrct = Number($('#markup').val()) / 100;
var markedupCost = (origPPCT * markupPrct) + origPPCT;
// do a little more math them set the results
adjusted.html((markedupCost / 1000).toFixed(2));
originalTtl.html(((origPPCT * cts) / 1000).toFixed(2));
return $(this).html(((markedupCost * cts) / 1000).toFixed(2));
});
}
iDoMathsGood();
$('#markup').keyup(function(){
iDoMathsGood();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="markup">Adjust Price: <input name="markup" id="markup" value="10"/> % </span>
<table id="myTable" class="tablesorter-blackice" border="1">
<thead>
<tr>
<th>Sku#</th>
<th>Availability</th>
<th>Cert #</th>
<th>Shape</th>
<th>Weight</th>
<th>Colour</th>
<th>Clarity</th>
<th>Cut</th>
<th>[MM]</th>
<th class="header">US$/ct</th>
<th class="header">US$/ct</th>
<th class="header">Hidden Orig Price</th>
<th class="header">US$/St</th>
</tr>
</thead>
<tbody>
<tr>
<td>rerew</td>
<td>erewr</td>
<td>ewrer</td>
<td>erwer</td>
<td class="weight">12</td>
<td>ewr</td>
<td>ewr</td>
<td>ewrew</td>
<td>wreew</td>
<td class="org_ct">42.50</td>
<td class="adj_ct"></td>
<td class="price"></td>
<td class="adjprice"> <span class="amount"></span>
</td>
</tr>
<tr>
<td>rerew</td>
<td>erewr</td>
<td>ewrer</td>
<td>erwer</td>
<td class="weight">6</td>
<td>ewr</td>
<td>ewr</td>
<td>ewrew</td>
<td>wreew</td>
<td class="org_ct">32.75</td>
<td class="adj_ct"></td>
<td class="price"></td>
<td class="adjprice"> <span class="amount"></span>
</td>
</tr>
</tbody>
</table>
To begin with, you're calling the multInputs function improperly. Don't forget the () when calling a function (or other method).
jQuery("#markup").keyup(multInputs);
should be
jQuery("#markup").keyup(multInputs());
From there, you've got a few other errors (to begin with):
var $inmult = $(this).val();, you're calling this from within the function but without actually having a "this" to be referred to. If you move this within the "each" function, then you'll have a "this" to refer to.
Of course, make sure you've linked to JQuery! :)
I would also add a class to the weight to make it easy to refer to
I'm not going to debug the whole thing but this should give you a start
$(document).ready(function () {
$("#markup").keyup(multInputs());
function multInputs() {
$("tr").each(function () {
var $inmult = $(this).find('td.weight' ).text();
var $val1 = $('.price .amount', this).text().substring(1);
var $mult = $inmult / 100;
$mult += 1;
var $total = $val1 * $mult;
$('.adjprice .amount', this).text("$" + $total.toFixed(2));
$val1 = $('.org_ct', this).text();
$mult = $inmult / 100;
$mult += 1;
$total = $val1 * $mult;
$('.adj_ct', this).text($total.toFixed(2));
});
}
});

Categories

Resources