jQuery表基本操作示例分析

本文通过实例说明了jQuery Table的基本操作。分享给大家参考，如下：

Jquery操作Html Table非常方便。下面简单总结一下表格的基本操作。

首先，创建一个通用表格css和一个表格表格：

表格{边框-折叠：折叠；边框间距： 0；右边距：自动；左边距left: auto宽度： 800 px；} th，td { border: 1px固体# b5d6e6font-size : 12px；font-weight:正常；文本对齐：中心；垂直对齐：中间；height: 20px} th {底色-颜色：灰色；}表格tr th style=' width: 160px'标题1 /th样式=' width: 160px'标题第二/第三种样式='宽度： 160 px；'标题3/th style=' width : 160 px；'标题iv /th样式=' width: 160px'标题5/th/Tr TD第一行第一列/td第一行第二列/td td第一行第三列/td第一行第五列/td/Tr TD第二行第一列/td第二行第二列/td第二行第三列/td第二行第四列/td第二行第五列/td Tr TD第三行第一列/TD第三行第二列/TD第三行第三列/td td 第三行第四列/td/tr TD第四行第一列/td第四行第二列/td第四行第三列/td第四行第四列/td第四行第四列/TD第四行第四列/TD第四行第五列/TD/tr/表一

添加css样式：悬停{ background-color : # cccc 00；}Js脚本：

$(文档)。ready(function(){//鼠标移动到该行改变颜色，单独建立css类hover //tr:gt(0):这意味着获得所有大于tr索引的trs。也就是标题$ ('# table1tr:gt (0)')。悬停(function () {$ (this))。addclass ('hover')}，function () {$ (this)。removeclass ('hover')})不包括在内；结果执行结果：

二、表格奇偶行变色：

奇数行和偶数行css:odd { background-color : # bbf；}.偶数{ background-color : # ffc；}Js脚本：

$(文档)。ready(function(){//不同颜色的奇数行和偶数行$ ('# table2todd tr:odd ')。addclass('奇数')，$(' # table 2奇数tr:even偶数')。addclass('偶数')//或//$ ('# table2todd tr3360odd ')。CSS('背景色'，' # BBF ')，//$ ('# table2tb)结果显示：

三、基本操作：

(1)删除行，如删除表中的第二行：

//删除指定的行(第二行)$(' # table 3tr 3360 gt(0): eq(1)')。移除()；(2)删除列，如删除表中的第二列：

//eq:从0获取子元素索引，首先删除表头$(' # table 3tr 3360 eq(1)')。移除()；//nth-child:获取从1 $(' # table 3 RTD : th-child(2)')开始的子元素。移除()；(3)删除其他行，如除第二行以外的所有行：

$(' # table 3 tr : gt(0): not(: eq(1))')。移除()；(4)删除其他列，如除第二列外的所有列：

//首先删除表头$(' # table 3tr th : not(: eq(1))')。移除()；$(' # table 3 tr TD : not(: th-child(2))')。移除()；(5)隐藏行，例如隐藏第二行：

$(' # table 3 tr : gt(0): eq(1)')。hide()；//或/$(' # table 3tr 3360 gt(0): eq(1)')。CSS ('display '，' none ')//display/$(' # table 3tr 3360 gt(0): eq(1)')。(6)隐藏列，如隐藏第二列：

$('#table3 tr th:eq(1)')。hide()；$(' # table 3 tr TD : th-child(2)')。hide()；//或/$ ('# table3tr th:eq (1)')。CSS('显示'，'无')；//$(' # table 3 tr TD : th-child(2)')。css('display '，' none ')；//display//$(' # table 3tr th : eq(1)')。CSS ('display '，' ')；//$(' # table 3 tr TD : th-child(2)')。css('display '，' ')；(7)在表格的最后位置插入新的一行：

var NewRow=' tr style=\ ' background : red；\'td新行第一列/tdtd新行第二列/tdtd新行第三列/tdtd新行第四列/tdtd新行第五列/TD/tr '；$('#table3 tr:last ')。在(newRow)之后；在第二行之后插入一行，插入：

var NewRow=' tr style=\ ' background : red；\'td新行第一列/tdtd新行第二列/tdtd新行第三列/tdtd新行第四列/tdtd新行第五列/TD/tr '；$(' # table 3 tr : gt(0): eq(1)')。在(newRow)之后；(9)获取单元格的值，如第二行第三列：

var v=$(' # table 3 tr : gt(0): eq(1)TD : eq(2)')。text()；//结果显示第二行第三列(10)得到一列的所有值，比如第二列：

var v=$(' # table 3 tr TD : th-child(2)')。每个(函数(){ v=$(this))。text()' '；});//结果：第一行第二列第二行第二列第三行第二列(11)得到一行的所有值，如第二行：

var v=$(' # table 3 tr : gt(0): eq(1)TD ')。每个(函数(){ v=$(this))。text()' '；});//结果：第二行、第一列、第二行、第三列、第二行、第四列、第二行、第五列(12)合并行单元格，如合并第二行第二、三个单元格：

$(' # table 3 tr : gt(0): eq(1)TD : eq(1)')。attr('colspan '，2)；$(' # table 3 tr : gt(0): eq(1)TD : eq(2)')。移除()；(13)拆分行单元格以恢复上面的合并单元格：

//注意//$(' # table 3tr 3360 gt(0): eq(1)TD : eq(1)')。不能使用remove attr(' col span ')；$(' # table 3 tr : gt(0): eq(1)TD : eq(1)')。attr('colspan '，1)；$(' # table 3tr : gt(0): eq(1)TD : eq(1)')。在(' tdsecond row and third column /td ')之后(14)合并列单元格，例如合并第二列中的第二个单元格和第三个单元格。

$(' # table 3 tr : gt(0): eq(1)TD : eq(1)')。attr('rowspan '，2)；$(' # table 3 tr : gt(0): eq(2)TD : eq(1)')。移除()；(15)拆分列单元格，如恢复上面刚合并的单元格：

$(' # table 3 tr : gt(0): eq(1)TD : eq(1)')。attr('rowspan '，1)；//插入单元格$(' # table 3tr 3360 gt(0): eq(2)TD : eq(0)')。在下一行第一个单元格之后(' td第三行第二列/TD ')；(16)为每个单元格添加点击事件，并弹出该单元格的行索引和列索引：

$(文档)。ready(function(){//单击#table3的单元格返回单元格索引$ ('# table3td ')。单击(function () {var tdseq=$ (this))。父项()。查找(' TD ')。索引($(this))；var trSeq=$(this)。父项()。父项()。查找(' tr ')。索引($(this)。parent())；Alert ('row' (trSeq)'，column '(tdSeq 1)')；})});附件：完整的示例代码单击此处下载此网站。

更多对jQuery感兴趣的读者，请查看本站话题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》、0103010。

希望本文对大家的jQuery程序设计有所帮助。