实现功能： 通常在编辑表格时表格的行数是不确定的，如果一次增加太多行可能导致页面内容太多，反应变慢；通过此程序实现表格动态增加行，一直保持最下面有多个空白行。 效果： 一：原始页面 二：表1增加新行并绑定timepicker 三：表2自动增加行，新行绑定timepicker HTML源码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <...
实现鼠标可拖动调整表格列宽度 如图： 一、引入文件： 代码如下:<script src="/js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="/js/store.js" type="text/javascript"></script> <script src="/js/jquery.resizableColumns.js" type="text/javascript"></script> 二、TABLE 代码如下:<table id="myTable" border="1"> <thead> <tr> <th data-resizable-column-id="a"><input type="checkbox" /></th>...
一、引入文件 代码如下:<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <!-- 引入以下样式则表头出现排序图标，同时引入图片 --> <link href="css/style.css" rel="stylesheet" type="text/css" > 效果如图： 二、标准的HTML表格，必须包括thead和tbody标签 代码如下:<table id="myTable" class="tablesorter"> <thead> <tr> <th>Nam...
有这样一个表格： 点击删除执行保存，需要执行onclick事件SaveItem("<%#Eval("ID")>",this); 在JS中 代码如下:function SaveItem(id,btn) { var tbl = $(btn).parent().parent().parent(); //table 第二行记录 var dj = tbl.children().eq(1).chilren().eq(3).find("INPUT").attr("value")；//find方法本来返回一个数组，但这里就一个元素，可以这么写。如果有多个元素，要具体确定某一元素可以通过Jquery使用的选择器进行选择确...
今天学习了利用jQuery实现可以编辑的表格这个例子。这个例子需求是这样的：在前台的表格中单击单元格便可修改其中的内容，回车键保存修改的内容，esc撤销保存的内容。原理：单击客户端表格单元格时，在单元格中添加一个文本框，并将单元格中原来的内容赋值给文本框，再进一步去修改文本框内容，修改后将文本框内容重新赋值给单元格。 源码： 前台代码： 代码如下:<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebF...
代码如下:<table class="table-sort"> <thead> <tr> <th class="table-sort">First Name</th> <th class="table-sort">Last Name</th> <th class="table-sort">Email</th> <th>Phone Number</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Smith</td> <td><a href="mailto:john.s">john.s</a></td> <td>(613) 873-2982</td> </tr> <tr> <td>Sean</td> <td>MacIsaac</td> <td><a href="mailto:seanjmacisaac">seanjmacisaac</...
代码如下:function hasRepeat(objId,columnIndex){ var arr = []; $("#"+objId+" tbody tr").each(function(){ arr.push( $("td:eq("+columnIndex+")",this).text() ); }); if( arr.length==$.unique( arr ).length ){ return false; }else{ return true; } } //调用 alert( hasRepeat(tableID,列索引)==1?"有重复":"无重复" );
jquery通过select列表选择框对表格数据进行过滤 表格数据 代码如下:<table id="example"> <thead> <tr> <th>Name</th> <th>Surname</th> </tr> </thead> <tbody> <tr> <td>Michael</td> <td>Jordan</td> </tr> <tr> <td>Michael</td> <td>Jackson</td> </tr> <tr> <td>Bruno</td> ...
表格部分如下： 代码如下:<table class="table" id="test_table"> <thead> <tr> <th>时间</th> <th>详情</th> <th>操作</th> </tr> </thead> <tbody> <tr cid="7.0.0-2014-04-29_11-02-24_123" class="list_line"> <td> 2014-04-29 11:02:24 </td> <td> 详情 </td> <td...
周末写了个更改表格行顺序的小功能，直接贴代码 表格部分如下： 代码如下:<table class="table" id="test_table"> <thead> <tr> <th>时间</th> <th>详情</th> <th>操作</th> </tr> </thead> <tbody> <tr cid="7.0.0-2014-04-29_11-02-24_123" class="list_line"> <td> 2014-04-29 11:02:24 </td> <td> 详情 </td> <td> <span class="move_btn glyphicon glyphicon-arrow-up" move_act="up"></span> <span class="move_btn glyphic...
虽然jquery流行已经很多年了，一直都感觉很难，也没有花时间去学习它，只是偶尔哪天心血来潮了去看一点点，时隔多日又会忘得一干二净。最近用到表格奇偶行不同色，不得不去再看jquery，虽然感觉还是难，但已经不像以前一样无从下手了。做完后不得不来感叹一下jquery真是太牛了，不用自己再写一大堆javascript函数去实现了，简单几句轻松搞定。 先定义好表格的奇偶行样式，如下代码： 代码如下:body { font-size:12px; } th { colo...
1、表格奇数行和偶数行分别添加样式 代码如下:$(function(){ $(tr:odd).addClass("odd"); $(tr:even).addClass("even"); }); 不算表的头部 代码如下:$(function(){ $(tbody>tr:odd).addClass("odd"); $(tbody>tr:even).addClass("even"); }); 2、单选框控制行的高亮显示 代码如下:$(tobdy>tr).click(function(){ $(this).addClass(selected) .siblings().removeClass(selected) .end() // 重新返回该对象 .find(:radio).attr(...
以下列出13个jQuery操作table常用到的功能： 1.鼠标移动行变色 代码如下:$(#table1 tr).hover(function(){ $(this).children(td).addClass(hover)}, function(){ $(this).children(td).removeClass(hover)});方法二： 代码如下:$("#table1 tr:gt(0)").hover(function() { $(this).children("td").addClass("hover"); }, function() { $(this).children("td").removeClass("hover"); }); 2.奇偶行不同颜色 代码如下:$...
最近在做一个项目，功能已经实现，突然用户要求表头是浮动的（因为内容在同一页面展示，当滚动时，看不到列头）。由于功能已经实现使用jquery+纯html，为了改动少只能使用jquery原生态实现滚动。 html表头代码： 代码如下:<tr class="header" > <td width="150" style="border-bottom:0px;"> </td> <td colspan="2" style="border-bottom:0px;"> </td> <td colspan="7">师资力量</td> <td colspan="14">科研</td> <td style="bord...
代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>动态创建表格</title> <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script> <script type="text/javascript"> function CreateTable(rowCount,cellCount) { var table=$("<table border=\"1\...