I have:
<tbody>
<tr class='default'></tr>
<tr class='sample'></tr>
<tr class='sample'></tr>
<tr class='sample'></tr>
<tr class='default'></tr>
</tbody>
All of the classes are coming from foreach loop in same sequence.
Now I want to display tr with default class in separate tbody and tr with sample class in different tbody like below
<tbody>
<tr class='default'></tr>
<tr class='default'></tr>
</tbody>
<tbody>
<tr class='sample'></tr>
<tr class='sample'></tr>
<tr class='sample'></tr>
</tbody>
how can i do so?
you can define styles for the tbody's and have the tr's styled depending on their parent:
html:
<tbody class="default">
<tr></tr>
<tr></tr>
</tbody>
<tbody class="sample">
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
style:
tbody.default tr { ... }
tbody.sample tr { ... }
Related
I have a html code below (created using a plugin).
I need to change colspan="6" to colspan="4".
I tried jQuery below, but it doesn't work...
Would you please help me?
<table class="shop_table">
<thead>
<tr><th></tr></th>
</thead>
<tbody>
<tr><td class="aa"></td></tr>
<tr><td class="bb"></td></tr>
<tr><td class="cc" colspan="6"></td></tr>
<tbody>
</table>
$('.shop_table').find('td:last-child').contents().filter(function() {
return this.nodeType===3;
}).remove().end().end().find('colspan="6"').replaceWith($(('colspan="4"'));
Thank you.
With the selector [colspan="6"] you can get to each and set a new attribute:
$('.shop_table [colspan="6"]').each(function() {
this.setAttribute('colspan', '4');
});
console.log($('table').html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="shop_table">
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr class="aa"><td></td></tr>
<tr class="bb"><td></td></tr>
<tr class="cc" colspan="6"><td></td></tr>
<tbody>
</table>
Or, without jQuery:
for (const elm of document.querySelectorAll('.shop_table [colspan="6"]')) {
elm.setAttribute('colspan', '4');
}
console.log(document.querySelector('table').innerHTML);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="shop_table">
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr class="aa"><td></td></tr>
<tr class="bb"><td></td></tr>
<tr class="cc" colspan="6"><td></td></tr>
<tbody>
</table>
You can use prop() or attr() and both methods will loop through all of them
$('.shop_table td[colspan="6"]').prop('colSpan', 4)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="shop_table" border=1>
<thead>
<tr><th>111</th><th>111</th><th>111</th><th>111</th><th>111</th><th>111</th><th>111</th></tr>
</thead>
<tbody>
<tr><td class="aa">222</td></tr>
<tr><td class="bb">333</td></tr>
<tr><td class="cc" colspan="6">444</td></tr>
<tr><td class="aa">222</td></tr>
<tr><td class="bb">333</td></tr>
<tr><td class="cc" colspan="6">444</td></tr>
<tbody>
</table>
Hey a simple answer to your question is this:
$("table tr:last td[colspan=6]").attr('colspan',4);
I select the Table, then the last TR, and then the TD representing the one you want to be changed.
Then I add the attribute colspan 4.
This is a codepen showing it working: https://codepen.io/SweetChillyPhilly/pen/MWJbBPo
And here is the SO question where you can read more about how this solution became to be
Replacing Colspan = "2" with Colspan = "4" using Jquery
This question already has an answer here:
How can I get two items in a foreach loop in PHP? [duplicate]
(1 answer)
Closed 2 years ago.
I have a table with looping tr tags I am looking to break after every second tr tag.
like
My table looks like this after the for loop.
<table class="table">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
after modulo logic, I want to show'em like this
<table class="table">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
And here is my PHP script so far.
I have tried all sort of arrangement b
ut unable to achieve those layout
<?php $num = 1; ?>
<table class="Table">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<?php
for ( $x = 1; $x <= 12; $x++ ) {
if($num%2 == 0) {
?>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<?php
}
?>
<?php
if($num %2 == 1) {
?>
<table class="Table">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<?php
}
$num++;
}
?>
</tbody>
</table>
I know I am doing a silly mistake but can't figure it out.
I appreciate your help.
Create a function that returns you a table. For every dataset of size 6, call the function and get your table. You can use array_chunk to chunk the datasets into smaller chunks and use heredoc syntax for better readability.
getTable() function:
<?php
function getTable($data){
$table = <<<EOD
<table class="table">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
EOD;
$rows = "";
foreach(array_chunk($data,3) as $values){
$rows .= "<tr>";
foreach($values as $value){
$rows .= "<td>" . $value . "</td>";
}
$rows .= "/<tr>";
}
$table .= $rows;
$table .= <<<EOD
</tbody>
</table>
EOD;
return $table;
}
Driver code:
<?php
$arr = [1,2,3,4,5,6,7,8,9,10,11,12];
foreach(array_chunk($arr,6) as $set_for_table){
echo getTable($set_for_table);
}
for dynamic tables you can iterate your entire table and set the two tr values.
using your example:
<?php $total = 100; ?>
<?php for ($i=0; $i < $total; $i+=6):?>
<table class="table">
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td><?=$i+1?></td>
<td><?=$i+2?></td>
<td><?=$i+3?></td>
</tr>
<tr>
<td><?=$i+4?></td>
<td><?=$i+5?></td>
<td><?=$i+6?></td>
</tr>
</tbody>
</table>
<?php endfor; ?>
will generate $total/6 tables each with two <tr>
I have a question how to underline in the table according the column data. Below is example coding to explain what I am facing the problem:
I want to detect if column underline is 1 the first name data will draw the underline, if 0 the first name data no show the underline. Below the sample is hardcode, if real situation, I have too many row to show the data, I cannot 1 by 1 to add text-decoration: underline; in the td. So that, hope someone can guide me how to solve this problem. I am using the php code to make the variable to define the underline.
<!--Below the php code I just write the logic, because I don't know how to write to detect the column underline value-->
<?php
if ( <th>Underline</th> == 1) {
$add_underline = "text-decoration: underline;";
}
if ( <th>Underline</th> == 0) {
$add_underline = "text-decoration: underline;";
}
?>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Underline</th>
</tr>
<tr>
<td style="<?php echo $add_underline;?> ">Jill</td>
<td>Smith</td>
<td>1</td>
</tr>
<tr>
<td style="<?php echo $add_underline;?>">Eve</td>
<td>Jackson</td>
<td>0</td>
</tr>
<tr>
<td style="<?php echo $add_underline;?>">John</td>
<td>Doe</td>
<td>1</td>
</tr>
</table>
My output like below the picture:
My expected result like below the picture, Jill and John can underline:
Why not use javascript to achieve this? No matter what the server sends it will evaluate the condition if 1 is set and then underline accordingly... You would have to use classes to get the appropriate table data tags holding the values, I added class='name' to the names <td> tag and class='underline' tot he underline <td> tag.
// get the values of the elements with a class of 'name'
let names = document.getElementsByClassName('name');
// get the values of the elements with a class of 'underline'
let underline = document.getElementsByClassName('underline');
// loop over elements using for and use the keys to get and set values
// `i` will iterate until it reaches the length of the list of elements with class of underline
for(let i = 0; i < underline.length; i++){
// use the key to get the text content and check if 1 is set use Number to change string to number for strict evaluation
if(Number(underline[i].textContent) === 1){
// set values set to 1 to underline in css style
names[i].style.textDecoration = "underline";
}
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Underline</th>
</tr>
<tr>
<td class="name">Jill</td>
<td>Smith</td>
<td class='underline'>1</td>
</tr>
<tr>
<td class="name">Eve</td>
<td>Jackson</td>
<td class='underline'>0</td>
</tr>
<tr>
<td class="name">John</td>
<td>Doe</td>
<td class='underline'>1</td>
</tr>
</table>
Or using the td child values...
let tr = document.querySelectorAll("tr");
last = null;
for(let i = 1; i < tr.length; i++){
if(Number(tr[i].lastElementChild.innerHTML) === 1){
tr[i].firstElementChild.style.textDecoration = "underline";
}
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Underline</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>1</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>0</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>1</td>
</tr>
</table>
I have a datatable in HTML which i am populating with dynamic data from PHP. each row is expandable but what I want is to have child rows for each parent row. So, for example there is a device type with the number 4 which contains 20 different devices, so I want to display in the parent row Device number 4 and when I expand that row display the 20 devices (with headers such as IMEI, Serial no., etc.)
Here is the table I have right now:
See screenshot of my table
EDIT: Added current table (no child rows)
<table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
<thead>
<th>Device</th>
<th>Dev.no</th>
<th>Barcode</th>
<th>IMEI</th>
<th>Serial no.</th>
<th>Date added on stock</th>
</thead>
<tbody>
<?php if (!empty($devices)) { ?>
<?php foreach ($devices as $device) : ?>
<tr>
<td>
<?php echo $device["name"] ?>
</td>
<td>
<?php echo $device["device_no"] ?>
</td>
<td>
<?php echo $device["barcode"] ?>
</td>
<td>
<?php echo $device["serial_imei"] ?>
</td>
<td>
<?php echo $device["serial_no"] ?>
</td>
<td>
<?php echo $device["created_date"] ?>
</td>
</tr>
<?php endforeach; ?>
<?php } ?>
</br>
</tbody>
</table>
I think you're looking for something like this https://datatables.net/reference/api/row().child().
Then you can add a table in the child row with more information.
Note: It looks like you have the responsive option enabled (green plus button that hides/shows hidden columns). If you have a child row open and try to show the hidden columns, it might overwrite your child row.
Edit:
You need to specify the HTML you want to put in the child. I would personally use ajax to retrieve the children when I wanted to display them. Otherwise the data needs to be hidden somewhere in the page.
I've created a codepen that puts the HTML in a data attribute on the row. Then you can click a button to view the child rows (devices). Obviously, there are many other ways to store the data on the page.
$(document).on("click", ".viewChildren", rowClickHandler);
$("#example").DataTable();
function rowClickHandler() {
var btn = $(this);
var tr = btn.closest('tr');
var dtRow = $("#example").DataTable().row(tr);
if (dtRow.child.isShown()) {
dtRow.child.hide();
btn.text('Show Children');
} else {
var children = tr.data("children");
dtRow.child(children).show();
btn.text('Hide Children');
}
}
th{
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Device</th>
<th>Dev.no</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr data-children='<table>
<thead>
<tr>
<th>barcode</th>
<th>imei</th>
<th>serial_no</th>
<th>created_date</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456</td>
<td>11324</td>
<td>654654</td>
<td>2020-01-17</td>
</tr>
<tr>
<td>1234987</td>
<td>1654</td>
<td>654687</td>
<td>2020-04-30</td>
</tr>
</tbody>
</table>'>
<td>Laptop</td>
<td>2</td>
<td><button class = 'viewChildren'>See Children</button></td>
</tr>
</tbody>
</table>
this is my table -
<table>
<tr>
<td>ABC</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
and I want to remove this one table row:
<tr>
<td> </td>
</tr>
my expected output is:
<table>
<tr>
<td>ABC</td>
</tr>
</table>
is it possible??please help me
As you have tagged your question with the tag php i would recommend using a regular expression.
The pattern \s*<tr>\s*<td> <\/td>\s*<\/tr> will find the tr with an empty ( ) td.
To test and look into the regex you can have a look here: https://regex101.com/r/ax6Xdg/1
Put together this will look something like this:
$table = "<table>
<tr>
<td>ABC</td>
</tr>
<tr>
<td> </td>
</tr>
</table>";
$pattern = "/\s*<tr>\s*<td> <\/td>\s*<\/tr>/";
var_dump( preg_replace( $pattern , "" , $table ) );
This will output something very simmilar to this:
string '<table>
<tr>
<td>ABC</td>
</tr>
</table>' (length=60)
You can do this by using JQuery function .remove(). You can look it up here
Edit: If you want to locate that specific tag, you can do that by using .next()read here, .find() read here,.parent()read here, .children read here
Just add id to your table :
<table id="tableid">
<tr>
<td>ABC</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
This script find , if found then remove !
$('#tableid tr').each(function() {
if ($(this).find('td').html()==' ') $(this).remove();
});
If you want to find some text and then remove then replace html() with text()
$('#tableid tr').each(function() {
if ($(this).find('td').text()=='ABC') $(this).remove();
});
You should try this:
<table>
<tr id="abc>
<td>ABC</td>
</tr>
<tr id="remove">
<td> </td>
</tr>
<script>
$('#remove').remove();
</script>
When rendering the table, add a unique class for the rows you wish to delete. Lets say the class is: _rowToDelete, and then using jQuery, remove all the rows that have this class.
In the below example, when you click on the button the rows are being removed, so you can see the changes. But you can do the same on page load if you wish so.
$(function() {
$("#removeBtn").click(function() {
$("._rowToDelete").remove() ;
});
}) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>ABC 1</td>
</tr>
<tr class="_rowToDelete">
<td> </td>
</tr>
<tr>
<td>ABC 2</td>
</tr>
<tr class="_rowToDelete">
<td> </td>
</tr>
<tr>
<td>ABC 3</td>
</tr>
<tr class="_rowToDelete">
<td> </td>
</tr>
</table>
Remove