So I have a table with two columns and one row. The left column has a list of hyperlinks. I would like the right column to display the contents of those hyperlinks when clicked.
The end result would have the left column still showing all the hyperlinks whilst the right column shows the corresponding contents. How would I go about doing this?
Here's some of the code:
<body>
<table width = "70%">
<col width = "20%">
<tr>
<td><big><strong>Home</strong></big>
<br/>
<big><strong>About myself</strong></big>
<br/>
<big><strong>My hobby</strong></big>
<br/>
<big><strong>My CV</strong></big>
<br/>
<big><strong>Links</strong></big>
</td>
<td valign ="top"> </td>
</tr>
</table>
There may be a simpler way, but I would use a fade-toggle using Javscript.
Have a div on the right with the content, which once the hyperlink is clicked will appear.
$(document).ready(
function() {
$("#div").click(function(e) {
e.preventDefault();
$("#link").fadeToggle(1000);
});
});
Related
I am laying out a table headers and body in razor loops creating text boxes 65px x 65px for each user in the user database. This works. I have the hours of the day down the y axis and the boxes for the users are laid out end to end along the x access just how I want. however the headers which are the usernames start to the right of the last text box cell instead of over the top. I cannot fathom what is going on except inspecting the header in devtools the first user or header cell looks like it's left margin is the length of the table and sure enough the computed css shows it's width some 1045px yet I don't know where that is coming from. If I explicitly set the width of the th's to say, 65px nothing happens!
Also if I add a Id10t before the header loop it joins the others at the end of body columns.
Here is the html
<table id="DayTable" hidden style="position:absolute">
<thead>
<tr>
<th>Hours</th>
#{ foreach (var item in Model.Users)
{
<th>#item.UserName</th>
}
}
</tr>
</thead>
<tbody id="DayTbody">
#{ for (int n = 0; n != 24; n++)
{
<tr>
<td id="Hours" style="display:block;border:none;position:absolute;margin-left:4px;margin-top:21px;border-radius:3px">#DateTime.Now.AddHours(-DateTime.Now.Hour + n).ToString("hh:00:tt")</td>
<td nowrap style="border:none"> <input type="text" class="evt" id="Events" style="display:inline;height:65px;width:65px;margin-left:85px"></td>
#{ foreach (var item in Model.Users)
{
<td nowrap style="border:none"> <input type="text" class="evt" id="Events" style="display:inline;height:65px;width:65px;margin-left:-21px"></td>
}
}
</tr>
}
}
</tbody>
</table>
Tried to add a couple screen snips but.....
[It looks like this to the extreme right of the x-scroll.][1]
[1]: https://i.stack.imgur.com/iIWLX.png
[This is the normal unscrolled view][2]
[2]: https://i.stack.imgur.com/AgAYY.png
I have a multi column table where one td contains the order status and another td contains a button tag. What I want to achieve is to hide the button tag if the order status is set to 'Part complete' and show the button if the status is set to 'Not complete'. Below is html of one of the tr's in the table -
<tr class="order-row ui-sortable-handle" data-index="46929" data-position="4">
<td style="text-align:center">4</td>
<td style="text-align:center">46929</td>
<td style="text-align:center">13/12/2021</td>
<td style="text-align:center">PS Machine shop (X)</td>
<td style="text-align:center">PSMAC</td>
<td style="text-align:center">Part complete</td>
<td style="text-align:center">1</td>
<td style="text-align:center"><button class="hide-unassign unassign-button" type="button"><i class="icon_fa fas fa-trash"></i></button></td>
</tr>
I am using jQuery to .addClass hide-unassign to the button tag, css below -
.hide-unassign {
display: none;
}
This works fine in hiding the button tag, but I am having no luck in only applying it if the value in the status td contains the text 'Part complete'.
Here is the jQuery I am running -
$("#Orders-Allocated").each(function(){
$('.button').has('.td:contains("Part complete")').addClass(' hide-unassign');
});
and this adds the hide-unassign class to all button elements on all rows. Not what I want to achieve.
Any advice would be greatly appreciated.
You selected the button but you should select the table row. Also you added dots to 'button' and 'td'. Dots mean that they are classes. Elements don't have a prefix with dots
So here is an example that could work
$('tr')
.has('td:contains("Part complete")')
.find('button')
.addClass('hide-unassign');
Instead of tr you could also use .order-row. Or if the #Orders-Allocated is the table row context/Id you can use this
I have this table that when you click on the table row this gets "expanded"(it actually slide another table row with the table's colspan), for this I built this angular directive
app.directive('dirt', function($compile){
return{
restrict:'A',
scope:{
},
replace: true,
compile:function(element, attrs){
element.next().children().children().hide();
element.next().children().hide();
var table = element.parent().parent();
var colspan = table.find('tr:first > th').length;
console.log(table.find('tr'))
if(!attrs['compiled']){
var tr = element.next();
tr.children().attr('colspan', colspan);
$compile(tr.children());
}
element.bind('click', function(){
event.stopPropagation();
element.next().children().slideToggle();
element.next().children().children().slideToggle();
});
}
}
});
it's called dirt, and you put it in the tr which you need to click to expand the next tr
something like this
<tbody>
<tr dirt>
<td>123465</td>
<td>A123</td>
<td>7455</td>
<td>MX</td>
<td>US</td>
<td>2</td>
<td>75000</td>
<td>7500</td>
<td>784</td>
</tr>
<tr>
<td>
<div style="width:100%;min-height:1px;background-color:yellow;float:left;">
<div class="col-xs-6">
<span style="font-size:60px;">A4</span>
</div>
<div class="col-xs-6">
<span>rklgjnrkelgtjnkelrtm;lremt;lermt;lremt;lermt</span>
<br />
rlgtjknrekltrmnekltmret;reltmklertmnkelrt
<br />
klgmkldgmnjklfdngmkldfng,mdfgn,dfmgndf,g
</div>
</div>
</td>
</tr>
</tbody>
I have this The way is needed to show how this works with only one set of tr, you just need to click on the first table row to expand it
The problem here is that when I try to use ng-repeat-start and end this happens
plunkr failed
I don't know how to compiled the second row affected by the dirt directive so it can be recognized for the ng-repeat dir, hope you know something about
thanks.
I have the following html I am working with: (a chunk of it here)
<table class="detailTable">
<tbody>
<tr>
<td class="detailTitle" align="top">
<h3>Credit Limit:</h3>
<h3>Current Balance:</h3>
<h3>Pending Balance:</h3>
<h3>Available Credit:</h3>
</td>
<td align="top">
<p>$677.77</p>
<p>$7.77</p>
<p>$7.77</p>
<p>$677.77</p>
</td>
<td class="detailTitle">
<h3>Last Statement Date:</h3>
<h4>Payment Address</h4>
</td>
<td>
<p> 05/19/2015 </p>
<p class="attribution">
</td>
</tr>
</tbody>
</table>
I need to first check if "Statement Date" exists, and then find its position. Then get it's value which is in a corresponding <p> tag. I need to do this using XPath. Any suggestions?
So far I tried using //table[#class='detailTable'][1]//td[2]//p[position(td[contains(.,'Statement Date')])] but it doesn't work.
This is one possible way : (formatted for readability)
//table[#class='detailTable']
//tr
/td[*[contains(.,'Statement Date')]]
/following-sibling::td[1]
/*[position()
=
count(
parent::td
/preceding-sibling::td[1]
/*[contains(.,'Statement Date')]/preceding-sibling::*
)+1
]
explanation :
..../td[*[contains(.,'Statement Date')]] : From the beginning up to this part, the XPath will find td element where, at least, one of its children contains text "Statement Date"
/following-sibling::td[1] : from previously matched td, navigate to the nearest following sibling td ...
/*[position() = count(parent::td/preceding-sibling::td[1]/*[contains(.,'Statement Date')]/preceding-sibling::*)+1] : ...and return child element at position equals to position of element that contains text "Statement Date" in the previous td. Notice that we use count(preceding-sibling::*)+1 to get position index of the element containing text "Statement Date" here.
You can do it this way:
//table[#class='detailTable'][1]//td[#class="detailTitle" and contains(./h3, 'Statement Date')]/following-sibling::td[1]/p[1]/text()
This will find the <td> that contains the Statement Date heading, and get the <td> immediately after it. Then it gets the text content of the first p in that <td>.
I have a HTML file that should display image for an item. The source of the image is stored as a link in a database and is marked by the placeholder <%IMAGE%> in the html file. There are some items that doesn't have any images. So, I want to hide the row instead of display a large empty cell.
//<%IMAGE%> = placeholder for image link
<tr style = "empty-cells:hide;">
<td style="padding-bottom:10px;">
<img src="<%IMAGE%>" style="width:100%"></img>
</td>
</tr>
Example of the placeholder <%IMAGE%>
<%IMAGE%> = "http://mywebsite.com/image/icon-jobs.png"
I have tried empty-cells:hide but it doesn't work.
JSFiddle.
Key Code:
function imgError(image) {
$(image).parent('div.column').css('display','none');
}
As you said that source image is stored in Database all you have to do is to check whether image source is fetched from database.
<?php if($image):?>
<tr style = "empty-cells:hide;">
<td style="padding-bottom:10px;">
<img src="<%IMAGE%>" style="width:100%"></img>
</td>
</tr>
<?php else:?>
<div>No images found</div>
<?php endif;?>