Jquery 操作 Html Table 实例
来源:互联网 发布:李俊峰的霍去病 知乎 编辑:程序博客网 时间:2024/05/25 01:36
Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结。
一、鼠标移动到行更换背景色:
增加一个css样式:
.hover
{
background-color:
#cccc00;
}
Js脚本:
$(document).ready(
function
() {
//鼠标移动到行变色,单独建立css类hover
//tr:gt(0):表示获取大于 tr index 为0 的所有tr,即不包括表头
$(
"#table1 tr:gt(0)"
).hover(
function
() { $(
this
).addClass(
"hover"
) },
function
() { $(
this
).removeClass(
"hover"
) })
});
二、 表格奇偶行变色 :
奇数行和偶数行css:
.odd{ background-color:
#bbf;}
.even{ background-color:
#ffc; }
Js脚本:
$(document).ready(
function
() {
//奇偶行不同颜色
$(
"#table2 tbody tr:odd"
).addClass(
"odd"
),
$(
"#table2 tbody tr:even"
).addClass(
"even"
)
//或者
//$("#table2 tbody tr:odd").css("background-color", "#bbf"),
//$("#table2 tbody tr:even").css("background-color", "#ffc")
});
结果显示:
三、基本操作:
//(1)删除行,比如删除表格中的第二行:
//删除指定行(第二行)
$(
"#table3 tr:gt(0):eq(1)"
).remove();
//(2)删除列,比如删除表格中的第二列:
//eq:获取子元素索引从 0 开始,先删除表头
$(
"#table3 tr th:eq(1)"
).remove();
//nth-child:获取子元素从 1 开始
$(
"#table3 tr td:nth-child(2)"
).remove();
//(3)删除其它行,比如第二行之外的所有行:
$(
"#table3 tr:gt(0):not(:eq(1))"
).remove();
//(4)删除其它列,比如第二列之外的所有列:
//先删除表头
$(
"#table3 tr th:not(:eq(1))"
).remove();
$(
"#table3 tr td:not(:nth-child(2))"
).remove();
//(5)隐藏行,比如隐藏第二行:
$(
"#table3 tr:gt(0):eq(1)"
).hide();
//或者
//$("#table3 tr:gt(0):eq(1)").css("display", "none")
//显示
//$("#table3 tr:gt(0):eq(1)").css("display", "");
//(6)隐藏列,比如隐藏第二列:
$(
"#table3 tr th:eq(1)"
).hide();
$(
"#table3 tr td:nth-child(2)"
).hide();
//或者
//$("#table3 tr th:eq(1)").css("display", "none");
//$("#table3 tr td:nth-child(2)").css("display", "none");
//显示
//$("#table3 tr th:eq(1)").css("display", "");
//$("#table3 tr td:nth-child(2)").css("display", "");
//(7)插入新行,在表格最后的位置:
var
newRow =
"<tr style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>"
;
$(
"#table3 tr:last"
).after(newRow);
//(8)插入行,在第二行之后插入:
var
newRow =
"<tr style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>"
;
$(
"#table3 tr:gt(0):eq(1)"
).after(newRow);
//(9)获得单元格的值,比如第二行第三列:
var
v = $(
"#table3 tr:gt(0):eq(1) td:eq(2)"
).text();
//结果显示:第二行第三列
//(10)获取一列的所有值,比如第二列:
var
v =
""
;
$(
"#table3 tr td:nth-child(2)"
).each(
function
() {
v += $(
this
).text()+
" "
;
});
//(11)获取一行的所有值,比如第二行:
var
v =
""
;
$(
"#table3 tr:gt(0):eq(1) td"
).each(
function
() {
v += $(
this
).text() +
" "
;
});
//结果:第二行第一列 第二行第二列 第二行第三列 第二行第四列 第二行第五列
//(12)合并行单元格 比如合并 第二行第二个和第三个单元格:
$(
"#table3 tr:gt(0):eq(1) td:eq(1)"
).attr(
"colspan"
, 2);
$(
"#table3 tr:gt(0):eq(1) td:eq(2)"
).remove();
//(13)拆分行单元格将上面合并的单元格还原:
//注意不能使用
//$("#table3 tr:gt(0):eq(1) td:eq(1)").removeAttr("colspan");
$(
"#table3 tr:gt(0):eq(1) td:eq(1)"
).attr(
"colspan"
, 1);
$(
"#table3 tr:gt(0):eq(1) td:eq(1)"
).after(
"<td>第二行第三列</td>"
)
//(14)合并列单元格,比如合并第二列第二个单元格和第三个单元格
$(
"#table3 tr:gt(0):eq(1) td:eq(1)"
).attr(
"rowspan"
, 2);
$(
"#table3 tr:gt(0):eq(2) td:eq(1)"
).remove();
//(15)拆分列单元格,比如将上面刚合并的单元格还原:
$(
"#table3 tr:gt(0):eq(1) td:eq(1)"
).attr(
"rowspan"
, 1);
//在下面行第一个单元格后插入单元格
$(
"#table3 tr:gt(0):eq(2) td:eq(0)"
).after(
"<td>第三行第二列</td>"
);
//(16)为每个单元格增加点击事件,并弹出该单元格行索引和列索引:
$(document).ready(
function
() {
//点击#table3 的单元格返回 单元格索引
$(
"#table3 td"
).click(
function
() {
var
tdSeq = $(
this
).parent().find(
"td"
).index($(
this
));
var
trSeq = $(
this
).parent().parent().find(
"tr"
).index($(
this
).parent());
alert(
"第"
+ (trSeq) +
"行,第"
+ (tdSeq+1) +
"列"
);
})
});
原文:http://magina.blog.51cto.com/5235631/1349373
阅读全文
0 0
- Jquery 操作 Html Table 实例
- html table嵌套实例
- jquery操作table操作
- jquery 操作table tr的例子,以及一个ajax实例。
- 动态操作html table
- JAVASCRIPT 操作HTML TABLE
- jquery动态操作table
- Jquery操作table总结
- JQuery操作table
- jquery table操作
- JQuery 操作/获取 table
- jQuery table 操作
- jquery 操作table
- jQuery 操作table
- Jquery操作table
- jquery操作table
- jquery操作table备忘
- jquery table 基本操作
- JSON
- HTML5-web 存储
- 用OpenCV的distanceTransform函数作图像的距离变换
- JAVA培训学习笔记——CSS3选择器
- MVVM上下文DataContent弹窗传参失效问题,ViewModelLocator找不到传参数据
- Jquery 操作 Html Table 实例
- [转载] 支持支付宝付款的四大国外主机
- XListView
- HTML5-地理定位
- mysql触发器(Trigger)简明总结和使用实例
- 显示时间与输出管理
- POJ
- [ReactNative]Unable to load script form assets
- #Java 核心技术卷一阅读笔记# 第十一章 事件处理