Tips for adjusting the height and width of rows and columns in an HTML table with jQuery

Currently, I am utilizing both the colResizable plugin for adjusting columns and the Resizable function for adjusting rows. While this setup works perfectly fine in Mozilla Firefox, it seems to encounter issues when used in Chrome.

For column resizing, we have incorporated the functionality from the following link - .
As for row resizing, we are employing the jQuery function as follows: $("#tblResize2 tr").resizable();

Please note that despite attempting to use 'td' (instead of 'tr') for resizing columns, it did not yield the desired outcome ultimately.

$("#MatrixTable").colResizable({
                onResize: onSampleResized
            });

            $("#MatrixTable tr").resizable();
            $("#MatrixTable td").resizable();

Here is the complete function:

var onSampleResized = function (e) {

  var columns = $(e.currentTarget).find("td");
            var rows = $(e.currentTarget).find("tr");
            var full_msg;
            var row_msg;

        `columns.each(function () { full_msg += $(this).attr('id') + "_" +` $(this).width() + "_" + $(this).height() + ";"; })
        rows.each(function () { row_msg += $(this).attr('id') + "_" + $(this).width() + "_" + $(this).height() + ";"; })
        document.getElementById("hf_data").value = full_msg
        document.getElementById("hf_rowdata").value = row_msg;

    };

Thank you in advance.

Answer №1

Check out this functional example: JSFiddle

I believe there are a few issues with your function. It seems like there were some missing ; which may have caused conflicts in Chrome. Try the revised code below.

Complete JavaScript:

$(function () {
        var onSampleResized = function (e) {
        var columns = $(e.currentTarget).find("th");
        var rows = $(e.currentTarget).find("tr");
        var full_msg = "";
        var row_msg = "";
        columns.each(function () {
            full_msg += $(this).attr('id') + ":" + $(this).width() + "x" + $(this).height() + ";\n";
        });
        rows.each(function () {
            row_msg += $(this).attr('id') + ":" + $(this).width() + "x" + $(this).height() + ";\n";
        });
        document.getElementById("hf_data").value = full_msg;
        document.getElementById("hf_rowdata").value = row_msg;
    };

    $("#MatrixTable").colResizable({
        onResize: onSampleResized
    });

    $("#MatrixTable tr").resizable();
    $("#MatrixTable td").resizable();



});

Answer №2

Take a look at the resizable feature in the jQuery UI library. You won't even have to use colResizable. It's compatible with all elements and comes with JS and CSS for resizing items.

http://jqueryui.com/resizable/

I successfully implemented it on JSFiddle.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Present the array elements in a format that allows the user to easily choose an option and explore the content

I'm currently working on a project where users will take a Computer Based Test and be graded on a selected subject. I have a database set up with questions and multiple choice options. My goal is to display the questions in a way that allows users to ...

Navigating through a pdf byte stream document on Cordova

I have an application that utilizes a .NET web service to generate iTextSharp PDF documents. Within this application, I also have a Cordova and JQueryMobile based app that makes calls to this web service from one of its views. The web service then sends ...

Execute a PHP SQL query when a link is clicked

To trigger a SQL query when a link is clicked, I have implemented the following code: mainpage.php: function deleteImage1() { $.post("delete_image.php", { num:1, id:<?php echo $id; ?> }, function(data,status){ alert("Data: " + data + "\n ...

Regular Expression - Locating the nth Instance - examining web page source information

My query is as follows: (?<=>)(\w*)(?=<) This code extracts all the words between the angle brackets > and <. However, I am only interested in capturing the third occurrence. I have experimented with various placements of {2} within ...

Choose the row based on the values in the columns

I am facing a situation where I have to choose a specific row in a datatable that displays rows in groups of 10, based on the value of its column. Previously, I successfully used the following code to select the first row. myGroupTable.row(':eq(0)&ap ...

Running PHP code within an HTML file served by PHP

A unique and innovative approach was taken by incorporating a DIV element in the HTML code, which dynamically populates with content from the main_login.php file. The main_login.php file plays a crucial role in loading the homepage with member-specific con ...

Encountering the "v_isRef": true flag while utilizing Vuex within a composition function

I encountered an unexpected outcome when using the loginString() function in my template. It seems that there is a need to include .value in templates, which I thought wasn't necessary. { "_dirty": true, "__v_isRef": true, "__v_isReadonly": true } ...

Images cannot be uploaded to the login page

Here is the code for the login.aspx page: <%@ Page Title="Log In" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="DoubleEntryForm.Account.Login" %> <asp:Content ID="HeaderContent" runat="s ...

Is there a similar feature in jQuery to the evalScripts: false option found in mootools?

After reviewing the specifications on http://api.jquery.com/jQuery.ajax/, I discovered that scripts are automatically evaluated for each response depending on the dataType. Is there a way to prevent jQuery from evaluating the script portions of the respo ...

What could be causing the issue with my button not successfully redirecting the user to a different page?

Could someone help me understand why my button in Bootstrap 4 isn't redirecting users to another page? <button type="button" a href="https://www.google.com" class="btn btn-outline-primary">Contact Us <i class="fas fa-envelope"></i>& ...

Classes that are designed to be written on a single

A fellow team member recently made an addition to our project. <ol class="numbered-list list-inside" start="1"> .numbered-list { list-style-type: decimal; } .list-inside { list-style-position: inside; } Is there a problem with this code, ...

Autofill feature for styling with CSS within a JavaScript document

Is there a way to enable CSS autocomplete in JavaScript for VS Code? I can easily work with CSS, but the auto suggestions are not showing up when coding in JS. For instance, when typing document.queryselector("myclass")., nothing shows up after the dot li ...

Incorporate a class into a link within the wp_list_pages function

I've been experimenting with creating a hover effect on list items using the wp_list_pages() function in my Wordpress theme. Despite my efforts, I've hit a roadblock in getting the hover effect to work properly. As a beginner in web development, ...

What methods are available for implementing conditional rendering in a React-based Single Page Application (SPA)?

I am in the process of creating my own personal website using ReactJS. I want to ensure that my website, being a Single Page Application, is rendered conditionally. Essentially, I envision the Rendering to display each section on my page at different inter ...

The Angular filter is failing to display the category value

My issue lies in adding a filter to display categories, as my setCurrentCategory function is not showing any value but instead displaying 'undefined'. The goal is to show the category for each person. I'm using ng-click to pass to my functio ...

JavaScript: Finding the current month and all subsequent months until the end of the year

Is there a way in vanilla JavaScript to retrieve the current month and the following 12 months? For instance, if today is April 2022, I would like the output to be: April 2022 May 2022 June 2022 July 2022 August 2022 September 2022 October 2022 November 2 ...

ReactJS form example: utilizing two separate submit buttons to perform distinct actions on the same form

I need to implement two submit buttons in my form. Both buttons should utilize the same inputs and form validation, but trigger different actions. export default function FormWithTwoSubmits() { function handleSubmitTask1(){ } function handleSub ...

Can I combine the col and d-flex classes in Bootstrap 5 without breaking any rules?

Is it possible to use both col and d-flex classes together? I want to center the element with the class "description" by combining them. <section class="container-fluid mb-5"> <div class="row"> <div class=&q ...

What is the best way to modify an attribute with jquery?

Could someone please assist me with changing the value of an input tag using jQuery? <input type="hidden" name="find[0][1]" value="" id="findID" /> Thank you. ...

Error: This value is not a valid HTMLInputElement type (Google Maps)

When attempting to create a basic autocomplete field for Google Map places, I encountered the following error message despite having an HtmlInputElement as my field InvalidValueError: not an instance of HTMLInputElement Here is the HTML code: <inpu ...