如何在JSFiddle上创建具有可调整大小的行和列(如HTML，CSS，JS框）的表

How to create table with resizable row and columns like HTML, CSS, JS boxes on JSFiddle?

本文关键字：HTML CSS 的表 JS JSFiddle 创建 可调整      更新时间：2023-09-26

我已经使用 html 表成功创建了 3 个视图框。每个视图都可以隐藏。现在，我希望每个视图的宽度和高度都可以调整大小，就像在JSFiddle中可以调整每个代码编辑框的大小一样。我找到了一个jQuery小部件，但它只允许调整列的大小，而不是框。我也发现了这个，但它没有用表 http://www.bootply.com/RwnUXIcLap 实现。这是我到目前为止 https://jsfiddle.net/3waurzbf/的内容.

var tds = document.getElementsByTagName('td');
var inputs = document.getElementsByTagName('input');
var rows = document.getElementsByTagName('tr');
console.log(inputs);
console.log(tds);
var changeView = function () {
  for (var i = 0; i < inputs.length; i++) {
    if (!inputs[i].checked) {
      if (tds[i].style.display !== 'none') tds[i].style.display = 'none';
    } else {
      if(tds[i].style.display === 'none') tds[i].style.display = '';
    }
  }
  if (!inputs[0].checked && !inputs[1].checked) rows[0].style.display = 'none';
  else rows[0].style.display = '';
  if (!inputs[2].checked) rows[1].style.display = 'none';
  else rows[1].style.display = '';
};
changeView();
//$("#views-table").colResizable({liveDrag:true});
html {
  height: 100%;
}
body {
  height: 100%;
}
table {
  width: 100%;
  height: 90%;
}
table td {
  text-align: center;
  border: 1px solid black;
}
#views-container {
  height: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>View 1</td>
    <td>View 2</td>
  </tr>
  <tr>
    <td colspan="2">View 3</td>
  </tr>
</table>
<div id="views-container">
  <input type="checkbox" checked="checked" onclick="changeView()"><label>View 1</label>
  <input type="checkbox" checked="checked" onclick="changeView()"><label>View 2</label>
  <input type="checkbox" checked="checked" onclick="changeView()"><label>View 3</label>
</div>

您可以使用jQuery UI .resizable()，尽管它在表格显示方面有点棘手，并且需要一些额外的代码。

看看这个工作小提琴：https://jsfiddle.net/18k3umpp/3/

我在视图 1 和视图 2 中添加了几个 ID：

<tr>
    <td id="v1">View 1</td>
    <td id="v2">View 2</td>
</tr>

然后试试这个：

$(window).on("load resize", function() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var v1Width = $("#v1").width()

    $("#v1").resizable({
        minWidth: 50,
        maxWidth: windowWidth - 80,
        maxHeight: windowHeight * (.83),
        handles: "e, s"
    }).on("resize", function() {
        if (v1Width == $("#v1").width()) {
            $("#v2").height(0)
        }
        v1Width = $("#v1").width()
    });
    $("#v2").resizable({
        maxHeight: windowHeight * (.83),
        handles: "s"
    }).on("resize", function() {
        $("#v1").height(0)
    });
});

当然，您可以根据需要调整minWidth、maxWidth和maxHeight选项。

相关文章：