如何使用jquery重新调整html表的行和列的大小？

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

我正在使用colResizable(用于调整列)和Resizable函数(用于调整行)它在mozilla firefox中运行良好但在chrome中不起作用

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

对于列,我们使用以下链接 - http://quocity.com/colresizable/对于我们使用以下jquery函数的行 - $(“#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.

注意:在上面的代码中,我们尝试使用td(而不是tr)来调整在最终影响之后它不起作用的列。

$("#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

提前致谢

2 个解决方案

#1

I have a working sample here: JSFiddle

我在这里有一个工作示例: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();



});

#2

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.

查看jQuery UI库的可调整大小的功能。你甚至不需要colResizable。它适用于一切。附带JS和CSS可调整大小的项目。

http://jqueryui.com/resizable/

Got it working in JSFiddle.

得到它在JSFiddle工作。

#1