Add a table before innerHTML=xmlhttp.responseText; - html

I'm calling a table from a remote server like this
document.getElementById("datatable").innerHTML=xmlhttp.responseText;
but I'm wondering if I want to add a title on top of this table how is that coded? I'm thinking of adding a table and putting that title in
<table>
<tr>
<td>Title of the Table</td>
</tr>
</table>

I would use the <th> html element.

If JQuery is an option, it becomes very easy:
$(document).ready( function() {
$('#datatable').prepend('<thead><tr><th>Title</th></tr></thead>');
});

Related

Attaching an Href to a row inside a table

I am using html in a .php file to code. I have a statement:
<html>
<tr>
<td>Hi<td>
<td>Test<td.
</tr>
</html>
How can I attach an href to the row? Simply adding href in the tag didn't work. Anybody know how? Note: The table was defined earlier in the code this is the snip-it portion of the row.
You do not attach href to row instead you better do as
<table class="table table-stripped">
<tr class="selectedRow">
<td>Hi</td>
<td>Test</td>
</tr>
</table>
then using jquery :
$('.selectedRow').click(function(){
alert('do something');
});
View LiveWeave

CSS: Is it possible for a td to infer style from its header or vice versa?

I am formatting my tables, and some of them have hyperlinks in the right hand column which I want right aligned. Is there a way from css to infer that the column has links in it, and right align the whole column, including the header?
Alternatively, is there a way to apply a class to just the header and have it affect the alignment of all of the columns underneath it?
I recognize that I can apply a style to the individual th and td elements, but I was hoping for something a little more elegant.
EDIT: There is only one table.
<table>
<thead>
<tr>
<th>Some Column</th>
<th>actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some data</td>
<td>Edit</td>
</tr>
</tbody>
<table>
I am asking if I can apply a style to the element for the actions and write CSS which will cause all of the elements in that column be style a particular way.
This functionality is not part of CSS. Shaun Inman suggested something like a parent selector that would allow parents to inherit from their children, but there are tons of issues with this methodology.
I would suggest, instead, that you try a javascript solution. You could search the table to see if it contains links, then add a class to the table in the case that they do. Something like this:
HTML
<table>
<thead>
<tr>
<th>Normal</th>
<th>Align Me</th>
<th>Normal</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
jQuery
$('td > a').each(function(){
var $td = $(this).parent();
$td.addClass('align-right');
var $th = $td.closest('table').find('th').eq($td.index()).addClass('align-right');
});
Here is a fiddle for you to check out.
CSS can only be applied to child or siblling elements. Children cannot tell their parents what to do.
Applying a class to the TD is the right thing to do.
What you want can not be done with CSS.
But in your special case, you can refer to the fact, that the column with the links is the last one in each row.
There is a special "pseudo-class" in CSS for this: last-child.
th:last-child { ... }
td:last-child { ... }
I came up with a solution, but it only works when the actions are the last column in the table.
<table class="hasActions">
...
</table>
And CSS:
table.hasActions td:last-of-type, table.hasActions th:last-of-type {
text-align: right;
}
Since this doens't work for arbitrary columns, I'll leave the question open for now.

backbone js append view [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Backbone js: How to remove extra tag in view?
How come whenever I append a new backbone view to an HTML element, it automatically surrounds this view with a <div> </div>?
For example I have a table in my HTML page
<table class="table table-hover">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody id="tbl">
</tbody>
</table>
Now in my backbone controller, I perform the following
$("#tbl").append(new tblview().render().el);
and in the actual view's HTML template I have
tblview.html
<tr>
<td>entry3</td>
<td>entry4</td>
</tr>
Now when i look at this in the browser, and inspect the html element.. it renders like this:
<table class="table table-hover">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody id="tbl">
<div>
<tr>
<td>entry3</td>
<td>entry4</td>
</tr>
</div>
</tbody>
</table>
and thus is becomes all out of line? How can I fix this issue??
I want it to render the view without these extra <div> </div> in the table.
Backbone automatically create a div to surround any view. To overwritte the default, you need to set the tagName attribute when you extend a view. http://backbonejs.org/#View-extend
Backbone.View.extend({
tagName: "tr"
});
Your template doesn't need to include the tr tags. tblView should have tagName set to tr.

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 can I make a jsp table scrollable?

I have the table bellow on a JSP page. The number of rows on the table is variable, populated by a list passed from the controller. How can I add scrolling to it so the table header is fixed? I know it's easy enough on JSF, but how to do it on JSP?
<body>
<table>
<thead>
<tr>
<th>PO</th>
<th>Product</th>
<th>Batch Size</th>
<th>SPI</th>
<th>AOI</th>
<th>PTH</th>
<th>Inspection</th>
<th>Tests</th>
<th>Expedition</th>
</tr>
</thead>
<tbody id="prodReportTable">
<c:forEach var="pojo" items="${list}">
<tr>
<td>${pojo.po}</td>
<td>${pojo.productName}</td>
<td>${pojo.poSize}</td>
<td>${pojo.spi}</td>
<td>${pojo.aoi}</td>
<td>${pojo.pth}</td>
<td>${pojo.inspection}</td>
<td>${pojo.tests}</td>
<td>${pojo.expedition}</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>
If you don't care about cross-browser compatibility you can use this style on the TBODY:
#prodReportTable
{
overflow-y:scroll;
height:200px;
position:absolute;
}
Also, you can get rid of the awful row spacing in IE with: (no scroll bar unfortunately though)
#prodReportTable TR
{
height:1em;
}
Have you check out JQuery Tablesorter?
Take a look at jqgrid (http://www.trirand.com/blog/), which is a jquery table grid plugin. I have used it successfully and it saves a ton of time. It has sorting, filtering, formatting, paging, and other options.
If you want a somewhat 'lower tech' solution, just make a header div and a body div that is x-scrollable. If that doesn't make sense just let me know and I can send a sample...
Good Luck!