Using Jquery, I want to build a table of size 4x4 with equal sized blocks, which I can "fill" with a color.
Visual example:
The circle does not have to be included for this question.
I'm looking for advice, links, or suggestions on how to build this. I'm not very familiar with Jquery's canvas/draw functionality but I think that may be a possible solution. The determinate for which boxes are filled will be set by how many levels of a job a player has finished. For example the first column shows that the player has completed all 4 levels.
However, I can worry about how to send in the information. What I'm unsure of is (again) the best way to make a simple table like this.
Here you go:
HTML:
<table>
<tr>
<td class="a"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="a"></td>
<td></td>
<td class="c"></td>
<td></td>
</tr>
<tr>
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
<td></td>
</tr>
<tr>
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
<td class="d"></td>
</tr>
</table>
CSS:
td { width:40px; height:40px; border:1px solid #333; }
td.a { background-color:red; }
td.b { background-color:blue; }
td.c { background-color:purple; }
td.d { background-color:green; }
Additionally, you may want to use a CSS Reset style sheet in order to make the table appear the same cross-browser.
Live demo: http://jsfiddle.net/simevidas/hdBZY/
Here's a working jsFiddle, it uses jQuery and Tables to do exactly as you asked. From an array of items, it will automagically build the graph, all you have to provide is the array and the css.
http://jsfiddle.net/Z7Ds6/3/
I agree with the comments you've gotten, I don't see anything wrong with using plain old html tables for this.
You could either create the table and css like Sime Vidas suggested and manipulate class names with jquery, or you could create the html elements via jquery with something like $('<table>') etc, and use the .append() method to create child elements and/or dump the code to the page somewhere.
Related
I have a collection of elements of different types. I want to iterate them using ng-repeat, and conditionally draw the right tr per each type.
I can't use ng-repeat-start since I want to use virtual scrolling and none of the libraries I found supports the start/end concept.
Here is a jsfiddle: http://jsfiddle.net/mx6v8j98/1/, which doesn't work. here is the HTML part:
<div ng-app ng-controller="MyCtrl">
<table>
<tbody>
<tr ng-repeat="item in itemsList" ng-switch="$even" ng-class-even="'even'" ng-class-odd="'odd'">
<div ng-switch-when="true">
<td>{{item}} is even</td>
<td>even content</td>
</div>
<div ng-switch-default>
<td>{{item}} is odd</td>
<td>odd content</td>
</div>
</tr>
</tbody>
</table>
</div>
In my real world case, I have many td with complex content, so I don't want to use ng-if/ng-switch-when on each
Update: I can put the ng-repeat on the <tbody> tag, but that looks ugly and I'm not sure what the consequences are regarding styling
Update II: In my case, the 'tr' tag itself is rendered differently according to a condition
As stated in another answer, <div> is not allowed as a child element of <tr>.
You are clearly trying to use <div> as a logical container for ng-switch-when, but since ng-switch-when (and ng-switch-default) supports multi-element, you don't need this container:
<tr ng-repeat="item in items" ng-switch="$even">
<td ng-switch-when-start="true">{{item}} is even</td>
<td>even content 1</td>
<td>even content 2</td>
<td ng-switch-when-end>even content last</td>
<td ng-switch-default-start>{{item}} is odd</td>
<td>odd content 1</td>
<td>odd content 2</td>
<td ng-switch-default-end>odd content last</td>
</tr>
It seems you cannot put <DIV> within <TR> but before <TD>.
Solution 1: Put conditional expression in every <TD>.
<!-- TDs for even row -->
<td ng-if="$even">{{item}} is even</td>
<td ng-if="$even">even content</td>
<!-- TDs for odd row -->
<td ng-if="!$even">{{item}} is odd</td>
<td ng-if="!$even">odd content</td>
Solution 2: For fairly complex table structure, you'd consider create your own directive to represent row cells.
I am coding a page with several dynamic/sortable tables in it (one below another) to share PDF documents. Each Document tittle in the table contain a link to open the PDF in a new tab. Everything works fine, BUT when I scroll down the page and open a dynamic table/or minimize the table, the page jumps to top of the page/to default position. JavaScript's RETURN FALSE fixes this problem but all the links in the table are dead. Can anyone help to fix this? I attach the basic code structure here you can see what I am doing...
HTML:
<div id ="fifth">
<ul id="droptable">
<li><h1>Tittle of The Dynamic Table5</h1>
<div>
<table class="sortable" width="100%" border="0">
<tr>
<td id="tablehead" width="55%">Sort by tittle</td>
<td id="tablehead" width="25%">Sort by Author</td>
<td id="tablehead" width="25%">Sort by date</td>
</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document1.pdf" target="_blank">Document1Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document2.pdf" target="_blank">Document2Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document3.pdf" target="_blank">Document3Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX<a></td>
</tr>
</table>
</div>
</li>
</ul>
</div>
JAVASCRIPT:
// Dropdown Table Code
$(function(){
$('#droptable li a').each(function(){
$(this).click(function(){
$(this).siblings('div').slideToggle(300); // If I add RETURN FALSE here the page doesn't jump to the default position/to the top of the page (when open or minimize the table) BUT links in the table are out and don't work anymore //
});
});
});
2 things
1st id's should be unique, so change all instances of
id="tabledata"
to
class="tabledata"
2nd, try to give you td's that contain the link a different class than those that have data, then attach slide toggle to that class, maybe like:
$('.newclass').each(function(){
.....
I didn't succeed with the hints you gave but thanks anyway! I did everything but page was still jumping when opening/closing the table. BUT...I was browsing different forums and found this simple answer.
Using "#/" instead of "#" and the page won't jump. Hmm.. sometimes the answer is too simple, seemingly :o
<div id ="fifth">
<ul id="droptable">
<li><h1>Tittle of The Dynamic Table5</h1> ...
Rock'nRoll!
I have a table that I am trying to make mobile friendly see below:
<tbody>
<tr>
<td>one</td>
<td>one</td>
<td>one</td>
</tr>
<tr>
<td>two</td>
<td>two</td>
<td>two</td>
</tr>
</tbody>
I'm looking to create single columns of this table so it can be display better on mobile.
Conceptually I'm thinking to ad an /tr after each /td excluding /td:last of types
My tables are dynamically generated, so it needs to dynamic solution, anyone have anythoughts on how to approach this?
Below is what the resulting table would ideally look like.
<tbody>
<tr><td>one</td></tr>
<tr><td>one</td></tr>
<tr><td>one</td></tr>
</tbody>
<tbody>
<tr><td>two</td></tr>
<tr><td>two</td></tr>
<tr><td>two</td></tr>
</tbody>
You could achieve the same look with CSS and media queries:
#media (max-width: 400px) { /* or whatever you want your mobile breakpoint to be */
tr, td { float:left; width:100%; }
}
http://jsfiddle.net/nWPzp/
If you're not displaying tabular data I find my preference is to stay away from tables and use lists/divs instead. That being said here are some examples of "Responsive Tables" that do contain tabular data:
http://css-tricks.com/responsive-data-table-roundup/
As pointed out a lot of them are css tricks.
Try JS. Use getElementById. Write:
document.getElementById("dynamic").innerHTML="new code"
I have this table that includes details about its items on the right and I need to have all the cells in a column of the exact same width as the longest one, just like in the screenshot below:
This works if I use a regular table, but now I need to add an accordion function on top of it, so when I click on a row, the row's associated content will slide down from under each one.
The only way to add those content divs between table rows is to wrap them in <tr> tags, which don't work with the slideDown() and slideUp() effects.
Now I recreated the table in a fiddle using <dl> tags, hoping to solve this using CSS somehow, but no such luck. Here's the link: http://jsfiddle.net/bbDYX/ - everything is working properly, except for the width issue.
The only solution I can think of now is going through each table-cell on each of the right hand columns with JavaScript and setting their width to the same value as the highest width cell. But I want to avoid that if I can.
Any ideas?
This is what you need: myjsfiddle
css:
.con1
{
width:100%;
height:50px;
background-color:#F3E2A9;
}
Html:
<table border='0' cellspacing='3' width='100%'>
<tr bgcolor='lightblue'>
<td><a href='#' class='open1' >Item</a></td>
<td>detail 1</td>
<td>detail 2</td>
<td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
<tr bgcolor='lightblue'>
<td><a href='#' class='open1' >Item</a></td>
<td>detail 1</td>
<td>detail 2</td>
<td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
<tr bgcolor='lightblue'>
<td><a href='#' class='open1' >Item</a></td>
<td>detail 1</td>
<td>detail 2</td>
<td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
</table>
Script:
$('.con1').hide();
$('.open1').click(function() {
$(this).parent().parent().next().find('.con1').slideToggle();
return false;
});
have fun styling it...
(tested)
You can't slide up the <tr> tag, but you can slide up the <td> tags. Not sure if this would work for you, but worth considering...
$("#somerow").find("td").slideToggle();
Ok, as I stated in a comment, I would keep the table and create a "custom widget" for the accordion-like effect.
The thing would be very simple, using jQuery UI animations etc.
For example, you can create a basic "description toggle" with just four lines of code:
$('.mytable .description').hide();
$('.mytable').on('click', '.title', function(){
$(this).next('.description').toggle();
});
(of course then you can customize the .toggle() by adding effect type, duration, ...)
Here it is a working example: http://jsfiddle.net/JAmFh/
I need the header to be fixed in the below table.
<thead>
<tr >
<td>tjj</td>
<td>Marketing Phjgjgh </td>
<td>Mhjgjg Program Description </td>
<td>Markjghjghgram type </td>
<td>CRM CjgjgjFlag </td>
<td>Brajghjjative </td>
<td>Marketijhgjhm Brand </td>
<td>Acjhgjting Program </td>
<td>CRMjgjhype</td>
<td>Sweejghjhkes</td>
<td>Oldgjjgjivity Bypass</td>
</tr>
</thead>
<tbody>
<tr class="alternate1">
<td align="center"></td>
<td>EShjgjARDI</td>
<td>eShojghjmports</td>
<td>4 - Datajgjgjg or gjghjCapture</td>
<td>Y</td>
<td>38 jgjhards</td>
<td>00 jghjhporate</td>
<td>jh</td>
<td>jh</td>
<td>jgh</td>
<td>ghjhg</td>
</tr>
---SNIP-just more rows---
I've tried many solutions, but they only work on some browsers. For example,
thead tr{
position:relative;
top: expression(offsetParent.scrollTop);
}
and <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> makes it work in only IE. The two-table concept does not work either.
Have you considered using jQgrid? I highly recommend it. It works in every browser I have ever tried and adds significant functionality.
If you don't want to do that, you may want to take their rendered approach. They have a table for the header and another for the body. The biggest hurdle with this approach is getting the columns to match width, but their approach works well and you can make the full result resize as needed.
You can see it in action here.