一、隔行换色 代码如下:$("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定： 代码如下:$("table tr:nth-child(odd)").css("background-color","#eeeeee"); :nth-child 匹配其父元素下的第N个子或奇偶元素 二、鼠标经过变色 代码如下:$("tr").live({ mouseover:function(){ $(this).css("background-color","#eeeeee"); }, mouseout:function(){ $(this).css("ba...
一、引入文件 代码如下:<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...
js处理表格 1、行颜色间隔显示 css样式：两个选择器 代码如下:<style type="text/css"> .one{ background-color:#33ffcc; } .two{ backgound-color:#ffff66; } </style> <script type="text/javascript"> function trcolor() //控制间隔行颜色显示不同 { var tabNode = document.getElementsByTagName("table")[0]; //获取table节点 var trs = tabNode.rows; //获取table中的所有的行 for(var x=1; x<trs.length;x++) { if(x%2 ==...
表格有几行: var trCnt = table.rows.length; (table为Id ) 每行有几列：for (var i=0; i<trCnt; i++) table.rows[i].cells.length; javascript操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法 table.insertRow()在IE下没问题 但在firefox下就得改为table.insertRow(-1) 同样其相应的insertCell()也要改为insertCell(-1) insertRow() 方法 定义和用法 insertRow() 方法用于在表格中的指定位置插入一个新行。...
像这种页面，我们往往不是通过提交表单来处理这些数据，因为如果在后台去遍历处理这些大量的数据是非常繁琐的；比较好的做法是在前台页面中将数据以对象形式保存在json中，然后在后台直接将json转换成我们需要的对象，这样我们的直接可以处理对象了！ 添加按钮 代码如下:<input name="button" type="button" value="添加" onClick="addRowForPswdBasicFillTemplate(pswd_basic_fill_template)"> table id是pswd_basic_fill_templ...
1、实现源码 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript实现获取table中某一列的值</title> <script type="text/javascript"> function getTdValue() { var tableId = document.getEl...
1、设计表格 代码如下:<body class="html_body"> <div class="body_div"> <table id="tab"> <tr style="background: #000000;color: #FFFFFF;font-weight: bolder;"> <th>工号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>2014010101</td> <td>张峰</td> <td>56</td> <td>男</td> </tr> <tr> <td>2014010102</td> <td>李玉</td> <td>42</td> <td>女</td> </tr> <tr> <td>2014010103</td> <td>王珂</td> <td>3...
项目中要实现table排序的功能。 网上有很多解决方案，很多都基于jQuery。 jquery.tablesorter，大小17KB，不过他的首页在ie10下兼容性有点问题。 DataTables，大小75KB，功能强大，带分页，搜索等功能。 还有插件叫sortElements，很小巧，只有3KB，兼容性也不错，而且在Github上有818个星。 最后我选择用sortElements，实现很简单： 1. 引入jQuery 代码如下:<script type="text/javascript" src="jquery.js"></script> 2. 引入so...
1、前端页面 代码如下:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1"> <title>广告管理 </title> <link href="Styles/css.css" rel="stylesheet" type="tex...
html： 代码如下:<table id=wifi_clients_table style="color:#0099CC;font-size:12px;" class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr class="success"> <th>序号</th> <th>机器名</th> <th>IP地址</th> <th>MAC地址</th> <th>上行/下行速率</th> </tr> </thead> <tbody> </tbody> </table> js： 增加： 代码如下:if(条件) {//根据InterfaceType的值区分无线客户端和有限客户端 var t...
有时候table的列数太长，不利于使用者查询，所以利用JS做了一个table的分页，以下为相关代码 一、JS代码代码如下:<script type="text/javascript"> var pageSize = 15; //每页显示的记录条数 var curPage=0; //当前页 var lastPage; //最后页 var direct=0; //方向 var len; //总行数 var page; //总页数 ...
以下列出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.奇偶行不同颜色 代码如下:$...
最近做项目遇到要动态添加、删除表格行的操作，实现如下 html代码 代码如下:<table cellpadding="0" cellspacing="0" border="1" style="margin:auto; width:96%;" id="LearnInfoItem"> <tr > <td colspan="8" bgcolor="#96E0E2" style="height:30px;" ><h3 style="text-align:center; margin:0;">主要学习简历</h3></td> </tr> <tr id="tr1"> <td class="tdStyle2">起讫时间 </td> <td class="tdStyle2">毕业院校</td> <td class...
代码如下:function checkwo(){ var vales = ""; $("#vales").val(vales); var flag = false; var bo = true; $("#data_table").find("tr").each(function(){ $(this).find("td input").each(function(){ if($(this).attr("name")=="rid") { vales+=$(this).val()+"&"; } if($(this).attr("name")=="qty") { var qty = $(this).val(); if(qty<0) { alert("实盘数量不能为负数"); bo = false; return; } if(qty>0) { flag = true; } ...
jquery table选中行颜色(效果更好) 代码如下:<html> <head> <style type="text/css"> .table-tr-title{ height: 26px; font-size: 12px; text-align: center; } .table-tr-content{ height: 18px; background: #FFFFFF; text-align: center; font-size: 12px; } .normalEvenTD{ background: #DFD8D8; } .normalOddTD{ background: #FFFFFF; } .hoverTD{ background-color: #eafcd5; height: 18px; text-align: center; font-size:...