Javascript 使用jQuery UI制作具有可调整大小的列和可选行的表
注意：我最初的问题是我是否应该使用Javascript 使用jQuery UI制作具有可调整大小的列和可选行的表,javascript,jquery,jquery-ui,html,Javascript,Jquery,Jquery Ui,Html,注意：我最初的问题是我是否应该使用s或s来完成此任务。我自己也找到了答案：s在Firefox和Chrome上的速度要慢两倍多，如果你有~2000行。因此，您必须为此使用s。我决定重新编辑我的问题以展示如何做（使用jQueryUI显示具有可调整大小的列和可选行的表）。希望它对任何人都有用 我正在制作一个web应用程序（主要用于数据输入和内部网使用）。需要以标准方式呈现SQL表中的一些数据（行作为行，列作为列），但有一些要求： 数据以严格格式的JSON数组接收，需要从JavaScript插入 列必须
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript' src='../Scripts/jQuery.js'></script>
<script type='text/javascript' src='../Scripts/jQuery-ui.js'></script>
<link href="../Css/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<style type='text/css'>
.selectable .ui-selecting { background: #FECA40; }
.selectable .ui-selected { background: #F39814; color: white; }
.NCList table { table-layout:fixed; }
.nc-cell { overflow: hidden; white-space:nowrap; }
.NCList .ui-resizable-e { background: gray; }
.NCList .y-scroll { overflow-y:auto; overflow-x:hidden; }
</style>
<script type="text/javascript">
$(function() {
var element = $('#MyParentDiv');
$(".selectable", element).selectable({filter: 'tr'});
$(".th0", element).resizable({
alsoResize: '#MyParentDiv .header-container',
stop: function(event, ui) {
var width1 = $(".th0", element).width();
$('.col0', element).width(width1);
width1 = $(".header-container", element).width();
$('.y-scroll', element).width(width1);
},
handles: 'e'});
$(".th1", element).resizable({
alsoResize: '#MyParentDiv .header-container',
stop: function(event, ui) {
var width1 = $(".th1", element).width();
$('.col1', element).width(width1);
width1 = $(".header-container", element).width();
$('.y-scroll', element).width(width1);
},
handles: 'e'});
});
</script>
</head>
<body>
<div id="MyParentDiv" class="NCList">
<div class="header-container" style="width:215px;">
<table><thead><tr>
<th><div class="nc-cell th0" style="width:100px;">
Short name
</div></th>
<th><div class="nc-cell th1" style="width:100px;">
Name
</div></th>
</tr></thead></table>
</div>
<div class="y-scroll" style="max-height:100px;width:215px;">
<table class="valuefield">
<tbody class="selectable">
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
<tr><td><div class="nc-cell col0" style="width: 100px">Some test values</div></td>
<td><div class="nc-cell col1" style="width: 100px">Some test values</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<html>
.selectable.ui选择{background:#FECA40；}
.selectable.ui已选择{背景：#F39814；颜色：白色；}
.NCList表{表布局：固定；}
.nc单元格{溢出：隐藏；空白：nowrap；}
.NCList.ui-resizeable-e{背景：灰色；}
.NCList.y-scroll{overflow-y:auto；overflow-x:hidden；}
$（函数（）{
var元素=$（'#MyParentDiv'）；
$（“.selective”，element）.selective（{filter:'tr'}）；
$（“.th0”，元素）。可调整大小({
alsoResize:“#MyParentDiv.header容器”，
停止：功能（事件、用户界面）{
var width1=$（“.th0”，元素）.width（）；
$（'.col0'，元素）.width（width1）；
宽度1=$（“.header容器”，元素）.width（）；
$（'.y-scroll'，元素）.width（width1）；
},
句柄：'e'}）；
$（“.th1”，元素）。可调整大小({
alsoResize:“#MyParentDiv.header容器”，
停止：功能（事件、用户界面）{
var width1=$（“.th1”，元素）.width（）；
$（'.col1'，元素）.width（width1）；
宽度1=$（“.header容器”，元素）.width（）；
$（'.y-scroll'，元素）.width（width1）；
},
句柄：'e'}）；
});
简称
名称
一些测试值
一些测试值
一些测试值
一些测试值
一些测试值
一些测试值
一些测试值
一些测试值
一些测试值
一些测试值
一些测试值
一些测试值
一些测试值
一些测试值
一些测试值
一些测试值