Jquery动态列功能完整实例


Posted in jQuery onAugust 30, 2019

本文实例讲述了Jquery动态列功能。分享给大家供大家参考,具体如下:

看到有人写的一个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="http://libs.baidu.com/jquery/1.8.1/jquery.min.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>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 #jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 #jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 #jQuery
Jquery实现获取子元素的方法分析
Aug 24 #jQuery
jquery分页优化操作实例分析
Aug 23 #jQuery
jquery实现的分页显示功能示例
Aug 23 #jQuery
jQuery表单选择器用法详解
Aug 22 #jQuery
You might like
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
常用DOM整理
2015/06/16 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
学习python处理python编码问题
2011/03/13 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
广告学毕业生求职信
2014/01/30 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
商业用房租赁协议书
2014/10/13 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers
如何利用python实现Simhash算法
2022/06/28 Python