首先创建html页面为sort.html ，并把下面的内容复制进去 代码如下: 无标题文档 .desc span{ display:none;} .asc em{ display:none;} ID|- name|- 1 开心 3 开饭 5 开放 ID|- name|- 1 开心 3 开饭 5 开放 新建脚本页 sort.js 代码如下: /* 表格排序功能 事件：2012 7 24 DOM 节点 如果表格需要排序 在表格属性中添加 sort="true" 并且 id是唯一并且是必须的 此js文件直接引入即可 因为...
在线演示： http://demo.jb51.net/js/2012/jqueryAutoAddDeleteTableTr/jqueryAutoAddDeleteTableTr_leftClick.html//左键 代码如下: jQuery 动态增删表格 $(document).ready(function(){ var addToTrTop = 10; var addToTrLeft = 534; var preEdit = null; var inputData = ''; var bindListening = function(){ //表格点击响应 $("td").unbind().click(function(){ var tdData = $("#tmpEditor").val(); if( !$(this)....
排序代码 代码如下: function SortTable(sTableID, iCol, sDataType){ this.oTable=document.getElementById(sTableID); this.oTBody=this.oTable.tBodies[0]; this.colDataRows=this.oTBody.rows; this.aTRs=[]; this.iCol=iCol; this.sDataType=sDataType; } SortTable.prototype={ convert:function(sValue, sDataType){ switch(sDataType){ case "int": return parseInt(sValue); case "float": return parseFloat(sValue); c...
表格：合并单元格 参考示例：合并单元格 调用方法：margeCells。如下代码： 代码如下: grid.on("load", onLoad); function onLoad(e) { var grid = e.sender; var marges = [ { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 }, { rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3 } ]; grid.margeCells(marges); }
无标题文档 1 11 上移 下移 2 22 上移 下移 3 33 上移 下移 4 44 上移 下移 5 55 上移 下移 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
代码如下: body{ font:12px/1.5 Tahoma; } #gannt_left{ width:500px; } #left-scroll-panel{ width:520px; height:100px; overflow-y: auto; } table{ table-layout:fixed; border-collapse: collapse; border-spacing: 0px; text-align:center; width:500px; } table,th,td{ border:1px solid #afe0ea; } th,td{ height:20px; line-height:20px; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap...
jQuery对表格(table)的处理提供了相当强大的功能，比如说对表格特定行(row)或列(column)进行排序、样式改变等等。如果你的英文够好，你可以读读这篇文章：jQuery table manipulation。本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变，希望它可以对jQuery表格处理的深层学习提供一些帮助。比如我们有这样一个表格： 第一列 第二列 第三列 第四列第一列 第二列 第三列 第四列第一列 第二列 第三列 第四列第...
在前端对表格排序的Jquery插件有很多，功能也很强大，比如说Jquery Data Tables对表格的处理就相当强大，可对表格进行排序，搜索，分页等操作，不过没有仔细研究过其实现原理。为了更好的理解在前端对表格进行排序的原理，也为了进一步的学习Jquery，所以决定用Jquery来实现一个对表格进行排序的小功能。 该实现的主要思想是：获取鼠标点击的表头单元格的列号，遍历数据行，获取每个中的html，同时获取每个标签下对应获取到的列号的...
table 隔列换色效果 #test{ background-color:#C96; text-align:center; line-height:2em;} .over{background-color:#fff;} .out{background-color:#F1F1F1;} window.onload = function(){ //returnColor("test"); setColor("test"); } function setColor(id) { var trs=document.getElementById(id).getElementsByTagName("tr"); for(var i=0; i 0 1 2 18 3 4 5 19 6 7 8 20 9 10 11 21 12 13 14...
简介 这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例，比如IE5，Firefox等。概况 － Sample1.html 这篇文章通过实例代码介绍DOM。请从尝试下面的HTML例子开始。它使用DOM 1的方法由JavaScript动态创建一个HTML表格。它创建一个由四个包含文本内容的单...
JS实现的表格 document.write(''); var i=0; while(i') } document.write(''+i+''); i++; //document.write(''); } if(i%10==0){ document.write(''); } document.write(''); var ys=null; function show(obj){ ys=obj.bgColor; obj.bgColor="red"; } function noshow(obj){ obj.bgColor=ys; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
非侵入实现，控制更方便 效果图： 代码如下: javascript practice table{width:300px;} caption{background:#DCA;} th{background:#FCA;width:50%;} td{text-align:center;} $(document).ready(function(){ odd= {"background":"#EDA","color":"#3F5"};//奇数样式 even={"background":"#2DA","color":"#875"};//偶数样式 odd_even("#table_test",odd,even); }); function odd_even(id,odd,even){ $(id).find("tr").each(f...
在做后台中遇到的情况，分享下 代码如下: 表格增行，删行处理 $(function(){ var show_count = 20; //要显示的条数 var count = $("input:text").val(); //递增的开始值，这里是你的ID var fin_count = parseInt(count) + (show_count-1); //结束递增的条件 $("#btn_addtr").click(function(){ if(count { $("tr:eq(1)").clone().appendTo("table"); //在表格后面添加一行 $("tr:last td input:first").val(++count); //改...
【Title】[原]表格单元格交错着色 【Abstract】以空间换时间，循环确定所着颜色。 【Environment】jQuery 【Author】wintys (wintys@gmail.com) http://wintys.cnblogs.com 【Content】: 1、效果 2、问题描述 对如下表格中的单元格进行交错着色。表格中HTML标签、内容已定。 代码如下: TR0-TD0 TR0-TD1 TR0-TD2 TR0-TD3 TR1-TD0 TR1-TD1 TR1-TD2 TR1-TD3 TR2-TD0 TR2-TD1 TR2-TD2 TR2-TD3 TR3-TD0 TR3-TD1 TR3-TD2 TR3...
代码如下: 筛选： 姓名性别地址 一班 大爷男10武汉1 大爷男9武汉2 大爷男8武汉3 二班 大爷男7武汉4 大爷男6武汉5 大爷男5武汉6 大爷男4武汉7 三班 大爷男3武汉8 大爷男2武汉9 大爷男1武汉10 $(function(){ $("#sea").keyup(function(){ $("#se tbody tr").hide().filter(":contains('"+$(this).val()+"')").show(); }).keyup(); }); 代码如下: // jquery表格内容筛选 $(function(){ $('tr.parent').click(function(...