Develop Reference

Automatic row highlighting

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.)

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

How to UNDO the added row(s) WITHOUT DELETING the table heading

Right now, i have a reset button to reset all rows that have been added. The problem is it also deletes my table heading which i want to keep.
Any ideas to keep the table heading?Thanks guys.
$('#add-row').click(function() {
var $tbody, $row, additionalRows;
var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);
if (isNaN(numNewRows) || numNewRows <= 0) {
alert('Please enter number of injection');
} else {
$tbody = $('table#one tbody ');
$row = $tbody.find('tr:last');
var lastRowIndex = ($row.index() == -1 ? 0 : $row.index()) + 1;
additionalRows = new Array(numNewRows);
for (i = 0; i < numNewRows; i++) {
additionalRows[i] = ` <tr>
<td>${lastRowIndex}</td>
<td>
<input type="text" style="width: 100px" name="vaccineid[]"></td>
<td><input type="text" style="width:160px"name="vaccinename1[]"> </td>
</tr>`
lastRowIndex = lastRowIndex + 1;
}
$tbody.append(additionalRows.join());
}
});
$('[name="reset"]').click(function() {
$('#one tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">Add Row</button>
<button type="reset" name="reset">Reset Row</button>
<table id="one">
<thead>
<th>No.</th>
<th>Name</th>
<th>Gender</th>
</thead>
<tbody>
</tbody>
</table>

Just select <TBODY>
$('#one tbody tr').remove();

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.