Adjust the width of the table after refreshing it for 10 seconds when resizing the column?

Question

Adjust the width of the table after refreshing it for 10 seconds when resizing the column?

I am facing an issue with a page that refreshes every 10 seconds and has a resizable column feature.

However, after the page refresh, the table header (th) reverts back to its original position.

The main question is how to obtain the width of a specific th after resizing it and then apply that width only to that th so that the user can see the resized th after the table refreshes.

Which jQuery event can be used to get the width of a th when it is resized, and what method can be used to apply this width only to that particular th without affecting others?

div {
  resize: horizontal;
  overflow: auto;
}

td {
  text-align: center;
}

<div id="banner-message">
  <table cellpadding="0" cellspacing="0" border="0>
    <thead>
      <tr>
        <th>
          <div>One</div>
        </th>
        <th>
          <div>Two</div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ab</td>
        <td>cd</td>
      </tr>
    </tbody>
  </table>

</div>

javascript jquery html css

Answer 1

Answer №1

The challenge you may face is not having access to user-defined widths. Upon landing on a page, whether by refreshing or initial entry, default values are what you're left with.

To address this issue, one effective method is to include parameters in the URL. This allows you to subsequently retrieve these values from the URL and utilize them for setting the width. Alternatively, utilizing localStorage or sessionStorage can also be beneficial. However, keep in mind that passing set widths via a URL is not feasible with this approach. Don't forget to update the values once a change has been detected.

Answer 2

The challenge you may face is not having access to user-defined widths. Upon landing on a page, whether by refreshing or initial entry, default values are what you're left with.

To address this issue, one effective method is to include parameters in the URL. This allows you to subsequently retrieve these values from the URL and utilize them for setting the width. Alternatively, utilizing localStorage or sessionStorage can also be beneficial. However, keep in mind that passing set widths via a URL is not feasible with this approach. Don't forget to update the values once a change has been detected.

Answer 3

Answer №2

Received the solution

Inserted a new div element inside th

<th><div>#</div></th>

1. To adjust column size

$("#thead_DispatchTrip th").resizable({
        handles: "e",
        resize: function (event, ui) {
            $(ui.element).find('div').width(ui.size.width);
        }
    });

2. For obtaining width

tableWidth = [];
    $("#thead_DispatchTrip th").each(function () {
        tableWidth.push($(this).find('div').width());
    });

3. For setting width after 10 seconds

$("#thead_DispatchTrip th").each(function (i,el) {
    $(this).find('div').width(tableWidth[i]);
});

Answer 4

Received the solution

Inserted a new div element inside th

<th><div>#</div></th>

1. To adjust column size

$("#thead_DispatchTrip th").resizable({
        handles: "e",
        resize: function (event, ui) {
            $(ui.element).find('div').width(ui.size.width);
        }
    });

2. For obtaining width

tableWidth = [];
    $("#thead_DispatchTrip th").each(function () {
        tableWidth.push($(this).find('div').width());
    });

3. For setting width after 10 seconds

$("#thead_DispatchTrip th").each(function (i,el) {
    $(this).find('div').width(tableWidth[i]);
});

Adjust the width of the table after refreshing it for 10 seconds when resizing the column?

Answer №1

Answer №2

Similar questions

Retrieve a different action instance variable within the view

Using ngTable within an AngularJS application

output the array utilizing map function results in undefined

Tips for exchanging JavaScript variables with PHP using AJAX

The responsiveness of Bootstrap 5 columns in Chrome inspection appears to break after reaching medium size, yet functions properly in other areas

Positioning three divs next to each other and aligning them at the bottom of the longest div

Error: Invalid argument type

Merging an AppBar and Drawer in Material UI for a seamless user interface design

Dropmenu | Designing with Materials | Pair of Choices | Intersection

Updating the language of the months displayed in the popup calendar

Having trouble extracting a value from a JSON object in JavaScript

Is it possible to share a Vue.js component by "transferring" it rather than duplicating it?

Elevate your website's design with Vue and create eye-catching CSS

Encountering a Javascript error while trying to optimize bundling operations

Improve the efficiency of loading and utilizing data from the petition using $http

The element residing within the body exceeds the body's dimensions

Incorporating lazy loading for diverse content to enhance pagination

Adding an audio event listener in HTML5

How can a server retrieve a file uploaded using FormData and Ajax on a cross-domain upload?

Working with handleChange and onSubmit functions in pure JavaScript without any libraries