How to re-size rows and columns of a html table using jquery?

Question

I am using both colResizable(for adjusting column) and Resizable function(for adjusting row) it is working good in mozilla firefox but not working in chrome

For column we are using the following link - http://quocity.com/colresizable/
For row we are using following jquery function - $("#tblResize2 tr").resizable();

note : on the above code we tried using td (instead of tr) to resize columns it is not working after the final impact.

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

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

Whole 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;

    };

Thanks in advance

The second to last line in the function is missing a ; try the code I posted in my answer. — caspian
– caspian, Commented Jul 10, 2014 at 21:01

caspian · Accepted Answer · 2014-07-10 21:04:27Z

1

I have a working sample here: JSFiddle

I think you have a few issues with the function. There were several missing ; that chrome may have not liked, try the following.

Full 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();



});

edited Jul 10, 2014 at 21:04

answered Jul 10, 2014 at 20:40

caspian

1,80414 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Gopi krishnan cs Over a year ago

Gopi krishnan cs Over a year ago

We have used this function(onSampleResized) to get width of td and height of tr and saved to db, when i try to access the table after impact i cant resize the table row in chrome

caspian Over a year ago

I updated the code and the fiddle. I think this is what you're looking for. The text that is output is formatted a little easier to read. I really think the missing ; was presenting an issue in chrome.

Gopi krishnan cs Over a year ago

please check this link jsfiddle.net/44fKg/5 <br/> i have saved the tr height to 50px when i tried to reduce adjust the row it is not reduced less than 50px in chrome but it is working perfect in firefox you check it

caspian Over a year ago

I see that - it seems to set a minimum height in chrome.

shiotta · Accepted Answer · 2014-07-10 20:51:07Z

0

Check out the resizable function of the jQuery UI library. You shouldn't even need colResizable. It works with everything. Comes with JS and CSS for resizable items.

http://jqueryui.com/resizable/

Got it working in JSFiddle.

answered Jul 10, 2014 at 20:51

shiotta

1

Collectives™ on Stack Overflow

How to re-size rows and columns of a html table using jquery?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related