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
});
});
Related
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>
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>
I'm looking to make the entire row of a table change colour (either the background colour or text colour) based on the value of the column labelled "Status". If the value in the "Status" column is "Expired" the background of the entire row should change.
(Edit: The data is going to be pulled dynamically from a database).
Any suggestions?
HTML Code
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>
Thanks in advance.
If you can change how the table is rendered than I would just add the text as a class. This will be the best performance option and requires no JavaScript and the content will not flash.
tr.Expired td {
background-color: red;
}
tr.Active td {
background-color: green;
}
<table>
<thead>
<tr>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="Active">
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr class="Expired">
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</tbody>
</table>
Or you will need to run JavaScript code that reads the cell value and adds the class.
$("tr:has(td:last:contains('Expired'))").addClass("Expired");
tr.Expired td {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</tbody>
</table>
try using CSS only adding a class to the tr.
tr.active > td {
background-color: green;
}
tr.expired > td {
background-color: red;
}
https://jsfiddle.net/jt717mL8/
In your case the status column is the 5th. So you may do something like:
$('table tr:gt(0)').each(function(idx, ele) {
if ($(ele).find('td:eq(4)').text() == 'Expired') {
$(ele).css('backgroundColor', 'yellow');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>
You can first get index of status th and then check each td with same index and check its text.
var i = $('th:contains(Status)').index();
$('tr').each(function() {
var td = $(this).find('td').eq(i);
if (td.text() == 'Expired') td.css('background', 'red')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th>Bonus Competitions</th>
<th>Value</th>
<th>Link</th>
<th>Expires</th>
<th>Status</th>
<tr>
<td>Cash</td>
<td>£500</td>
<td>Link
</td>
<td>18-Feb-17</td>
<td>Active</td>
</tr>
<tr>
<td>Sports Car</td>
<td>£5000</td>
<td>Link
</td>
<td>18-Jan-17</td>
<td>Expired</td>
</tr>
</table>
I need to split one table row into multiple row when calling a js function
This is the table:
<table id="tab_calc">
<tr class="tr_calc">
<td>Sub Total</td>
<td>Tax</td>
<td>Freight</td>
<td>Insurance</td>
<td>Discount</td>
<td>Total</td>
<td>Amt Paid</td>
<td>Bal Due</td>
</tr>
I want to make it look like this after I call a function:
<table id="tab_calc">
<tr>
<td>Sub Total</td>
</tr>
<tr>
<td>Tax</td>
</tr>
<tr>
<td>Freight</td>
<td>Insurance</td>
<td>Discount</td>
</tr>
<tr>
<td>Total</td>
</tr>
<tr>
<td>Amt Paid</td>
</tr>
<tr>
<td>Bal Due</td>
</tr>
</table>
Try below code:
fiddler
$(document).ready(function(){
$('.tr_calc').replaceWith( $('.tr_calc').html()
.replace(/<td>/gi, "<tr> <td>")
.replace(/<\/td>/gi, "</td></tr>")
);
});