What I have:
An html table which can be dynamically enlarged by clicking two buttons: to add row and column.
two one-row and one-column tables. One above and one to the left side of the table. These two tables are expanded simultaneously with the main table. When I add new row, left table ads new cell. When I add new column, top table ads new cell;
two mentioned tables are hidden.
What I need:
when I hover over a particular cell in main table, it(hovering) should trigger appearance of relevant cells in tables above and to the left. For example, if I hover over cell in row 2, column 2(of the main table) it should show cell 2 in top table and cell 2 in left table.
So I need somehow to connect selected cell with the same cells in other tables and show them on hover.
And I need to be able to move the pointer on the appeared cell to click it (it should not disappear when I move cursor from the main table to this cell)
The harder version of what I need supposes that hidden cells will not appear if only 1 row or column are left in the main table.
It will look like this:
Picture of the task
Since CSS allows to select on hover only elements that are inside one div or are siblings, I assume that this can be done only with JQuery.
I am using this code to show an entire hidden table on hover over the main table:
$('#my-table').hover(function() {
$('#dell-row').removeClass('hoverstate');
}, function() {
$('#dell-row').addClass('hoverstate');
});
Now I think that I need to replace #my-table with the selector of the cell in #my-table table and #dell-row with the selector of the corresponding cell in #dell-row table. Any ideas how I can do this?
I can not indicate static coordinates of the cells because the table is dynamically changing.
Please take a look at the working demo with all the html, css and JS code here.
Related
So I have two tables horizontally next to each other. Everything is aligned initially. However, when the element inside one cell of the left table increases in size, it wraps and increases the cell height. How can I align two tables even with the left cell height increased?
Here is the image of what it looks like:
Without wrapping:
With wrapping:
IMHO you have two options.
Use single table so that entire row will have same height. Or
Use div instead of table because div has overflow option. Refer this link
Update after comment:
If you can use jquery, you could do it on page load. Refer this fiddler
Note: height attributes for both table's row and class name. Un-comment jquery line number 3 and execute.
I want to drag an item from a list of items and drop it in a table column. Each columns of the table contains another sub table with a specific template.
I am using dragular for this.
Problem : As I render the view for the first time, I am calculating the height of each row in the sub table and making all the tables row height the same. So the final view looks like its all in one table.
Challenge Facing : When I drop a new item into the table columns (as another sub column) , I want to match the height of all the corresponding rows again in the sub tables. Not sure how to achieve this.
I have a table using:
<script src="/js/jquery.tablesorter.min.js"></script>
<script src="/js/jquery.tablesorter.widgets.min.js"></script>
The layout of the table looks like this:
When you click the blue edit button on the right the button should disappear and a green check and red X should appear. This allows the row to be edited. It enables the input fields for that row which are originally disabled:
The problem is that whenever I click the buttons that shows or hides the other buttons my table resizes to the left. The Modify row increases in width. Is there a way to stop the dynamic resizing of this Javascript table? I tried using Javascripts show/hide for the buttons and also using a CSS class called hiddenButtons which has display none and hiding the buttons that way but both attempts resized the table.
If you give each td in your final column that has the header "modify" a class and then give that class a defined width of your choice. This should stop happening.
The HTML/Browser is automatically stretching the TDs out to what it believes is even for the content within them. Adding or removing content from a td without a defined width will do this.
I had been developing a screen which has lots of data as . It is scrolling with dataTable.(Horizontal Scroll). There is a drpdown which should filter values and should show only eligible TDs in scroll part. Below are Screenshots. I am hiding and showing data based on selection of a dropdown.
Have added a class to all tds and rowspan th so that they can be toggled based on selction of dropdown.
It Shows perfect while fetching all the records. But when I hide columns , columns work perfect but header resizes its headings.
Here is what happens on hiding th and td .td remains same , th resizes
I tried a lot but cud not fix it. Can someone plz help
So I got the solution .
U need to get your table object again and redraw it. After reading so many places about this error it seemed dataTable is still to find a fix for hiding columns in scroll part with rowspan added to it.
What I did was adding a class to all th, td of table which needs to be hidden based on any condition , here based on selection. When I was selecting a partical type I added another class to hide the required th and tds. But Th reset sizes ,might be because of scrolls added.
It resets width of entire header leaving your td as it was . So it looks ugly.
oTable.fnDraw();
Just take reference of your table and draw again.
I have an HTML page that has static tables placed in the page because these never change. I have a main table that houses all the elements to keep everything aligned. This is probably what is causing the problem.
I have the main table with 2 tables within it. Each row in the first inner table, called dropDownTable, usually has up to about 10 rows. dropDownTable is in the following format:
td1: text; td2: select element; td3: text (this part is dynamically updated).
The second table, called showDetails, uses the options from the select element in the rows in dropDownTable to query a database (onchange attribute), get some information and then display each element that is found. The response from the database is up to 150 character strings, usually shorter though.The user then clicks an element in the details that updates the third column in the dropDownTable.
I'm not really sure if this is a JavaScript or HTML problem but each time the showDetails table updates, it pushes the bottom of the main table down. There are 2 buttons at the bottom of the main table that move each time the user changes the select in the second column of dropDownTable.
It very aesthetically displeasing.
Any ideas would be greatly appreciated. I have had this problem before but with other elements.
are you adding more content, thus making the table taller?
I cant quite understand what your problem is exactly, but:
td
{
vertical-align: top;
}
will keep everything in the top of its cell, rather than centering to the tallest column.
You shouldnt be using tables for layout, tables are for tabular data. have a read of this
if you want to fix the heght of the table, do:
table
{
height: 400px; /* replace with your heihgt */
}