I have multiple tables that hold images throughout my document. Each table has 3 rows (Caption/Image/Source). I need to style my caption to have a border using CSS, but when the caption is blank, the caption class still appears in my markup, resulting in a random border appearing.
Table with caption:
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="..." /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
Table with no caption, with the class="caption" still in the table cell:
<table class="img-include">
<tr>
<td class="caption"></td>
</tr>
<tr>
<td class="img"><img src="..." /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
I want to remove the caption class for cells that are empty, but my current JS removes the class for all my elements:
//remove empty caption
if ($('.caption').is(':empty')){
$("td").removeClass( ".caption" );
}
How can I update this so it only removes the class for empty .caption cells
JS Fiddle: https://jsfiddle.net/5dq63zL4/
very easy
td.caption:empty{
border:none
}
Instead of removing the class with JS, you can use the CSS pseudo-class :empty with :not, to style only non empty captions:
table {
margin: 20px 0
}
.caption:not(:empty) {
border-bottom: 1px solid red;
}
.source {
font-size: .85em;
color: #777
}
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
<table class="img-include">
<tr>
<td class="caption"></td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
<table class="img-include">
<tr>
<td class="caption">My Caption </td>
</tr>
<tr>
<td class="image"><img src="https://via.placeholder.com/350x150" /></td>
</tr>
<tr>
<td class="source">My Source</td>
</tr>
</table>
Related
I am trying to set width:13% of Date column. But it doesn't work in my way. Where is the problem? and can't reduce width of subject column. Thanks in advance.
Check FIDDLE
<div style="width:70%;float:left;">
<div>
<table style="width:100%;" class="TicketsDashboard">
<tbody>
<tr>
<td style="width:13%"><b>Date</b></td>
<td ><b>Type</b></td>
<td ><b>Subject</b></td>
<td ><b>Responsible</b></td>
<td ><b>Action</b></td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',124)">
<td>2019-07-21 12:52:08</td>
<td>Recommendation</td>
<td>First Subject going on perfectly edited</td>
<td>perfect</td>
<td class="editButtonMain">Edit</td>
</tr>
<tr style="cursor:pointer;" onclick="openDetailDiv('PROT-155',125)">
<td>2019-07-21 12:53:26</td>
<td>Decision</td>
<td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
<td>bangldesh</td>
<td class="editButtonMain">Edit</td>
</tr>
</tbody>
</table>
</div>
<br>
<div id="ticketButtons"><input type="button" class="Btn" onclick="openDiag({function: "item", id: 155, dialogTitle: this.value})" value="Add Protocol Item"></div>
</div>
<div style="width:30%;float:left">
<table style="width:100%;" class="lightborder" id="headTable">
<tbody>
<tr id="slaTr">
<td width="100" valign="top">SLA:</td>
<td>
<div id="effortDiv" style="width:50%;float:left;text-align:center;padding-bottom:10px;display:none"></div>
<div id="timeDiv" style="text-align:center;padding-bottom:10px;display:none"></div>
</td>
</tr>
<tr>
<td width="100">Status:</td>
<td id="statusTd">Suggestion</td>
</tr>
<tr>
<td>Protocol Number:</td>
<td id="breadCrumb">PROT-155</td>
</tr>
<tr>
<td>Subject:</td>
<td id="protsubject">Chonchol -- test</td>
</tr>
<tr>
<td>Start Date:</td>
<td id="protstartdate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>End Date:</td>
<td id="protenddate">0000-00-00 00:00:00</td>
</tr>
<tr>
<td>Keeper:</td>
<td id="protkeeper">ewrwer</td>
</tr>
</tbody>
</table>
</div>
your subject column is going out because u didn't used space in this code <td>lklk kdj djjdjdjdjdjdjdjdjdjdjdjdjdjdjjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td> if you want to be stop exceeding you can give space like this <td>lklk kdj djjdjdjdjdjd jdjdjdjdjdjdjdj djjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdj djdjdjdjdjdjdjdjdjdjdjdjdjdjdj</td>
What actually you wanted to get let us know clearly.
To increase the width of td
instead of <td style="width:13%"> give <td style="padding-left:13%">
To avoid the overflow
add
<style>
table { table-layout:fixed; }
table td {word-wrap:break-word;}
</style>
Thanks,
the reason of it, you should set the same style for the given column in every rows, or add a thead section in which you set it once of the column.
I have a table that needs to have an undefined number of rows that should display a set number of elements when clicked (in this case div, because I read that it's the best way to use toggle on tr). Best I could do is make it for an already set number of elements...
jsfiddle.net - This is with the set number of elements.Working code..
And this is all I got so far trying to figure it out.
Working js code:
$('.warning').on('click', function(e) {
var $ele = $(this).nextUntil('.warning').find('td > div');
$ele.slideToggle();
});
});
In this case, I need each clicked table row to display three corresponding divs.
Obviously, answer with jQuery but I would appreciate a solution in vanilla js as well.
EDIT: I am sorry, I neglected to mention I want to add a sliding animation. And slideToggle doesn't seem to work...
EDIT2: Marked best answer by Terry.
Changed fiddle to working code.
We can actually greatly simplify your markup for your table rows:
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
...and use the following logic:
.nextUntil('.warning') to select the trailing <tr> after each .warning element. See the documentation for .nextUntil().
Use .slideToggle() to show/hide elements, without the need to use overly verbose CSS detection
Here is the logic above, written in jQuery:
$('.warning').on('click', function() {
// Selects all siblings until the next `.warning` <tr>
var $ele = $(this).nextUntil('.warning').find('td > div');
$ele.slideToggle();
});
If you only want to target downstream <tr> that has the class hidden (useful in the scenario where there might be other irrelevant <tr>s in the way that you do not want to toggle), you might want to add an optional filter instead:
$('.warning').on('click', function() {
// Selects all siblings until:
// 1. the next `.warning` <tr>, and
// 2. has the class "hidden"
var $ele = $(this).nextUntil('.warning').filter(function() {
return $(this).hasClass('hidden');
}).find('td > div');
$ele.slideToggle();
});
Of course this means that you get strange stacked borders when hiding elements, because you are technically hiding the table row content, but not collapsing the table rows/cells themselves.
Here is a proof-of-concept example:
$(function() {
$('.warning').on('click', function() {
var $ele = $(this).nextUntil('.warning').filter(function() {
return $(this).hasClass('hidden');
}).find('td > div');
$ele.slideToggle();
});
});
table {
width: 75%;
border-collapse: collapse;
}
tr,
td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden td div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
</tbody>
</table>
Please see below snippet , note that I've set all the hidden class , class='hidden' , it's usless to name each of them differntly :
$(".warning").on("click",function(){
$(this).nextUntil(".warning").find(".hidden").slideToggle();
})
table {
width: 75%;
border-collapse: collapse;
}
tr, td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden, .hidden1, .hidden2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
</tbody>
</table>
$(".warning").on("click", function() { use jQuery .on will add the event to dynamic element (future generated element).
then find the next hidden and toggle will do the trick.
check the example:
$(".warning").on("click", function() {
var nextHidden = $(this).next('.hidden');
nextHidden.find('div').slideToggle();
});
table {
width: 75%;
border-collapse: collapse;
}
tr,
td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
</tbody>
</table>
here i want to remove a specific class from a <td><td> inside table and i have a another table in which i have a button and by clicking on this button i want to remove class of <td><td> which is in different table.
My HTML is As Like
<table id="test">
<tr>
<td class="background"></td>
<td></td>
<td class="background"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="background"></td>
<td class="background"></td>
<td class="background"></td>
</tr>
</table>
<table>
<tr>
<td>
<div id="Close">
<span>Click Me</span>
</div>
</td>
</tr>
</table>
Jquery Code am trying is
$("#Close").click(function () {
$('#test', 'tr','td').removeClass("background");
});
Try this:
$("#Close").click(function () {
$('#test td').removeClass("background");
});
$('#test td').removeClass('background');
Maybe this will help:
document.getElementById('tdid').className = '';
$("#Close").click(function() {
$('.background').removeClass("background");
});
.background {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
<tr>
<td class="background">1</td>
<td>1</td>
<td class="background">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td class="background">1</td>
<td class="background">1</td>
<td class="background">1</td>
</tr>
</table>
<table>
<tr>
<td>
<div id="Close">
<span>Click Me</span>
</div>
</td>
</tr>
</table>
If you want to remove all then select the class then remove that class.
I have a 2 columns TABLE with first TD containing another TABLE with 3 rows of contents and second TD with an image as below:-
<table id="myTable" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Wellness and Care
</td>
</tr>
<tr>
<td align="left">
630 Woodbury Drive
</td>
</tr>
<tr>
<td align="left">
641.613.1450
</td>
</tr>
<tr>
<td align="left">
No Webaddress
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" id="imgPhone">
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Hospital
</td>
</tr>
<tr>
<td align="left">
N/A
</td>
</tr>
<tr>
<td align="left">
641.613.1451
</td>
</tr>
<tr>
<td align="left">
No Webaddress
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" id="imgPhone">
</td>
</tr>
</tbody>
</table>
I am trying to disable the image on the second column of the row, if the Value of one of the TD is "N/A". I am stuck at getting the parent TR and going to second TD to do something.
My try is as follows:
$('#myTable tr').each(function () {
if ($(this).find("td").text().trim() == "N/A") {
var cellIndex = $(this).index();
var nextTD = $(this).children('td').eq(1).index();
// I am basically stuck here in getting next TD
}
});
Any help is appreciated!!
DEMO
$('#myTable td:first-child td:contains("N/A")').parents('td').next().find('img').hide();
Try
$( '#myTable td:first-child td:contains("N/A")' ).closest('tr').closest('td').next().find('img').hide()
Demo: Fiddle
What I would do in your case is add a class for your 4 tr tags with text. Then you can just parse through each of those 4 by their class and if one of them is equal to 'N/A' you can grab the image by its ID and hide it.
HTML:
<td class="test" align="left">
Wellness and Care
</td>
JQuery:
$('.test').each(function () {
if($(this).text().trim() == 'N/A') {
$("#imgPhone").toggle();
}
});
JSFiddle: http://jsfiddle.net/ax6Mv/
This should be enough to get you started:
$( '#myTable td:first td' ).each(
function() {
if ( $( this ).text().trim() == 'N/A' ) {
$( '#myTable td' ).eq( 1 ).hide();
}
}
);
Is it possible to create a table with different number of cells in each and every row with the same width and height ..?? If so how it can be done in a simpler way ..???
Note:
Row width and height are same
Cell width differs in each and every row
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
This is what i have tried using coll span ..Here let's say first row cells width is 30px,30px,30px . if i use coll span , it will be like 60px,30px but i want it as 50px,40px with only 2 cells
I want like this
You can use colspan to create cells that span multiple columns.
jsFiddle
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
If you want all to be the same width and height but only have the number of cells differ you can just not style certain cells in the <table>.
jsFiddle
<table>
<tr>
<td class="content"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td class="content"> </td>
<td class="content"> </td>
<td></td>
</tr>
<tr>
<td class="content"> </td>
<td class="content"> </td>
<td class="content"> </td>
</tr>
</table>
Update
Your update with the image, yes you can accomplish this using colspan:
jsFiddle
<table>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
This uses four columns, the middle two are smaller than the others, here is an image that illustrates how the columns are set up:
Update #2
Here is an example of more randomly sizes cells. The first row 10%, 90% and the second row 55%, 45%.
jsFiddle
HTML
<table>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
</table>
CSS
table {
width:100px;
}
td {
border: 1px solid #000;
height:1em;
}
tr:first-child td:first-child {
width:10%;
}
tr:first-child td:last-child {
width:90%;
}
tr:last-child td:first-child {
width:55%;
}
tr:last-child td:last-child {
width:45%;
}
Yes you can, with the colspan attribute for table cells, like this:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td colspan="5">2</td>
</tr>
<tr>
<td colspan="2">1</td>
<td>2</td>
<td colspan="2">3</td>
<td>4</td>
</tr>
</table>
Working example: http://jsfiddle.net/sk5cB/
Not positive that this is what you're looking for, but you could create a table with merged cells by using the colspan attribute in your <td> tags.
HTML colspan Attribute
You may also use and create a table in
<tr> </tr> tags
If you intend to insert content in those cells and prefer to maintain the same cell width then it is impossible using only tables. I've searched for solutions on this problem as well, it looks great when the cells are empty like Daniel Imms presented in his example, but if you add content to those cells their width starts getting bigger and the other cells on the row start getting smaller. Specifying table-layout:fixed doesn't help because then the first row becomes the rule for all following rows.
If you have the possibility to use divs with float left and width in percentage and a clear fix display:table div that wraps them all, just like Bootstrap 3 does in its grid system, then that'll be much more reliable.