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

Question

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

对于专栏，我们使用以下链接 - http://quocity.com/colresizable/
对于行，我们使用以下 jquery 函数 - $("#tblResize2 tr").resizable();

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

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

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

整个函数

 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;

    };

提前致谢

Answer 1

我这里有一个工作示例: JSFiddle

我认为您的功能存在一些问题。有几个缺失的 ; chrome 可能不喜欢，请尝试以下操作。

完整的 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();



});