Dynamically break down table td into individual tr's - javascript

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"

Related

Hiding some columns if table is too big

I am a beginner in react and web apps in general let me know if anything is unclear.
I have the following table :
<div>
<table id="mytableid" className="some classes">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone Number</th>
<th>Age</th>
<th>Sex</th>
<th>Blood Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Some place somewhere</td>
<td>093-1252-4879</td>
<td>51</td>
<td>Male</td>
<td>AB</td>
</tr>
</tbody>
</table>
</div>
Let's say I want to hide Address and blood type if table is too big to fit in a div.
The way I am thinking of doing this is to check the size of the div and the table in componentDidMount
if the size of the table is bigger than the div then I will set the style of those two columns to display:none.
I did something similar for submenu transitions where I would change my component set on the componentDidMount to get the height then put the visibility to hidden by changing the state. I didn't notice any slowness neither can I see that the submenu was actually visible(on chrome)
I saw some people are doing things like for the nth column to not be displayed if the screen is too small using purely css which is nice. But in my case I am not sure if I could do something similar as I would like the user of my component to specify which columns to hide.
My question is if it is the usual way for webapp developers to display the component check the result on componentDidMount and then change how things look or is there a different pattern?
The one pattern I have seen is, removing items on demand in such cases, i.e. user has choice of which columns to see and which one to hide. Refer this dynamic-columns example from an open source.
http://uikernel.io/examples/dynamic-columns/

ol outside of table element

I just try a table with <ol> as list elements with which it is possible to insert new table row.
<table>
<thead>
<tr>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
</thead>
<tbody>
<ol id="list">
<li><tr><td>row</td><td>row</td><td>row</td></tr></li>
</ol>
</tbody>
However, I have the problem that the element appear outside of my tables. When I add dynamically content via .append(), the formatting is not taken some elements gets removed.
Jsfiddle example
I want to use this solution for counting currently positions in an "container list".
I got a similar function like the example below for counting my lists, that's working great but the insert into the table does not work properly.
countinglists example: Nested ordered lists
Maybe its possible to achieve that counting syntax in a table without the <ol>? or is there any <ol> equivalent?
You need to do some reading on basic HTML: http://www.w3schools.com/html/html_tables.asp
Here is how it should look...
<table>
<thead>
<tr>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
</thead>
<tbody id="list">
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
<tr>
<td>row</td><td>row</td><td>row</td><td>row</td>
</tr>
</tbody>
In theory, you should be able to use CSS counters.
table {
counter-reset: myTableCounter;
}
thead th:first-child:before {
display: table-cell;
content: "";
}
tbody td:first-child:before {
display: table-cell;
counter-increment: myTableCounter;
content: counter(myTableCounter);
}
However, when I attempted to do that I found there were issues with display: table-cell generated content.
You may have to look at adding additional elements to the table to generate the content inside the first cell of each row.
My question is: what are you trying to achieve? Is this an exercise just to see how much can you stretch the HTML?
For your jsfiddle, the action associated to the click removes some of the HTML tags (at least on my browser) resulting in a <li>rowrowrow</li>, so you end up having a rather odd formatted-table. My renderer takes all <li> tags added by clicking as the content of a row; if you have only <li> tags, the dom parser will likely wrap them into a <ul> (it does on mine).
IMHO you don't need to use the ol to be able to count stuff. You can do it in jquery afaik. If you insist to use lists, then you probably need to style them and use e.g. divs inside (styled too). Emulating a table via a list and divs is madness imho :)
Update - for the hierarchical table
My idea would be to have something similar to this jsfiddle. I basically styled in the .sub and the .main classes. However, things get a bit more complex is you need to add some extra columns. In this case, you'd need something like a treetable.

HTML / CSS: Same table-cell width across rows

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/

How to make a compatible scrollable table with fixed header

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.

How should I build a simple 4x4 table with fill-able blocks

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.

Categories

Resources