Question

我正在尝试用HTML创建可重复大小的表。因为，数据会有不同的长度。但是无法将css和js代码与HTML链接起来。它们分别位于同一目录中的单独文件夹中。我尝试将它们保存在同一文件夹中，但不加载。 Chrome开发者模式也没有显示任何错误，但仍然只是如果有任何其他有效的方法来重新调整大小的表，请建议。在js代码下面。

$(function(){
  var thHeight = $("table#demo-table th:first").height();
  $("table#demo-table th").resizable({
      handles: "e",
      minHeight: thHeight,
      maxHeight: thHeight,
      minWidth: 40,
      resize: function (event, ui) {
        var sizerID = "#" + $(event.target).attr("id") + "-sizer";
        $(sizerID).width(ui.size.width);
      }
  });
});

以下是Css

body {
  font-family: Arial;
  font-size: 10pt;
}
table#demo-table th {
  background-color: #006;
  color: #fff;
}
table#demo-table th, 
table#demo-table td {
  white-space: nowrap;
  padding: 3px 6px;
}
table.cellpadding-0 td {
    padding: 0;
}
table.cellspacing-0 {
    border-spacing: 0;
    border-collapse: collapse;
}
table.bordered th, 
table.bordered td {
  border: 1px solid #ccc;
  border-right: none;
  text-align: center;
}
table.bordered th:last, 
table.bordered td:last {
  border-right: 1px solid #ccc;
}

下面是HTML

<!DOCTYPE html>
<html>
<head>
    <link ref="stylesheet" type="text/css" href="css/democss.css">
    <script type="text/JavaScript" src="js/demojs.js" ></script>
</head>
<body>
    <table id="demo-table" class="bordered cellpadding-0 cellspacing-0">
    <thead>
        <tr>
            <th id='column-header-1'>Column Header 1<div id='column-header-1-sizer'></div></th>
            <th id='column-header-2'>Column Header 2<div id='column-header-2-sizer'></div></th>
            <th id='column-header-3'>Column Header 3<div id='column-header-3-sizer'></div></th>
            <th id='column-header-4'>Column Header 4<div id='column-header-4-sizer'></div></th>
    </tr>
    </thead>
    <tbody>
            <td>My Data 1</td>
            <td>My Data 2</td>
            <td>My Data 3</td>
            <td>My Data 4</td>
    </tbody>
</table>

</body>

Answer 1

你错过了.resizable()方法的jQuery库和jQuery UI，以及jQuery UI CSS支持

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/JavaScript" src="js/demojs.js" ></script>

示例：

<!DOCTYPE html>
<html>
<head>
<title>Resizable TH</title>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<style>
/* instead of style use <link> this is a demo.*/
body {
  font-family: Arial;
  font-size: 10pt;
}

table#demo-table th {
  background-color: #006;
  color: #fff;
}

table#demo-table th,
table#demo-table td {
  white-space: nowrap;
  padding: 3px 6px;
}

table.cellpadding-0 td {
  padding: 0;
}

table.cellspacing-0 {
  border-spacing: 0;
  border-collapse: collapse;
}

table.bordered th,
table.bordered td {
  border: 1px solid #ccc;
  border-right: none;
  text-align: center;
}

table.bordered th:last,
table.bordered td:last {
  border-right: 1px solid #ccc;
}
</style>
</head>
<body>
    <table id="demo-table" class="bordered cellpadding-0 cellspacing-0">
    <thead>
        <tr>
            <th id='column-header-1'>Column Header 1<div id='column-header-1-sizer'></div></th>
            <th id='column-header-2'>Column Header 2<div id='column-header-2-sizer'></div></th>
            <th id='column-header-3'>Column Header 3<div id='column-header-3-sizer'></div></th>
            <th id='column-header-4'>Column Header 4<div id='column-header-4-sizer'></div></th>
    </tr>
    </thead>
    <tbody>
            <td>My Data 1</td>
            <td>My Data 2</td>
            <td>My Data 3</td>
            <td>My Data 4</td>
    </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
// Use <script> with src to your .js file. This is a demo.
jQuery(function($) {
  var thHeight = $("table#demo-table th:first").height();
  $("table#demo-table th").resizable({
    handles: "e",
    minHeight: thHeight,
    maxHeight: thHeight,
    minWidth: 40,
    resize: function(event, ui) {
      var sizerID = "#" + $(event.target).attr("id") + "-sizer";
      $(sizerID).width(ui.size.width);
    }
  });
});
</script>

</body>
</html>

无法链接CSS和Javascript

1 个答案: