Table Row Description - javascript

table td {
border: 1px solid black;
}
<table>
<thead>
<th>
col1
</th>
<th>
col2
</th>
</thead>
<tbody>
<tr>
<td>field1</td>
<td>field2</td>
</tr>
<tr>
<td colspan="2">The above row is number 1</td>
</tr>
<tr>
<td>field3</td>
<td>field4</td>
</tr>
<tr>
<td colspan="2">The above row is number 2</td>
</tr>
</tbody>
</table>
What I want?
Well I have this HTML code.
I want to put row description but without the use of a useless TR tag.
Reason:
I am sorting on the basis of column.
The column value is integer , and when I sort, all row description comes at bottom and field rows are sorted on top. But the row description should be attached to parent row.
Question:
How to attach it, so that after sort the table on basis of column, rows descriptions don't get spoiled ?

It's not an amazing solution, but you can try in this way:
<table>
<thead>
<th>
col1
</th>
<th>
col2
</th>
</thead>
<tbody>
<tr>
<td>
field1
</td>
<td>field2</td>
<td>
<div>
description
</div>
</td>
</tr>
<tr>
<td>field3</td>
<td>field4</td>
<td>
<div>
description
</div>
</td>
</tr>
</tbody>
</table>
css:
table,
thead,
tbody,
tr {
display: block;
clear: both;
}
table {
width: 130px;
}
thead {
height: 30px;
}
th,
td {
width: 60px;
float: left;
height: 30px;
border: 1px solid black;
}
td {
margin-top: 30px;
}
tr {
height: 60px;
position: relative;
}
tr td:last-child {
width: 0;
overflow: hidden;
border: none;
}
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
}
https://jsfiddle.net/4xbbzzg5/

Related

extra cell in HTML table

I am trying to print start and end under execution, but I get an extra cell beside End. I use:
<table style="float: center;border:2px;font-size:20px;color:white;border-collapse: collapse;border-spacing: 3;width: 25%;"> <tr><td> PC </td> <td> INSTRUCTION </td> <td> ISSUED </td> <td colspan="2"><table style="font-size:20px;color:white;border-collapse: collapse;border-spacing: 3;width: 25%;"><tr><td>EXECUTION</td></tr></table><table style="font-size:20px;color:white;border-collapse: collapse;width: 25%;"><tr><td>START</td><td>END</td></tr></table> <td> WRITTEN </td></tr>
How can I remove this extra cell?
Your "extra cell" is the space between the end of the cell with contents "END" and the parent cell containing your embedded tables. For your purpose, instead of embedding one table inside another you should use rowspan and colspan.
body {
background-color: black;
}
table,
tr,
td {
border-color: white;
border-style: solid;
border-width: 2px;
}
table {
border-collapse: collapse;
border-spacing: 3;
color: white;
float: center;
font-size: 20px;
text-transform: uppercase;
width: 25%;
}
<table>
<tr>
<td rowspan="2">PC</td>
<td rowspan="2">Instructions</td>
<td rowspan="2">Isused</td>
<td colspan="2">Execution</td>
<td rowspan="2">Written</td>
</tr>
<tr>
<td>Start</td>
<td>End</td>
</tr>
</table>

Change JavaScript code to only expand next row, not all next rows in table

I'm very new to this and trying to work out how something works that someone previous to me has implemented and I need to alter.
We have a table with say 3 or 4 headers and at present one row below it.
JavaScript is used so that upon clicking on a row, it expand to display the next row.
What I'm trying to do is have another table within one of the rows that only shows after expanding.
$(document).ready(function(){
$("#report66 tr:odd").addClass("odd");
$("#report66 tr:not(.odd)").hide();
$("#report66 tr:first-child").show();
$("#report66 tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
.table.tableSection {
display: table;
width: 500%;
}
.table.tableSection thead, table.tableSection tbody {
float: left;
width: 100%;
}
.table.tableSection tbody {
overflow: auto;
height: 250px;
}
.table.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
.table.tableSection th, table.tableSection td {
width: 33%;
}
.td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
background-color: #00565c;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id='report66'>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
<tr>
<td colspan='8'>
Information
Information
<table>
<th>Test</th>
<tr>
<td>Test</td>
</table>
</table>
So with this you can see that upon selecting the first row of data it expands and shows the next row. The table within that row, is collapsed and you have to expand this.
Main question is, how can I change this so that the 2nd table is not collapsed? (I'm not bothered about collapsing it)
There are a lot of different methods of achieving this but every single one I find, doesn't seem to fit what I need.
EDIT WITH ORIGINAL CODE SNIPPET
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#report66 tr.information-row').hide();
$("#report66 tr:not(.information-row)").click(function(){
$('#report66 tr.information-row').toggle();
});
});
</script>
<style>
.new table {
table-layout: fixed;
width: 100% ;
}
</style>
<?php
if($replacementpending >= 1)
{
echo "<h4><center><b>Network | Pending Acceptance</b></center></h4>";
$sql = "SELECT * FROM `stock`.`replacements.joblog` WHERE `status` = 'Pending' AND `ownership` = 'Stock' ORDER BY `id` ASC";
$retval = mysqli_query( $conn, $sql );
if(! $retval ) {
die('Could not get data: ' . mysqli_error());
}
echo
"<table border='1'>
<table id='report66'>
<tr>
<th style='background-color:#003033'>DB Ref</th>
<th style='background-color:#003033'>Ticket Ref</th>
<th style='background-color:#003033'>Item Requested</th>
<th style='background-color:#003033'>Customer</th>
<th style='background-color:#003033'><center><span class='glyphicon glyphicon-circle-arrow-down'></span></center></th>
</tr>";
while($row = mysqli_fetch_array($retval)) {
echo "<tr>";
echo
"<td>{$row['id']}</td>".
"<td>{$row['req_ticketref']}</td>".
"<td>{$row['req_model']}</td>".
"<td>{$row['req_customer']}</td>".
"<td style='table-layout: fixed; width: 3%'><center><span class='glyphicon glyphicon-circle-arrow-down'></span></center></td>";
}
echo
"
<tr class='information-row' style='background-color:#00181a'>
<td colspan='8' style='background-color:#00181a'>
";
echo "
<center><h4><b>Additional information</b></h4>
<table style='table-layout: fixed; width: 70%'>
<th style='background-color:#003033;text-align:right'>CI Name</th><td>{$row['ciref']}</td><tr>
<th style='background-color:#003033;text-align:right'>Requested By</th><td>{$row['req_name']}</td><tr>
<th style='background-color:#003033;text-align:right'>Ticket Reference</th><td>{$row['req_ticketref']}</td><tr>
<th style='background-color:#003033;text-align:right'>Customer</th><td>{$row['req_customer']}</td><tr>
<th style='background-color:#003033;text-align:right'>Date/Time Logged</th><td>{$row['datetimelogged']}</td><tr>
</table>
<br>
<legend></legend>
<h4><b>Delivery Details</b></h4>
<table style='table-layout: fixed; width: 70%'>
<th style='background-color:#003033;text-align:right'>End User Company Name</th><td>{$row['endusername']}</td><tr>
<th style='background-color:#003033;text-align:right'>Address Line 1</th><td>{$row['address1']}</td><tr>
<th style='background-color:#003033;text-align:right'>Address Line 2</th><td>{$row['address2']}</td><tr>
<th style='background-color:#003033;text-align:right'>City</th><td>{$row['city']}</td><tr>
<th style='background-color:#003033;text-align:right'>Post Code</th><td>{$row['postcode']}</td><tr>
<th style='background-color:#003033;text-align:right'>Country</th><td>{$row['country']}</td><tr>
</table>
<br>
</center>
</td>
</tr>
";
}
echo "</table>";
}
?>
When you do $("#report66 tr:not(.odd)").hide(); you actually hide all tr elements inside the main table, which do not have the .odd class name. Since you have another table inside the main one, this rule applies to the tr elements in it.
You can explicitly show all rows in the inner table:
$(document).ready(function(){
$("#report66 tr:odd").addClass("odd");
$("#report66 tr:not(.odd)").hide();
$("#report66 tr:first-child").show();
$("#report66 tr table tr").show(); // Show all inner table rows
$("#report66 tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
.table.tableSection {
display: table;
width: 500%;
}
.table.tableSection thead, table.tableSection tbody {
float: left;
width: 100%;
}
.table.tableSection tbody {
overflow: auto;
height: 250px;
}
.table.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
.table.tableSection th, table.tableSection td {
width: 33%;
}
.td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
background-color: #00565c;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id='report66'>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
<tr>
<td colspan='8'>
Information
Information
<table>
<th>Test</th>
<tr>
<td>Test</td>
</table>
</table>
EDIT
If you want to have multiple visible cells, which toggle the visibility of the information row right after the row they are in, the script can be simplified and you can add a specific class to that row:
$(document).ready(function () {
$('#report66 tr.information-row').hide();
$("#report66 tr:not(.information-row)").click(function () {
$(this).next().toggle();
});
});
.table.tableSection {
display: table;
width: 500%;
}
.table.tableSection thead, table.tableSection tbody {
float: left;
width: 100%;
}
.table.tableSection tbody {
overflow: auto;
height: 250px;
}
.table.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
.table.tableSection th, table.tableSection td {
width: 33%;
}
.td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
background-color: #00565c;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id='report66'>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
</tr>
<tr class="information-row">
<td colspan="8">
Information
Information
<table>
<th>Test</th>
<tr>
<td>Test</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Data5</td>
<td>Data6</td>
<td>Data7</td>
<td>Data8</td>
</tr>
<tr class="information-row">
<td colspan="8">
Information 2
Information 2
<table>
<th>Test</th>
<tr>
<td>Test</td>
</tr>
</table>
</td>
</tr>
</table>

Jquery expand collapse next row of the table on click of span

I am having a table which is having + and - items for expand and collapse. Onclick of this icons row next to that particular row should expand . I am adding collpasible Icon dynamically through jquery. How can I access next rows dynamically on click of these icons.
Ideally on click of that - icon that expanded row should hide and onclick of + it should be shown.. Thanks in advance
$( document ).ready(function() {
$(".table tbody tr.has-history td:first-child").append('<span class="collapse-icon"></span>');
});
.table tbody tr.has-history > td:first-child {
position: relative;
}
.table tbody tr.has-history span.collapse-icon {
display: inline-block;
width: 20px;
height: 20px;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
left: -20px;
background: #f09d18;
border-radius: 5px 0 0 5px;
cursor: pointer;
font-size: 1.5em;
line-height: 1em;
}
.table tbody tr.has-history span.collapse-icon:before {
content: "+";
}
.table tbody tr.has-history.open span.collapse-icon {
background: #eee;
color: #000;
border: 1px solid #ccc;
}
.table tbody tr.has-history.open span.collapse-icon:before {
content: "-";
}
.table{
MARGIN-LEFT:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<thead>
<tr>
<th>Product</th>
<th>Config</th>
<th>Version</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="has-history open">
<td>MSM8992</td>
<td>Estel</td>
<td>2</td>
<td>Active</td>
</tr>
<tr class="expanded">
<td colspan="4">
<table class="table" >
<thead>
<tr>
<th>Product</th>
<th>Config</th>
<th>Version</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>MSM8994</td>
<td>Elessar</td>
<td>1</td>
<td>Active</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>MSM8994</td>
<td>Elessar</td>
<td>1</td>
<td>Active</td>
</tr>
<tr>
<td>APQ8084</td>
<td>Gandalf - PoP Memory</td>
<td>1</td>
<td>Active</td>
</tr>
<tr class="has-history">
<td>MDM9x40</td>
<td>Tesla</td>
<td>3</td>
<td>Active</td>
</tr>
<tr>
<td>MDM9x45</td>
<td>Spark</td>
<td>1</td>
<td>Active</td>
</tr>
<tr class="has-history">
<td>APQ8084</td>
<td>Gandalf - External Memory</td>
<td>1</td>
<td>Active</td>
</tr>
</tbody>
</table>
Bind click event on collapse-icon class
Toggle next row and icon on click
$(document).on("click", ".collapse-icon", function() {
$(this).parents(".has-history").next().slideToggle();
$(this).parents(".has-history").toggleClass("open");
});
Refer this JSFiddle https://jsfiddle.net/k6kn972b/
Bind click event using event delegation
Then target the current row using $(this).closest("tr")
Then get the next row using .next()
$(document).on("click", ".collapse-icon", function() {
$(this).closest("tr").next().slideToggle();
});

Responsive table with vertical and horizontal headers [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have the following table (jsFiddle):
<table>
<tr>
<th></th>
<th scope="col">BMW</th>
<th scope="col">Audi</th>
<th scope="col">Mercedes</th>
</tr>
<tr>
<th scope="row">GPS</th>
<td>1200</td>
<td>1000</td>
<td>1400</td>
</tr>
<tr>
<th scope="row">Bluetooth</th>
<td>700</td>
<td>750</td>
<td>680</td>
</tr>
<tr>
<th scope="row">Sensors</th>
<td>1230</td>
<td>1400</td>
<td>1100</td>
</tr>
</table>
How do I make it responsive, so that in mobile devices the table will look like this:
<table>
<tr>
<th></th>
<th scope="col">BMW</th>
</tr>
<tr>
<th scope="row">GPS</th>
<td>1200</td>
</tr>
<tr>
<th scope="row">Bluetooth</th>
<td>700</td>
</tr>
<tr>
<th scope="row">Sensors</th>
<td>1230</td>
</tr>
</table>
Is it possible to do this just in CSS? I'm guessing not since I will need to duplicate the vertical headers
Changing the point of view and starting with three tables you can achieve the opposite effect, merging the columns when a larger viewport is available like so:
http://codepen.io/anon/pen/qEwodb
CSS
table {
border-collapse: collapse;
}
td, th {
border: 1px #ddd solid;
}
table {
margin: 20px 0;
}
td, th {
padding: 10px;
}
#media all and (min-width: 640px) {
table {
float: left;
}
table ~ table td,
table ~ table th { border-left: 0; }
table ~ table tr:first-child th:first-child { display: none; }
table ~ table tr:not(:first-child) th { display: none; }
}
With this approach the information redundancy has been kept as low as possible, since the actual data is not duplicated.
Its Not As you wished but check this out.IT's a responsive table.
HTML
<table>
<thead>
<tr>
<th></th>
<th scope="col">BMW</th>
<th scope="col">Audi</th>
<th scope="col">Mercedes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">GPS</th>
<td>1200</td>
<td>1000</td>
<td>1400</td>
</tr>
<tr>
<th scope="row">Bluetooth</th>
<td>700</td>
<td>750</td>
<td>680</td>
</tr>
<tr>
<th scope="row">Sensors</th>
<td>1230</td>
<td>1400</td>
<td>1100</td>
</tr>
<tbody>
</table>
CSS
table, td, th {
border: 1px solid black;
border-collapse: collapse;
padding: 0.5em;
}
#media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "BMW"; }
td:nth-of-type(2):before { content: "Audi"; }
td:nth-of-type(3):before { content: "Mercedes"; }
}
DEMO

how to give space between tr tag and divide by | in html

Hi in the below code how to give the space to two tr rows and i want to divide with this symbol.and background color should occupy the full table.first row no need this | i want to divide all the left side row with full | symbol and then right side td's
can any one help me
Expected output:
About Us | Latest News
Facilities Events
Doctors Gallery
Our Blogs Contact Us
html
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>
css
#slider1 footer {
background-color:#00008B;
width:100%;
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}
see this: http://jsfiddle.net/ze0587d0/
#slider1 footer {
width:100%;
}
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}
td{
padding:5px;
}
.border-right{
border-right:1px solid #000;
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class='border-right'>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>
just add a class for the first td, where you want | sign, and the css border-right:1px solid #000;
Edit:
According to the comment by OP,
If you want all td's having a saperation with |, see this: http://jsfiddle.net/ze0587d0/2/
you need to add a border-right to all tds which are first-child of tr,
tr td:first-child{
border-right:1px solid #000;
}
#slider1 footer {
width:100%;
}
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}
tr td:first-child{
border-right:1px solid #000;
}
td{
padding:5px;
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td >About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>
I think this is what you are after...it uses your pseudo-element but positions it absolutely.
#slider1 footer {
background-color: #00008B;
width: 100%;
color: white;
}
#slider1 table {
table-layout: fixed;
}
#slider1 footer tr td {
padding: 0 1rem;
position: relative;
}
#slider1 footer tr:first-of-type td:first-child:after {
position: absolute;
right: 0;
content: "|";
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>

Categories