Row id's in html table - html

I have a jsp that displays a table of xml files and I want do display its content when I click on certain file in a table, but I dont know how to remember which row ID i clicked on so I know which file to display. This code displays table of files.
<table class="zakladni" border="1">
<thead>
<tr>
<th>Name</th>
<th>Version</th>
</tr>
</thead>
<s:useActionBean beanclass="org.cz.muni.fi.pb138.WARActionBean" var="actionBean"/>
<c:forEach items="${actionBean.getWARs()}" var="WAR">
<tr>
<td><c:out value="${WAR.getFileName()}"/></td>
<td><c:out value="${WAR.getTimestamp()} "/></td>
</tr>
</c:forEach>
</table>

The easiest solution is to generate an anchor (<a> element) directly into the table. That would look something like this:
<td>
<a href="fileDir/${WAR.getFileName()}">
<c:out value="${WAR.getFileName()} "/>
</a>
</td>
Where I suppose the file itself is stored in a directory fileDir, you can change it anyway you need.
I just hope you get the idea. And btw, greetings from Cuni!

Related

How to use URL Rewriting within foreach loop?

<body>
<form>
<table>
<tr>
<th pic</th>
<th>rating</th>
</tr>
<c:forEach var="forumVO" items="${list}">
<tr>
<td><img src="<%=request.getContextPath()%>/forum/goforum?action=showImage&forum_no=${forumVO.forum_no}"></td>
<td><%=request.getContextPath()%>/forum/goforum?action=showRating&forum_no=${forumVO.forum_no}</td>
</tr>
</c:forEach>
</table>
</form>
above is a simple code which both tags uses url rewriting to send its information into the Servlet. but the one which has img tag is working good for showing the picture, but the second tag is not working properly, the html seems to see contents without <% %> and ${} as plain String objects, is there any ways to modify this code so the seconde tag can also sending its value to the Servlet?
<c:forEach var="forumVO" items="${list}">
<tr>
<td><img src="<%=request.getContextPath()%>/forum/goforum?action=showImage&forum_no=${forumVO.forum_no}"></td>
<td>${forumVO.forum_no}</td>
</tr>
</c:forEach>
the ${forumVO.forum_no} will print the number inside it no need to call the servlet again

How to extract only the 1st table tag from a html page having various nested table tag

I have the following html page. I want to extract data only within the 1st table tag in C#. the html page code is:
<table cellpadding=2 cellspacing=0 border=0 width=100%>
<tbody>
<tr>
<td align=right><b>11/09/2013 at 09:48</b></td>
</tr>
</tbody>
</table>
<center>
<table border="1" bordercolor="silver" cellpadding="2" cellspacing="0" width="100%">
<thead>
<tr>
<th width=100>ETA</th>
<th width=100>Ship Name</th>
<th width=80>From port</th>
<th width=80>To berth</th>
<th width=130>Agent</th>
</tr>
</thead>
<tbody>
<tr><td>11/09/2013 at 09:00 </td>
<td>SONANGOL KALANDULA </td>
<td>Cabinda </td>
<td>Valero 6 </td>
<td>Graypen </td>
</tr>
</tbody>
</table>
To be more specific I want to extract only the row having date 11/09/2013 at 09:48 the below mentioned code is under the first of tag I am using regex
"<table[^>]*>([^<]*(?:(?!</table)<[^<]*)*)[</table>]*"
but with this I am getting whole of the page source that is I am getting the data between all the table tags but I want only text between first table tag.
Can anyone tell me regular expression with which I can only extract this particular portion from the whole html page?
When trying out your version here, it seems to work to me on the input you specified, though [</table>]* should really be just </table> ([</table>]* means any number of characters in the set: <,/,t,a,b,l,e,>)
This seems like it would bear simplification, though. This should also work:
<table[^>]*>.*?</table>
All bets are off if you have nested tables, of course.

Why does JSF's ui:repeat add invalid tags to my HTML?

In my JSF app's page template, I use ui:repeat to iterate over some data to build an HTML table. I want to use basic HTML tags for this rather than something like h:dataTable, because when I tried to apply some styles and JavaScript events to that, they didn't appear on the correct elements. However, when using ui:repeat for this purpose, I find that it adds invalid tr and td opening an closing tags at inappropriate places.
The page template, has code similar to this:
<table border="1" style="width: 100%;">
<ui:repeat var="row" value="#{bean.testData}">
<tr>
<ui:repeat var="column" value="#{bean.testData}">
<td>#{row}, #{column}</td>
</ui:repeat>
</tr>
</ui:repeat>
</table>
I actually want to do something more complex than this, but this is the simplest example of the problem.
The bean contains:
private final String[] testData = {"fu", "bar"};
public String[] getTestData() {
return this.testData;
}
The output of this is:
<table border="1" style="width: 100%;"></td>
</tr>
<tr>
<td>
<tr>
<td>fu, fu</td>
<td>fu, bar</td>
</tr>
<tr>
<td>bar, fu</td>
<td>bar, bar</td>
</tr></td>
</tr>
<tr>
<td>
</table>
What I expected the output to be is:
<table border="1" style="width: 100%;">
<tr>
<td>fu, fu</td>
<td>fu, bar</td>
</tr>
<tr>
<td>bar, fu</td>
<td>bar, bar</td>
</tr>
</table>
I can't figure out why JSF's adding this at the beginning and end of the ui:repeat loop's output:
</td>
</tr>
<tr>
<td>
In Google Chrome and Firefox, this causes an extra row containing a single, empty cell at the top and bottom of the table.
Any ideas of how to prevent this?
Update: I didn't think to mention that this table I'm generating will appear inside a h:panelGrid element. I don't know whether that will make a difference to this question or not.
As per the update, you need to encapsulate your code inside a JSF tag like this :
<h:panelGrid>
<ui:fragment>
<table border="1" style="width: 100%;">
<ui:repeat var="row" value="#{bean.testData}">
<tr>
<ui:repeat var="column" value="#{bean.testData}">
<td>#{row}, #{column}</td>
</ui:repeat>
</tr>
</ui:repeat>
</table>
</ui:fragment>
</h:panelGrid>
Ortherwise the rendering of the h:panelGrid will not be able to split correctly in cell the nested content. h:panelGrid is designed to handle JSF components only.
More info :
JSF 2 h:panelGrid documentation
JSF 2 h:panelGrid example

Html table with multiple rows

I want to expand a column and display a set of rows inside it.
What I am trying to achieve :
What I have achieved so far
My code:
<table style="background-color:lightgreen" border="1">
<tr >
<td>Id</td>
<td>Name</td>
<td>Col1</td>
<td>Col2</td>
<td>Group Related Column (value for each expanded cell)</td>
<td>Col4</td>
</tr>
<tr >
<td rowspan="5" >#1</td>
<td rowspan="5">AFSBEESS1</td>
<td rowspan="5">
<tr><td>[-] Group Name</td></tr>
<tr><td>#1 in Group</td></tr>
<tr><td>#2 in Group</td></tr>
<tr><td>#3 in Group</td></tr>
</td>
<td rowspan="5">
<tr><td>[-] Group Name</td></tr>
<tr><td>#1 in Group</td></tr>
<tr><td>#2 in Group</td></tr>
<tr><td>#3 in Group</td></tr>
</td>
<td>x</td>
<td>x</td>
</tr>
​
My fiddle input : http://jsfiddle.net/yDUZg/78/
What is the best table format to do the same?
Is there some plugins to achieve the same effect of easily grouping the column?
Or a better approach to the problem?
Doing in ASP.NET, but as this is a basic thing , I am tagging it as HTML
Have you looked at something like - http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx ?
This plugin allows you to collapse/expand table rows as required.
You html above is wrong, as you nesting tr within td elements. When you add rowspan="x" to a column, you should omit it for the next x rows. eg,
<table>
<tr>
<td rowspan="2">Funky</td>
<td>Joy</td>
</tr>
<tr>
<td>Fun</td>
</tr>
</table>
You are getting confused over the concept of rowspan - http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
For now, I have created a JSFiddle that does what you have requested. The example is highly specialised, and may not work in a generalised way. In the fiddle, I have removed the rowspan and colspan properties. Feel free to add them in when you are comfortable with what they do.
If you're set on using tables then why not just nest them? Where you want the rows to appear within a cell, just add another table.
You can probably do this with JavaScript. I think it would look something like this:
<script type="text/javascript">
...
// You could use these in an event (inside some callback function)
$('tr.expand').style.visibility = 'hidden'
$('tr.expand').style.visibility = 'visible'
// OR you could use these...
$('tr.expand').show();
$('tr.expand').hide();
...
</script>
<!-- And then of course the group of <tr>'s you want to expand
on an event would all have the same class -->
<table>
...
<tr class="expand">
<td>...</td>
</tr>
<tr class="expand">
<td>...</td>
</tr>
...
</table>

How do make a profile table?

I am trying to get this table on my site to have an image on the left and information about the staff member on the left. It is in a WordPress page but regardless of weather it's on the page or in a standalone HTML document it doesn't seem to render the way I want it to.
It's supposed to follow the same general idea as http://grab.by/djQk.
I attempted to copy their source but couldn't get it to render so I pulled their source from my site and started from scratch and still couldn't get it working.
http://radio.powercastmedia.net/staff/
I have implemented what you need using CSS instead of tables.
See this JSFiddle
Cheers, Sam
If you're using tables....
<table>
<tr>
<td style="width: 25%;">
<img src="blah"/>
</td>
<td>
<table>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
<td>
</tr>
</table>
Note: the problem with your pastebin example is that you're using <tr> inside a <td> which is incorrect - <tr> can only go inside a table so you need additional table tags.
It's also possible to do with a single table using colspan and rowspan on individual cells, but I'd personally prefer to do it by making the image a float left eg:
<div>
<img src="blah" style="float: left;"/>
<p>Name: John</p>
<p>Something else</p>
</div>