I am trying to hide subsequent tr's with role="metadata" and the same data-group-id as the first occurring tr.
I cannot use JavaScript here and I am trying to achieve this using pure CSS.
<table>
<tbody>
<!-- BEGIN this tr should be visible -->
<tr data-group-id="1" role="metadata">
<td>
First rows group title
</td>
</tr>
<!-- END this tr should be visible -->
<tr data-group-id="1" role="data">
<td>
Row belonging to group 1
</td>
</tr>
<!-- BEGIN this tr should be hidden -->
<tr data-group-id="1" role="metadata">
<td>
Rows group title
</td>
</tr>
<!-- END this tr should be hidden -->
<tr data-group-id="1" role="data">
<td>
Another row belonging to group 1
</td>
</tr>
<!-- BEGIN this tr should be visible -->
<tr data-group-id="2" role="metadata">
<td>
Second rows group title
</td>
</tr>
<!-- END this tr should be visible -->
<tr data-group-id="2" role="data">
<td>
Row belonging to group 2
</td>
</tr>
</tbody>
</table>
Selectors like this...
[data-group-id="1"][role~="metadata"] ~ [data-group-id="1"][role~="metadata"]
display: none
... work very well, except that data-group-id may change dynamically.
Something like this would be perfect (I know that this is invalid CSS code, its just my fantasy with regular expressions to help illustrating the problem):
[data-group-id="(.*?)"][role~="metadata"] ~ [data-group-id="\\1"][role~="metadata"]
Is there any way I can achieve this using only CSS?
Thanks in advance.
Seems to me that using the data-group-id in CSS is impractical, especially since it's dynamically mutable and conditions of wether an element is hidden or not change. You end up with a huge chunk of CSS thats impossible to maintain.
In the initial rendering, it might be better to add a className so you determine serverside wether the initial state should be shown or not.
<tr data-group-id="1" role="data" class="hidden">
<td>Another row belonging to group 1</td>
</tr>
I am assuming JavaScript is used to dynamically change data-group-id, so why not use JavaScript to add/remove the className "hidden" when/where it makes sense. At least in JavaScript you CAN use regular expressions ;)
When you get to the point where you have to write impossible, long winded, error prone and unmaintainable CSS expressions, you're doing something wrong.
You're going to have to write some code to achieve this anyways, might as well do it the clean way instead of trying to shoehorn it into a styling language that isn't fit for the job.
Related
I have a table which contains categories of info on each row and many rows may have the same category.
I have a menu of all the categories (a very simple vertical text menu in a div).
<div class="menu">
Category 1
Category 2
Category 3
</div>
<table border="1">
<tr id="cat1">
<td>some info</td>
</tr>
<tr id="cat2">
<td>blah blah</td>
</tr>
<tr id="cat1">
<td>more blah</td>
</tr>
</table>
When I click on a specific category link in that menu I want it to only show the rows that match that category in the table.
I'm new to Javascript, etc so still learning. I've searched on Google but can only find examples that seem to hide/show 1 row or something similar but not what I need it to do. I can't work out if it's possible to do what I described above. Any help will be much appreciated!
Issues in your code
You need to identify your table rows by category.
Using id to assign a category to multiple rows is wrong (Duplicate ID values is invalid HTML).
You can use class, but personally I prefer to attributes since that value is meant to use within JS and not styling.
The default behavior of anchors is to redirect, refresh (or move the scrollbar), to make it short this isn't the element you need to use. I will replace it with a button.
A solution
// Selecting all the filters (buttons)
document.querySelectorAll('[catFilter]').forEach((el)=>{
//console.log(el);
// Listenning to clicks on the filters
el.addEventListener('click', (ev)=>{
// Selecting all the table rows when the click happens
// This will happen everytime you click!
document.querySelectorAll('table tr').forEach((row)=>{
//console.log(row);
if(ev.target.value === "*"){
// Show all
row.classList.remove('hidden');
}else if(row.hasAttribute(ev.target.value)){
// Make sure that the filtered rows are shown
row.classList.remove('hidden');
}else{
// Hide everything else
row.classList.add('hidden');
}
})
})
})
.hidden {
display: none;
}
<button value="cat1" catFilter>cat1</button>
<button value="cat2" catFilter>cat2</button>
<button value="*" catFilter>All categories</button>
<table border="1">
<tr cat1>
<td>some info</td>
</tr>
<tr cat2>
<td>blah blah</td>
</tr>
<tr cat1>
<td>more blah</td>
</tr>
</table>
With plain JavaScript, how can I get all the elements who do not have a CSS style? I need to get the rows of a table which are not hidden, and they don't have an explicit 'display' attached.
<table>
<tr class='form-row-links'>
Stuff...
</tr>
</table>
document.querySelectorAll('.form-row-links[style="display:is_not_none;"]') //pseudocode, of course :)
The css style display=none is applied after the initialisation of the page, to the <tr> element.
Thanks to #Ry- for pointing me towards the getComputedStyle
I actually thought that I could just declare an initial style of the row, which might then be overwritten by my JavaScript with 'none' or not:
<table>
<tr class='form-row-links' style='display:table-row;'>
Stuff...
</tr>
</table>
document.querySelectorAll('.form-row-links[style="display:table-row;"]')
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.
I'm great with CSS but I largely suck at jQuery. We all have our limitations...
OK with that admission out of the way I'll begin. We have a "favourite products" table, which you can sectionalize into categories (eg, Booze, Sheep, Spoons). Each category is a . Each row (excluding the ) is a product.
I want to enable a user to drag and drop (reorder) the table rows, even between tbodies. I've looked at Table Drag and Drop (DnD) plugin for jQuery but was disappointed to find that it doesn't really support dragging between tbodies - and hasn't been updated for quite some time.
Here is the basic table structure:
<table>
<thead>
<tr>
<th>Favourite</th>
</tr>
</thead>
<tbody>
<tr>
<th>Spoons</th> <!-- secion title, not draggable -->
</tr>
<tr>
<td>Wooden Spoon</td>
</tr>
<tr>
<td>Metal Spoon</td>
</tr>
<tr>
<td>Plastic Spoon</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Nuclear Bombs</th> <!-- seciont title, not draggable -->
</tr>
<tr>
<td>US Nukes</td>
</tr>
<tr>
<td>Soviet Nukes</td>
</tr>
</tbody>
</table>
I'm going to need to turn of the "dragability" of certain rows such as the first row in the - this being the section title.
Is there a better version of a jquery plugin out there that can do what I need? If you can find a better plugin please share and win my "favourite person of the week" award.
Thank you.
Your going to want to use jQueryUi's sortable plugin and then use the option
connectWith: '.connectedSortable'
to connect the different table bodies.
the plugin is designed for lists, but it does work on tables, mostly. I've used it with success on a table before.
here's the link to the documentation on jquery ui's sortable:
http://jqueryui.com/demos/sortable/#connect-lists
EDIT:
you'll also want to use the items option to specify that certain rows are sortable
items: 'tr:not(.dontIncludeMe)'
Have you looked into jQuery UI's droppable widget? I'm wondering (since I haven't played around with your specific problem yet) if you could set your tbody as droppable and your tr as draggable. Or possibly add some classes to each to be able to specify that certain rows (non-title rows) are draggable...
UPDATE: more research turned up this SO question, which links to this other article about dragging table rows.
you can turn off the dragability in case od table dnd plugin by specifying
<tr class ="nodrag nodrop">
<th>Favourite</th>
</tr>
class nodrag nodrop will not allow drag and drop
and
class nodrag will not allow it to be dragged i hope it helped.
I have a page that contains a couple of layers of nested div tags. Within the the 8 or 9 of the divs are tables. How do I iterate through the divs and pick the specific divs that I want and then iterate through the cells in the table (one row) embedded in each of the divs? Here is a representative sample of the page that I want to iterate through.
<div id="TheHouseDiv" class="catbox_m">
<div class="Room1Div">
<table width="900" border="0">
<tbody>
<tr>
<td>I don't care about this value</td>
<td>I WANT THIS VALUE 1!</td>
<td>I WANT THIS VALUE TOO 2!</td>
<td>Another cell I don't want</td>
<td>THIS CELL I WANT ALSO</td>
<tr>
</tbody>
</table>
<table width="900" border="0">
<tbody>
<tr>
<td>Ignore this value in the second table</td>
<td>I WANT THIS VALUE</td>
<td>I WANT THIS VALUE TOO</td>
<td>Ignore this content</td>
<td>GET THIS CELL VALUE</td>
<tr>
</tbody>
</table>
</div>
<div class="Room2Div">
<table width="900" border="0">
<tbody>
<tr>
<td>I don't care about this value</td>
<td>I WANT THIS VALUE 1!</td>
<td>I WANT THIS VALUE TOO 2!</td>
<td>Another cell I don't want</td>
...
You get the idea. So there is one table within each div and multiple divs. There are actually between 8 and 10 divs. None of the tables or cells have IDs so I need to reference the positionally. However I don't want all of the cell nor all of the tables. I only want values from specific cells in each of the tables within each div although I want the same cells from every table. Would I iterate through this or just reference the specific cells I want and if so, how do I select them?
This gives you all the tds which you want. (if you don't understand the selector just post a comment and I will explain it.
$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4))")
e.g. to loop over the hrefs of the <a> tags inside these tds
$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4)) a")
.each(function(i, ele) {
alert(ele.href);
}
);
e.g. to loop over the text of the <a> tags inside these tds
$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4)) a")
.each(function(i, ele) {
alert($(ele).text()); //or ele.innerHTML if no nasty is in the <a> tags
}
);
$('#TheHouseDiv div').eq(1).find('table').eq(2).find('tr').eq(3).find('td').eq(4).text()
A bit verbose, but I believe this retrieves the text of the 4th <td> inside the 3rd <tr> of the 2nd <table> from the first <div> contained in #TheHouseDiv.
You can also use the shortcut .find('tr:first') to match the first one.