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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
PHP中的类-什么叫类
2006/11/20 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
用Python抢过年的火车票附源码
2015/12/07 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
初中生自我鉴定
2014/02/04 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
出国留学经济担保书
2014/04/01 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
入党积极分子群众意见
2015/06/01 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书