Develop Reference

Showing dynamic div below each on the click of item of corresponding row using bootstrap

I have different tiles (3 in each row to be shown) dynamically. On the click of each tile a div should shown below the corresponding row only. All these tiles are created dynamically.
enter image description here

jquery datatable fixed first column with sub/child rows issue

issue is when click on button to show child rows the next rows first column can not collapse with there row, we fixed the first 2 columns of the data table because of table responsiveness while opening in mobile or tab.
in this image the yellow boundary part is fixed columns those are not collapsing with there row, and the blue border rows are sub rows of the red button click.
how we can collapse the fixed rows with there row ?

Anchor tag stopped working after page reload

I have a table by default sorts by column 1. When user sorts column 2 column 1 is out of order. So far so good. Next I have 5 links (outside the table) that anchor to 5 spots inside the table (column 1). When the table reloads to it's default column 1, the anchors stop working.
Signature
After pager reload, the anchor appears to go either the top or bottom of table. I want the table to resort by column 1 and still hit the anchor spots.

Trigger event on hover over the html table

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.

Stop Dynamic Table Resizing

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.