`
danwind
  • 浏览: 225560 次
  • 性别: Icon_minigender_1
  • 来自: 广东
社区版块
存档分类
最新评论

jquery表格插件及JavaScript选择框

    博客分类:
  • Ajax
阅读更多
1.把对应的jQuery包导入进来。页面加载时,加入jQuery初始化。首先是得到表格的id,然后再调用jQuery插件中的dataTable()方法即可。如下所示
   $(function() {
      $('#tableID').dataTable();				
   });

表格标准格式:
<table id="tableid">
    <thead>
        <th></th>
        <th></th>
        <th></th>
        </thead>
	</tbody>
    <tr>
	<td></td>
	<td></td>
	<td></td>
    </tr>
	</tbody>
</table>

2.JavaScript选择框选择问题。首先在一个页面中添加一个select控件,然后在父页面打开一个新页面,称为子页面。在此页面中添加checkbook控件,在子页面中点击checkbook时,把对应的值填入父页面中select控件去。实现代码如下:
<script type="text/javascript">
		<!--
		$(function() {
			$('#tableID').dataTable();				
		});
		
		function selectBoxClick(id, name, checkBox){
		    if(checkBox.checked == true) {
			    addrole(id, name);
		    } else {
		    	notAddRole(id);
		    }
		    
		}

		function addrole(id, name){
			self.opener.addrolepoint(id, name);
		}

		function notAddRole(id){
		    var list = self.opener.document.getElementById('role_ids');
		    var maxCnt = list.options.length;
		    for(var i = maxCnt - 1; i >= 0; i--){
		        if ((list.options[i] != null) && (list.options[i].value == id)){
		            list.options[i] = null;
		        }
		    }
		}

		function addrolepoint(id, name){
			var groupIds = window.document.getElementById('role_ids');
			var newplace = groupIds.options.length;
			if (newplace > 0 && groupIds.options[0].value == ""){
			  newplace = 0;
			}
			for (var i = 0; i < groupIds.options.length; i++){
				if (groupIds.options[i].value == id){
					newplace = -1;
				}

			}
			if (newplace > -1){
				groupIds.options[newplace] = new Option(name + " (" + id + ")", id);
			}
		}
		-->
		</script>
分享到:
评论

相关推荐

    jquery.tablecheckbox:一个用复选框增强表格的最小jquery插件

    从 Github 获取使用凉亭安装: bower install jquery.tablecheckbox使用 npm 安装: npm install jquery.tablecheckbox特征将行上的点击翻译到它们的复选框支持表格标题中的主复选框支持按住shift键选择多行无需...

    jQuery表格插件datatables用法总结

    DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。 官方网站及其下载地址:http:/www.datatables.net 当前最新版为1.10.2,读者可点此本...

    原生systable表格插件(支持API接口)

    SYSTABLE version1.2 table表格插件,是本人独立开发的后台通用系统SYSUI的扩展js插件,纯js,不依赖jquery库。经测试,支持IE,360,火狐,谷歌,safari等主流浏览器,支持扩展。是一款不错的table表格插件。 支持...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery实现的多功能弹出窗插件weebox及示例代码 9.一款支持...

    JavaScript基础教程第8版

    《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上...

    61个时尚网页特效

    jquery角色左右选择框 jq点评网星级评论 js js+css实现上下翻页相册代码 js+css实现上下翻页相册代码.rar js制作的左侧上下滑动缩略图右侧渐显动 JS动态图例代码 JS动态图例代码.rar my.html QQ音乐10屏带缩略图JS...

    JavaScript框架近50套,各类特效几乎全了

    收集了50个开发者最喜欢使用的jQuery插件 滑动门控制 滑动展开或关闭DIV层 2级菜单 Tabs - 选项卡 幻灯片 过渡特效 拾色器 表单验证器 提示工具 表格插件 拖拽插件 日历组件等内容

    jquery.appendGrid:动态表输入JavaScript插件

    AppendGrid AppendGrid允许您逐行输入结构化数据,例如填充电子表格。 它允许您在网格中添加/删除/插入/删除行。 生成的输入/选择/文本区域控件的名称很不错,可以提交给服务器端应用程序,例如ASP.NET/PHP/JSP。 ...

    jQuery详细教程

    提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...

    jQuery攻略.pdf

     第1章 jQuery基础知识 1 1.1 jQuery的安装 1 1.2 选择DOM节点 2 1.3 延迟JavaScript的执行 3 1.4 把CSS应用到元素上 3 1.5 选择一系列非标准的HTML元素 4 1.6 计数DOM节点和显示其文本 5 1.7 获得一个元素的HTML...

    jquery基础教程高清版PDF.part5.rar

    第1章 jQuery入门   1.1 jQuery能做什么   1.2 jQuery为什么如此出色   1.3 第一个jQuery文档   1.3.1 下载jQuery   1.3.2 设置HTML文档   1.3.3 编写jQuery代码   1.4 小结  第2章 选择符...

    TedTable:jQuery插件以简单的方式管理表格

    TedTable是一个jQuery插件,... 非常简单:设置标题元素和要显示在表中的数据,插件将自动创建带有分页的表,用于显示行数的选择框,用于每一列的搜索框以及用于每列。 我希望该插件既快速又轻巧,并且可以长期支持。

    JavaScript实战

    8.1.1 用JavaScript选择链接 218 8.1.2 确定链接的目标 219 8.1.3 不要打开链接 220 8.2 在新窗口中打开外部链接 221 8.3 创建新窗口 224 窗口属性 224 8.4 在页面上的一个窗口中打开页面 228 8.4.1 定制Greybox窗口...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    jQuery 和Dom关系及jQuery版本 jQuery选择器 实例多选反选取消 删选器以及Tab菜单示例 示例:模态编程框 jQuery 样式以及属性操作 示例:TAB切换菜单 jQuery内容操作 点赞以及jQuery css操作 JQuery高度以及位置操作...

    Jqury基础教程

    10.4 jQuery UI插件库 10.4.1 效果 10.4.2 交互组件 10.4.3 部件 10.4.4 jQuery UI ThemeRoller 10.5 其他插件 10.5.1 表单类 10.5.2 表格类 10.5.3 图像类 10.5.4 亮盒及模态对话框 10.5.5 图表类 ...

    Windows7窗口模拟插件——小七(Seven)

    小七是一款基于JQuery的窗口界面模拟插件,它可以帮助WEB开发者提高开发效率及用户体验,并利用窗口的优势提供多任务同时操作的用户界面。 小七的愿景 小七是免费开源的项目,之所以选择开源是因为我希望可以和广大...

    韩顺平PHP JS JQUERY 所有视频下载种子 货真价实

    10-25 3 jquery过滤选择器及练习题讲解 10-25 4 内容过滤器 可见度过滤器及练习讲解 10-26 1 课程回顾 10-26 2 属性过滤选择器 10-26 3 子元素选择器 表单对象属性选择器 10-26 4 jquery对象集合遍历的四种形式及...

    基于Python的flask网络爬虫web项目,实现智能职位检索和推荐,全栈开发,爬虫web应用实战

    3.1.3前端插件: echarts(用于将结果渲染程柱状图和饼状图)+dispicker(显示省市区便于选择地区) + smart-zoom(将词云图进行放大)+boostrap-Table(对爬取的职位信息展示在表格中) 3.2后端 3.2.1 基于flask的web...

Global site tag (gtag.js) - Google Analytics