I have code like this
<table id='data-table'>
<thead>
<tr>
<th>No</th>
<th>Name Items</th>
<th>Qty</th>
<th>Price</th>
<th>Action</th>
<th>Check</th>
</tr>
</thead>
<tbody>
<php foreach($data as $d) : ?>
<tr>
<td><?= $no++ ?></td>
<td><?= $d['name'] ?></td>
<td><?= $d['qty'] ?></td>
<td><?= $d['price'] ?></td>
<td><button type='button' class='btn' name='up'>up</button></td>
<td><input type='checkbox'></td>
</tr>
<php endforeach ?>
</tbody>
</table>
I want when click button, that qty update data and checkbox if that check then uncheck, I'm use jquery like this but i don't know how can i uncheckbox when button click.
Thank you in advance
$('#data-table tbody').on('click', '.btn[name="up"]', function() {
const row = $(this).closest('tr')[0];
const qty = Number(row.cells[2].innerHTML);
const tqty = qty + 1;
row.cells[2].innerHTML = tqty;
});
You should use jQuery all the way or not at all
Also you are missing <tr></tr>
$('#data-table tbody').on('click', '.btn[name="up"]', function() {
const $row = $(this).closest('tr');
const $cells = $row.find("td");
const $qtyCell = $cells.eq(2);
const qty = +$qtyCell.text()
$qtyCell.text(qty + 1);
$cells.eq(5).find("[type=checkbox]").prop("checked",false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table id='data-table'>
<thead>
<tr>
<th>No</th>
<th>Name Items</th>
<th>Qty</th>
<th>Price</th>
<th>Action</th>
<th>Check</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name 1</td>
<td>5</td>
<td>2.00</td>
<td><button type='button' class='btn' name='up'>up</button></td>
<td><input type='checkbox'></td>
</tr>
<tr>
<td>2</td>
<td>Name 2</td>
<td>8</td>
<td>4.00</td>
<td><button type='button' class='btn' name='up'>up</button></td>
<td><input type='checkbox'></td>
</tr>
</tbody>
</table>
Related
I want to hide an entire row if some of the cells are null. I have tried various method using CSS and JS but none of it is working.
The first column is filled but the other two columns in a row are blank or data will be fetched from mySQL if user inputs the data.
Even if first column is filled entire row should hide if no data is there in other cells in a row.
<div class="container-sm border mb-4">
<div class="table-responsive">
<div class="form-group">
<h3 class="mt-3" style="text-align: center; ">User Complaints</h3>
</div>
<table id="table" class="table">
<thead class="thead-light">
<tr>
<th scope="col" width="300px"> Complaint Type</th>
<th scope="col" width="400px"> Username / IP</th>
<th scope="col"> Remark</th>
</tr>
</thead>
<tbody>
<?php
$con = mysqli_connect("localhost","***","","***");
$sql = "SELECT * FROM comp ORDER BY complaint_id DESC Limit 1 ";
$result = $con -> query($sql);
if($result-> num_rows > 0 ){
while ($row = $result -> fetch_assoc()){
?>
<tr>
<th><label for="">SNMP Settings</label></th>
<td>
<?php echo $row['snmpip']; ?>
</td>
<td>
<?php echo $row['snmpremark']; ?>
</td>
</tr>
<tr>
<th><label for="">IP Settings</label></th>
<td>
<?php echo $row['ipip']; ?>
</td>
<td>
<?php echo $row['ipremark']; ?>
</td>
</tr>
<tr>
<th><label for="">Antivirus Settings</label></th>
<td>
<?php echo $row['antiip']; ?>
</td>
<td>
<?php echo $row['antiremark']; ?>
</td>
</tr>
<tr>
<th><label for="">BTS Settings</label></th>
<td>
<?php echo $row['btsip']; ?>
</td>
<td>
<?php echo $row['btsremark']; ?>
</td>
</tr>
<tr>
<th><label for="">BOOST Settings</label></th>
<td>
<?php echo $row['boostip']; ?>
</td>
<td>
<?php echo $row['boostremark']; ?>
</td>
</tr>
<?php } }?>
</tbody>
</table>
</div>
</div>
You can do this very simply with some basic javascript. Find all table-cell elements using querySelectorAll - from which you know the parent is the table-row. If the table-cell is empty ( or other criteria ) manipulate the parent - hide it in this case.
document.querySelectorAll('td').forEach( td=>{
let tr=td.parentNode;
if( td.textContent=='' )tr.style.display='none'
})
<table id="mytable" width="500" class="table">
<thead class="thead-light">
<tr>
<th scope="col" width="300px"> Complaint Type</th>
<th scope="col" width="400px"> Username / IP</th>
<th scope="col"> Remark</th>
</tr>
</thead>
<tbody>
<tr>
<th><label for="">SNMP Settings</label></th>
<td name="tdTable">Hello </td>
<td name="tdTable"> World</td>
</tr>
<tr>
<th><label for="">IP Settings</label></th>
<td name="tdTable"></td>
<td name="tdTable"></td>
</tr>
<tr>
<th><label for="">Antivirus Settings</label></th>
<td> </td>
<td></td>
</tr>
<tr>
<th>Trial</td>
<td></td>
<td></td>
</tr>
<tr>
<th>Trail 2</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Here is my suggestion
Test if the tr is already hidden and if not, hide it if the cell is empty
document.querySelectorAll("#mytable tbody tr td").forEach(td => {
const tr = td.closest("tr")
tr.hidden = tr.hidden || td.textContent.trim() === "";
})
<table id="mytable" width="500" class="table">
<thead class="thead-light">
<tr>
<th scope="col" width="300px"> Complaint Type</th>
<th scope="col" width="400px"> Username / IP</th>
<th scope="col"> Remark</th>
</tr>
</thead>
<tbody>
<tr>
<th><label for="">SNMP Settings</label></th>
<td name="tdTable">Hello </td>
<td name="tdTable"> World</td>
</tr>
<tr>
<th><label for="">IP Settings</label></th>
<td name="tdTable"></td>
<td name="tdTable"></td>
</tr>
<tr>
<th><label for="">Antivirus Settings</label></th>
<td> </td>
<td></td>
</tr>
<tr>
<th>Trial</th>
<td></td>
<td></td>
</tr>
<tr>
<th>Trail 2</th>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Same in jQuery
$("#mytable tbody tr td").each(function() {
const $tr = $(this).closest("tr")
const emptyCells = $tr.find("td").filter(function() { return $(this).text().trim() === ""; }).length > 0;
$tr.toggle(!emptyCells)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table id="mytable" width="500" class="table">
<thead class="thead-light">
<tr>
<th scope="col" width="300px"> Complaint Type</th>
<th scope="col" width="400px"> Username / IP</th>
<th scope="col"> Remark</th>
</tr>
</thead>
<tbody>
<tr>
<th><label for="">SNMP Settings</label></th>
<td name="tdTable">Hello </td>
<td name="tdTable"> World</td>
</tr>
<tr>
<th><label for="">IP Settings</label></th>
<td name="tdTable"></td>
<td name="tdTable"></td>
</tr>
<tr>
<th><label for="">Antivirus Settings</label></th>
<td> </td>
<td></td>
</tr>
<tr>
<th>Trial</th>
<td></td>
<td></td>
</tr>
<tr>
<th>Trail 2</th>
<td></td>
<td></td>
</tr>
</tbody>
</table>
This is what you are looking for using jQuery:
$('tr').each(function(){
var _hide = false;
$(this).find('td').each(function(){
if($(this).text().trim() == ''){
_hide = true;
}
});
if(_hide){
$(this).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table id="mytable" width="500" class="table" >
<thead class="thead-light">
<tr>
<th scope="col" width="300px"> Complaint Type</th>
<th scope="col" width="400px"> Username / IP</th>
<th scope="col"> Remark</th>
</tr>
</thead>
<tbody >
<tr>
<th class="head"><label for="">SNMP Settings</label></th>
<td name="tdTable">Hello </td>
<td name="tdTable"> World</td>
</tr>
<tr>
<th ><label for="">IP Settings</label></th>
<td name="tdTable"></td>
<td name="tdTable"></td>
</tr>
<tr>
<th><label for="">Antivirus Settings</label></th>
<td> </td>
<td></td>
</tr>
<tr>
<th>Trial</td>
<td></td>
<td></td>
</tr>
<tr>
<th>Trail 2</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I saw this question. In my particular case, I have Machines in different Rooms. So let's say my table contains columns: room, machine, etc. One room may contain many machines.
I need to change the row color when the room_name changes.
I tried this but it did not work.
var tbl = document.getElementById("tblMain");
if (tbl != null) {
if (tbl.rows[0] != null) {
var room = document.getElementById("tblMain").rows[1].cells[0].innerHTML;
tbl.rows[0].style.backgroundColor = "#f1fafa";
}
for (var i = 1; i < tbl.rows.length; i++) {
if (room == document.getElementById("tblMain").rows[i].cells[0].innerHTML;)
tbl.rows[i].style.backgroundColor = "#f1fafa";
}
room = document.getElementById("tblMain").rows[i].cells[0].innerHTML;
}
<table class="hoverTable dataTable" id="tblMain">
<thead>
<tr>
<th>Room</th>
<th>Machine</th>
<th>Serial Number</th>
</tr>
</thead>
<tbody>
<?php foreach ($assignations as $assignation): ?>
<tr>
<td>
<?= $assignation->has('room') ? $assignation->room->name : '-' ?>
</td>
<td>
<?= $assignation->has('machine') ? $assignation->machine->name : '' ?>
</td>
<td>
<?= $assignation->has('machine') ? $assignation->machine->serial_number : '' ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Here is an example of the output I need:
<table border="1" cellpadding="4" cellspacing="4">
<tr>
<td>room 1</td>
<td>machine 1</td>
</tr>
<tr bgcolor="#FF0000">
<td>room 2</td>
<td>machine 2</td>
</tr>
<tr bgcolor="#FF0000">
<td>room 2</td>
<td>machine 3</td>
</tr>
<tr>
<td>room 4</td>
<td>machine 4</td>
</tr>
<tr bgcolor="#FF0000">
<td>room 7</td>
<td>machine 5</td>
</tr>
</table>
How can I dynamically copy values from table to input field using JS ? I wanna make something like this - If I click on table row it should be added into input field, if I click on another row it should be added after "," in same input field. Something like this (http://prog.linkstraffic.net/jquery/table_row_event_fill_table.html) but it should work from table -> input field. I'm still JS newbie :(
I'm getting data from MySQL table:
<input id="cel" placeholder="Phone number" type="text" name="number"></input>
<table name="users" class="ui compact celled definition table">
<?php
$result = $pdo->query("SELECT * FROM users");
echo
'<table id="sourcetable">
<thead class="full-width">
<tr id="sour">
<th>Login</th>
<th>Phone</th>
</tr>
</thead>';
foreach ($result as $row)
{ ?>
<tr id="sour">
</div>
<td id="td" style="cursor:pointer"><?php echo $row['login']?></td>
<td style="cursor:pointer"><?php echo $row['phone']?></td></tr>
</div>
<?php
}
$result->closeCursor();
echo '</table>';
?>
</table>
Changed the source table:
var addedrows = new Array();
$(document).ready(function() {
$( "#tbId tbody tr" ).on( "click", function( event ) {
var ok = 0;
var id = $( this ).attr('id').replace("tr","");
var newaddedrows = new Array();
for (index = 0; index < addedrows.length; ++index) {
// if already selected then remove
if (addedrows[index] == id) {
newaddedrows.splice(addedrows.indexOf(index), 0);
ok = 1;
} else {
newaddedrows.push(addedrows[index]);
}
}
addedrows = newaddedrows;
if (!ok) {
addedrows.push(id);
}
$('#inptTxt').val(addedrows.toString());
console.log(addedrows.toString());
});
});
table{
border: 1px solid black;
}
td{
background-color: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbId">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Url</th>
<th>Country</th>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr id="tr0">
<td>1</td>
<td>Name 1</td>
<td>url 1</td>
<td>Country 1</td>
<td>Item 1</td>
</tr>
<tr id="tr1">
<td>2</td>
<td>Name 2</td>
<td>url 2</td>
<td>Country 2</td>
<td>Item 2</td>
</tr>
<tr id="tr2">
<td>3</td>
<td>Name 3</td>
<td>url 3</td>
<td>Country 3</td>
<td>Item 3</td>
</tr>
</tbody>
</table>
<hr>
<input type="text" id="inptTxt">
I am trying to sum the values of the "Total Work Assigned" and "Not Called" columns.
Here is my table HTML
<table border=1 id="category">
<tr>
<th>User Name</th>
<th>User Belongs</th>
<th>Total Work Assigned</th>
<th>Not Called</th>
</tr>
<tr>
<td>vidyaranyapura</td>
<td>Category</td>
<td>172</td>
<td>156</td>
</tr>
<tr>
<td>sahasra</td>
<td>Company</td>
<td>500</td>
<td>350</td>
</tr>
<tr>
<td>global</td>
<td>Not Assigned</td>
<td>0</td>
<td>0</td>
</tr>
</table>
here is snippet
$('#category tr td').text(function(i,el){
console.log(parseInt(el,10));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1 id="category">
<tr>
<th>User Name</th>
<th>User Belongs</th>
<th>Total Work Assigned</th>
<th>Not Called</th>
</tr>
<tr>
<td>vidyaranyapura</td>
<td>Category</td>
<td>172</td>
<td>156</td>
</tr>
<tr>
<td>sahasra</td>
<td>Company</td>
<td>500</td>
<td>350</td>
</tr>
<tr>
<td>global</td>
<td>Not Assigned</td>
<td>0</td>
<td>0</td>
</tr>
</table>
<h3>MY EXPECTED OUTPUT</h3>
<table border=1 id="same_id_wont_work_changed_for_demo_only">
<tr>
<th>User Name</th>
<th>User Belongs</th>
<th>Total Work Assigned</th>
<th>Not Called</th>
</tr>
<tr>
<td>vidyaranyapura</td>
<td>Category</td>
<td>172</td>
<td>156</td>
</tr>
<tr>
<td>sahasra</td>
<td>Company</td>
<td>500</td>
<td>350</td>
</tr>
<tr>
<td>global</td>
<td>Not Assigned</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td>672</td>
<td>506</td>
</tr>
</table>
jsfiddle for my expected output: https://jsfiddle.net/2g29c8uv/16/
I guess what you want to do is something like this:
DEMO: https://jsfiddle.net/zxooa1j4/1/
var sum1 = 0;
var sum2 = 0;
$("#category tr").not(':first').not(':last').each(function() {
sum1 += getnum($(this).find("td:eq(2)").text());
sum2 += getnum($(this).find("td:eq(3)").text());
function getnum(t){
if(isNumeric(t)){
return parseInt(t,10);
}
return 0;
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
}
});
$("#sum1").text(sum1);
$("#sum2").text(sum2);
isNumeric() function is quoted from this answer:
Is there any function like IsNumeric in javascript to validate numbers
HTML:
<table border=1 id="category">
<tr>
<th>User Name</th>
<th>User Belongs</th>
<th>Total Work Assigned</th>
<th>Not Called</th>
</tr>
<tr>
<td>vidyaranyapura</td>
<td>Category</td>
<td>172</td>
<td>156</td>
</tr>
<tr>
<td>sahasra</td>
<td>Company</td>
<td>500</td>
<td>350</td>
</tr>
<tr>
<td>global</td>
<td>Not Assigned</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td id="sum1"></td>
<td id="sum2"></td>
</tr>
</table>
Hope this helps.
Based on the PHP that you provided in your fiddle. You can actually total the values while you're looping through them for output to the display.
Simply replace this foreach section
$table2 = '<table id="all_category_data" class="table table-striped table-bordered table-hover"><tr><th>User Name</th><th>User Belongs to</th><th>Total Work Assigned</th><th>Not Called</th><th>Follow Up</th><th>Intrested</th><th>Not Intrested</th></tr>';
foreach($totalresult as $totalresults) {
$table2 .= "<tr><td>".$totalresults['username'].
"</td><td>".$totalresults['userbelongs'].
"</td><td>".$totalresults['totalvalue'].
"</td><td>".$totalresults['Notcalled'].
"</td><td>".$totalresults['followUp'].
"</td><td>".$totalresults['intrested'].
"</td><td>".$totalresults['notIntrested'].
"</td></tr>";
}
$table2. = '</table>';
echo $table2;
with the following that includes the addition and output
$table2 = '<table id="all_category_data" class="table table-striped table-bordered table-hover"><tr><th>User Name</th><th>User Belongs to</th><th>Total Work Assigned</th><th>Not Called</th><th>Follow Up</th><th>Intrested</th><th>Not Intrested</th></tr>';
$totalValue = 0;
$notCalledValue = 0;
foreach($totalresult as $totalresults) {
// addition of totalValue
$totalValue = $totalValue + $totalresults['totalvalue'];
// addition of notCalledValue
$notCalledValue = $notCalledValue + $totalresults['Notcalled'];
$table2 .= "<tr><td>".$totalresults['username'].
"</td><td>".$totalresults['userbelongs'].
"</td><td>".$totalresults['totalvalue'].
"</td><td>".$totalresults['Notcalled'].
"</td><td>".$totalresults['followUp'].
"</td><td>".$totalresults['intrested'].
"</td><td>".$totalresults['notIntrested'].
"</td></tr>";
}
// output of totalValue and notCalledValue
$table2 .= "<tr><td>".
"</td><td>".
"</td><td>".$totalValue.
"</td><td>".$notCalledValue.
"</td><td>".
"</td><td>".
"</td><td>".
"</td></tr>";
$table2. = '</table>';
echo $table2;
NOTE: this assumes that the $totalresults['totalvalue'] and $totalresults['Notcalled'] keys in your data are numbers.
I have a problem, I need to show / hide a colspan of each column when a link is clicked.
That is to say, I have many records, and when you click on any specific, need to show this information on a colspan, when another record is clicked hide the record previously clicked.
My HTML code:
<table class="table table-condensed table-bordered table-hover text-center">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Date</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<?php foreach ($products as $row): ?>
<tr>
<td>1</td>
<td>Product 1</td>
<td>10000</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>100</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td colspan="5">Details of selected product</td>
</tr>
<?php endforeach; ?>
<tbody>
</table>
I had this code, but always brought me the first record:
$('.show').click(function(){
$(this).parent().parent().next().toggle('slow');
var id = $(this).attr('id');
$('td #colspanid').append(id); //show id
return false;
});
If you want specific row to toggle then you can use eq
jQuery(document).ready(function($){
$('.show').on('click', function(e){
e.preventDefault();
// Put row index in eq
$('.table tr').eq(2).toggle();
})
})
Or if you want to toggle next tr then check this jsfiddle that i've created.
Hope it helps you.
Modify the click function like this.
$('.show').click(function(){
var element1=$(this);
$('.previous').addClass('hide');
element1.parent().parent().addClass('previous');
var id = element1.attr('id');
$('td#colspn').text('Details of selected product is :' +id); //show id
return false;
});
and add css:
.hide{
display:none;
}
Play the below html for reference.
$('.show').click(function(){
var element1=$(this);
$('.previous').addClass('hide');
element1.parent().parent().addClass('previous');
var id = element1.attr('id');
$('td#colspn').text('Details of selected product is :' +id); //show id
return false;
});
.hide{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table class="table table-condensed table-bordered table-hover text-center">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Price</th>
<th>Date</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Product 1</td>
<td>10000</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>100</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>3</td>
<td>Product 1</td>
<td>10000</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td>4</td>
<td>Product 2</td>
<td>100</td>
<td>Date</td>
<td>Show details</td>
</tr>
<tr>
<td id="colspn" colspan="5">Details of selected product</td>
</tr>
<tbody>
</table>
First, identify the details rows by giving them a class.
<tbody>
<?php foreach ($products as $row): ?>
<tr>
<td><?php echo $row[0] ?></td>
<td><?php echo $row[1] ?></td>
<td><?php echo $row[2] ?></td>
<td><?php echo $row[3] ?></td>
<td>Show details</td>
</tr>
<tr class="details"> <!-- <<<<< class="details" -->
<td colspan="5">Details of selected product</td>
</tr>
<?php endforeach; ?>
<tbody>
Then, the jQuery will be as follows :
$(function() {
$("tr.details").hide().closest("tbody").find("a.show").on('click', function(e) {
e.preventDefault();//prevent hyperlink action
$("tr.details").slideUp('fast');//hide any previously opened details
$(this).closest("tr").next("tr.details").slideDown('fast');//show details for the clicked row
});
});