看到有人写的一个JQUERY动态列， 值得参考， 特转发下来
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
body {
margin: 50px 100px;
}
#dataTable tr td{
width: 100px;
display: none;
}
.theader {
background:#A4D4FC;
}
</style>
<script src="jquery-1.8.1.js"></script>
<script type="text/javascript">
$(function(){
//init page
var columns = ['Column A', 'Column B', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G'];
for(var i=0; i < columns.length; i++){
//generate dropdown list
$('#ColSelect').append('<option>' + columns[i] + '</option>');
//generate header
$('#dataTable tr[class="theader"]').append('<td id="head_' + (i+1) +'"></td>');
//generate table body
$('#dataTable tr[class="tbody"]').append('<td name="col_' + (i+1) + '"></td>');
}
//JSON format data
var data = {
'Column A': ['A1', 'A2', 'A3', 'A4', 'A5'],
'Column B': ['B1', 'B2', 'B3', 'B4', 'B5'],
'Column C': ['C1', 'C2', 'C3', 'C4', 'C5'],
'Column D': ['D1', 'D2', 'D3', 'D4', 'D5'],
'Column E': ['E1', 'E2', 'E3', 'E4', 'E5'],
'Column F': ['F1', 'F2', 'F3', 'F4', 'F5'],
'Column G': ['G1', 'G2', 'G3', 'G4', 'G5']
};
//Generate tr as per data size
for(var i=0; ++i < data['Column A'].length; ){
$('#dataTable').append($('#dataTable tr:last').clone());
}
//after tr generate, add stripe style on tr
$("#dataTable tr:even[class!='theader']").css("background","#EFEFEF");
//register event on dropdown list.
var colIndex = 0;
$('#ColSelect').change(function(e){
$("#ColSelect option:selected").each(function () {
var val = $(this).val();
if(val){
colIndex++;
$(this).remove();//remove selected from dropdown
$('#head_'+colIndex).text(val).show();//css('display', 'block');//display header, Note:css('display', 'block') have compatibility issue on FF
var idx = 0;
$('td[name="col_'+colIndex+'"]').each(function(){
$(this).text(data[val][idx++]).show();//loop to put value in each tr for one column
});
}
});
});
});
</script>
<title>JQuery</title>
</head>
<body>
<select id="ColSelect">
<option value="">--Select--</option>
</select>
<table id="dataTable">
<tr class="theader"></tr>
<tr class="tbody"></tr>
</table>
</body>
</html>
分享到：
相关推荐
本文实例讲述了Jquery动态列功能。分享给大家供大家参考，具体如下： 看到有人写的一个JQUERY动态列， 值得参考， 特转发下来 <!DOCTYPE html> <html> <head> <meta ...
本文将深入探讨“jQuery排序”和“jQuery动态修改列”这两个主题，帮助开发者更好地理解和应用jQuery。 首先，让我们来看看“jQuery排序”。在网页开发中，我们经常需要对数据进行排序，例如表格中的行或列表项。...
jquery脚本实现动态添加列，删除指定列
"jquery锁定行锁定列"这个主题就是关于如何在jQuery中实现表格的冻结或锁定功能，以便用户在滚动页面时，特定的行或列始终保持可见，提升数据浏览体验。 首先，我们来理解一下“冻结行”和“锁定列”的概念。冻结行...
在介绍jQuery动态添加删除表格行（tr）和单元格（td）的过程中，首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，对于Web开发人员来...
《jQuery动态表格检索排序代码详解》 在网页开发中，数据展示往往需要用到表格，而动态表格结合检索和排序功能则能极大地提升用户体验。本篇文章将深入解析“jQuery动态表格检索排序代码”，帮助开发者理解并应用这...
可以使用jQuery的`height()`和`outerHeight()`方法来计算元素的高度，然后根据屏幕宽度动态调整列数。 7. **优化**：为了提升性能，可以使用`$.ajaxSetup({ cache: true })`启用缓存，避免重复请求同一图片。同时，...
raydreams.js是一款基于Bootstrap的jquery动态数据表格插件。该jquery动态数据表格的特点是使用简单，它能通过json动态加载表格所需的数据，并通过配置参数设置表格列是否排序和添加功能按钮等。
"jQuery动态创建表格生成器代码"的核心在于，它提供了一个无需手动编写HTML代码的便捷方式，可以轻松地添加行（row）和列（column）。这通常涉及到以下几个关键步骤： 1. **初始化表格结构**：在网页中创建一个基本...
通过以上步骤，你已经成功实现了使用jQuery动态更改表格数据的功能。在实际项目中，你可能还需要考虑更多细节，如错误处理、数据验证、异步更新等。同时，确保对不同浏览器的良好兼容性也是至关重要的，因为虽然...
用jquery实现table拖拽列功能，可动态改变表格列宽度，并且实现table表格100%的问题，如果列缩小，则自动拉伸最后一列以实现table100%的效果，如果拉伸长度比原长度大，则显示x滚动条。
`RWD Table`插件利用jQuery的强大功能，实现了对表格的动态操作。通过调用jQuery方法，开发者可以方便地在页面加载后初始化插件，或者在特定事件（如窗口大小改变）时重新应用固定效果。 **插件的主要功能** 1. **...
在本教程中，我们将探讨如何在jQuery DataTables中实现动态列和跨列合并。 动态列是指表格列的数量可以根据数据或者用户需求进行动态调整。在给出的代码示例中，动态列的实现主要依赖于`thead_key`和`thead_num`两...
在描述中提到的场景中，用户可以通过选择框定制他们希望在表格中看到的列，这涉及到对数据表列的动态管理。 首先，我们需要创建一个基础的HTML结构，包括一个表格元素`<table>`以及一个用于选择列的弹框。`<table>`...
本教程将详细讲解如何使用jQuery实现表格的列冻结功能，并重点考虑在低版本IE浏览器中的兼容性。 首先，我们需要理解jQuery库。jQuery是一款高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及...
这个插件通过监听表格容器的滚动事件，动态调整表头和固定列的位置，使其相对于可视区域保持不变。它利用了CSS定位（position）属性，如`position: absolute`或`position: fixed`来实现元素的固定。对于复合表头，...
《jQuery 拖动列插件深度解析》 在网页开发中，为了提供更好的用户体验，交互性成为了一个不可或缺的部分。jQuery作为一个强大的JavaScript库，为开发者提供了丰富的功能和简便的API，使得实现各种复杂的交互效果变...