jQuery操作Table学习总结(转)
转自:http://www.cnblogs.com/12go/archive/2011/12/01/2270756.html
<style type="text/css">
.hover
{
background-color:red;
}
</style>
<table id="table1" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>
<input type="checkbox" id="checkall" οnclick="checkAll1(this)"/>
</th>
<th>姓名</th>
<th>性别</th>
<th>密码</th>
<th>地址</th>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox1" />
</td>
<td>张三</td>
<td>男</td>
<td>zhangsan</td>
<td>上海</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox2" />
</td>
<td>李四</td>
<td>男</td>
<td>lisi</td>
<td>安庆</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox3" />
</td>
<td>王五</td>
<td>男</td>
<td>beijing</td>
<td>北京</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox4" />
</td>
<td>无名氏</td>
<td>女</td>
<td>wumingshi</td>
<td>上海</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox5" />
</td>
<td>赵老师</td>
<td>男</td>
<td>zhaolaoshi</td>
<td>浙江</td>
</tr>
<tr>
<td colspan="5" align="center">
<input type="button" id="btnAdd" runat="server" value="新增" οnclick="btnAddRow()" />
<input type="button" id="btnDelete" runat="server" value="删除" οnclick="btnDeleteRow()" />
<input type="button" id="btnSave" runat="server" value="保存" οnclick="btnSaveClick()" />
</td>
</tr>
</table>
操作:
1.鼠标移动行变色
方法一:jQuery中的hover(fun(),fun())方法,参数一:第一个方法是添加样式功能,参数二:第二个方法是取消样式功能
$("#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.奇偶行不同颜色
$("#table1 tbody tr:odd").css("background-color", "#bbf");
$("#table1 tbody tr:even").css("background-color","#ffc");
$("#table1 tbody tr:odd").addClass("odd")
$("#table1 tbody tr:even").addClass("even")
3.隐藏一行
$("#table1 tbody tr:eq(3)").hide();
4.隐藏一列
方法一:
$("#table1 tr td::nth-child(3)").hide();
方法二:
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});
5.//删除一行
//删除除第一行外的所有行
$("#table1 tr:not(:first)").remove();
//删除指定行
$("#table1 tr:eq(3)").remove();
6.//删除一列
//删除除第一列外的所有列
$("#table1 tr th:not(:nth-child(1))").remove();
$("#table1 tr td:not(:nth-child(1))").remove();
//删除第一列
$("#table1 tr td::nth-child(1)").remove();
7.得到(设置)某个单元格的值
//设置table1,第2个tr的第一个td的值。
$("#table1 tr:eq(1) td:nth-child(1)").html("value");
//获取table1,第2个tr的第一个td的值。
$("#table1 tr:eq(1) td:nth-child(1)").html();
8.插入一行:
/在第二个tr后插入一行
$("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)"));
9:获取每一行指定的单元格的值
var arr = [];
$("#table1 tr td:nth-child(1)").each(function (key, value) {
arr.push($(this).html());
});
var result = arr.join(',');
//全选或全不选
//方法一:
//全选或全不选 此传入的参数为event 如:checkAll(event)
function checkAll(evt)
{
evt=evt?evt:window.event;
var chall=evt.target?evt.target:evt.srcElement;
var tbl=$("#table1");
var trlist=tbl.find("tr");
for(var i=1;i<trlist.length;i++)
{
var tr=$(trlist[i]);
var input=tr.find("INPUT[type='checkbox']");
input.attr("checked",chall.checked);
}
}
//方法二:
//全选或全不选 此传入的参数为this 如:checkAll(this)
function checkAll(evt)
{
var tbl=$("#table1");
var trlist=tbl.find("tr");
for(var i=1;i<trlist.length;i++)
{
var tr=$(trlist[i]);
var input=tr.find("INPUT[type='checkbox']");
input.attr("checked",evt.checked);
}
}
//方法三:
//全选或全不选 此传入的参数为this 如:checkAll(this)
function checkAll(evt)
{
$("#table1 tr").find("input[type='checkbox']").each(function(i){
$(this).attr("checked",evt.checked)
});
}
//方法四:
//全选或全不选 此传入的参数为this 如:checkAll(this)
function checkAll(evt)
{
$("#table1 tr").find("input[type='checkbox']").attr("checked",evt.checked);
}
//客户端动态添加行
function btnAddRow()
{
//行号是从0开始,最后一行是新增、删除、保存按钮行 故减去2
var rownum=$("#table1 tr").length-2;
var chk="<input type='checkbox' id='chk_"+rownum+"' name='chk_"+rownum+"'/>";
var text="<input type='text' id='txt_"+rownum+"' name='txt_"+rownum+"' width='75px'/>";
var sel="<select id='sel_"+rownum+"'><option value='1'>男</option><option value='0'>女</option></select>";
var row="<tr><td>"+chk+"</td><td>"+text+"</td><td>"+sel+"</td><td>"+text+"</td><td>"+text+"</td></tr>";
$(row).insertAfter($("#table1 tr:eq("+rownum+")"));
}
//客户端删除一行
//每次只能删除一行,删除多行时出错
function btnDeleteRow()
{
$("#table1 tr").find("input[type='checkbox']").each(function(i){
if($(this).attr("checked"))
{
if(i!=0)//不能删除行标题
{
$("#table1 tr:eq("+i+")").remove();
}
}
});
}
//这个比上面的要好,可以一下删除多个记录
function btnDeleteRow()
{
$("#table1 tr").each(function(i){
var chk=$(this).find("input[type='checkbox']");
if(chk.attr("id")!="checkall")//不能删除标题行
{
if(chk.attr("checked"))
{
$(this).remove();
}
}
});
}
//客户端保存
function btnSaveClick()
{
//find()方法中我暂时不知道如何设定多个筛选条件,所以下面得不到select列表的值
//$("#table1 tr td").find("input[type='text']" || "select").each(function(i){
//alert($(this).val());
//});
$("#table1 tr").find("td").each(function(i){
if($(this).find("input[type='text']").length>0)
{
alert($(this).find("input[type='text']").val());
}
else if($(this).find("select").length>0)
{
alert($(this).find("select").val());
}
});
}
转载于:https://www.cnblogs.com/ssfie/archive/2013/05/24/3097772.html
jQuery操作Table学习总结(转)相关推荐
- 【Jquery】Jquery操作table表格详细说明
函数说明 //eq:获取子元素索引从 0 开始 $("#tableid tr th:eq(1)").remove();//第二列 //nth-child:获取子元素从 1 开始 $ ...
- Jquery操作Table
Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table {border-collapse: ...
- 汇总常用的jQuery操作Table tr td方法
2019独角兽企业重金招聘Python工程师标准>>> 1.鼠标移动行变色 方法一:jQuery中的hover(fun(),fun())方法,参数一:第一个方法是添加样式功能,参数二 ...
- html表格统计表,jQuery操作表格(table)的常用方法、技巧汇总
以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 $('#table1 tr').hover(function(){ $(this).children('td').addCl ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- jQuery框架学习第四天:使用jQuery操作元素的属性与样式
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
- [转帖]jQuery框架学习第四天:使用jQuery操作元素的属性与样式
一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通 ...
- 【jQuery学习】—jQuery操作CSS和表格
[jQuery学习]-jQuery操作CSS和表格 一.jQuery操作CSS 二.jQuery操作表格
- 【jQuery学习】—jQuery操作元素位置
[jQuery学习]-jQuery操作元素位置 一.position方法 作用:返回相对某个元素的偏移量 格式:元素.position() 返回值包含top属性和left属性的对象 如果祖先元素中没有 ...
最新文章
- C++:uniform_int_distribution、rand()和mt19937随机数、partial_sum、容器最小值和最大值、accumulate
- 青龙羊毛——内容改版
- python gevent模块 下载_Python协程阻塞IO非阻塞IO同步IO异步IO
- vimrc for windows
- 【linux】——linux ls命令参数及用法详解---linux显示目录内容命令
- 基于JAVA+SpringMVC+Mybatis+MYSQL的智能养生平台系统
- C++ 内存分配 学习笔记
- Java匹马行天下之 Java国出了个Java——举国欢庆
- 计算机版音乐教学,EduOffice音乐教学备课软件
- 网络收集的逻辑思维题
- 百度高德谷歌地图与大地坐标系相互转换
- 停下来想一想:你为什么会离开游戏行业?
- kettle 读xml无法获得属性信息,输出表修改不能自动更新修改办法
- DroppyCtf靶机
- 计算机网络技术专业毕业论文参考选题,计算机网络技术专业毕业论文参考选题...
- 微型计算机扫描方法,微机习题课(键盘-8255A行扫描法).ppt
- “ODM OEM OBM的区别”网址汇总
- 计算机毕业设计之 少儿编程学习平台的设计与实现
- 教你如何赚你的第一桶金 - 2048(包括源代码)
- PHP字符串常用函数
热门文章
- 用HTML,CSS和JavaScript创建iPhone/iPad应用程序
- 源码网络-推荐精品×××站
- MySQL安装叫重启_MySQL重启命令和MySQL数据库安装目录的操作过程
- pyplot 画多个图时搅合到了一起_这些认数字游戏,宝宝最喜欢,家长可以和宝宝一起玩...
- kali linux切换更新源_KALI更新源2020版(永久实用)
- python mysql 基于 sqlalvhrmy_Python基于DB-API操作MySQL数据库过程解析
- php 给html 赋值,PHP+JavaScript+HTML变量之间赋值及传递
- 计算机office2010高级应用程序,计算机办公软件应用office2010高级解题步骤
- 第一代计算机主要用于科学计算和数据处理,计算机一级第一章练习题.doc
- Redis 基本数据类型和使用