jQuery *** 作table表格

一、数据准备

二、 *** 作

//1.鼠标移动行变色

$("#table1 tr").hover(function(){

$(this).children("td").addClass("hover")

},function(){

$(this).children("td").removeClass("hover")

})

$("#table2 tr:gt(0)").hover(function() {

$(this).children("td").addClass("hover")

}, function() {

$(this).children("td").removeClass("hover")

})

//2.奇偶行不同颜色

$("#table3 tbody tr:odd").css("background-color", "#bbf")

$("#table3 tbody tr:even").css("background-color","#ffc")

$("#table3 tbody tr:odd").addClass("odd")

$("#table3 tbody tr:even").addClass("even")

//3.隐藏一行

$("#table3 tbody tr:eq(3)").hide()

//4.隐藏一列

$("#table5 tr td::nth-child(3)").hide()

$("#table5 tr").each(function(){$("td:eq(3)",this).hide()})

//5.删除一行

// 删除除第一行外的所有行

$("#table6 tr:not(:first)").remove()

//6.删除一列

// 删除除第一列外的所有列

$("#table6 tr td:not(:nth-child(1))").remove()

//7.得到（设置）某个单元格的值

//设置table7,第2个tr的第一个td的值。

$("#table7 tr:eq(1) td:nth-child(1)").html("value")

//获取table7,第2个tr的第一个td的值。

$("#table7 tr:eq(1) td:nth-child(1)").html()

//8.插入一行：

//在第二个tr后插入一行

$("插入3插入插入插入").insertAfter($("#table7 tr:eq(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", "")

jquery 获取 table 总行数：

$("table tr").size()

 var hang = $("#g").find("tr").length

jquery 获取 table 总列数：

$("table td").size()

var lie = $("#g").find("tr").find("td").length-1

在jquery里可以直接用isNaN()，因为他是JavaScript的类库。是由JavaScript语言写的。

例如：

<script type="text/javascript">

$(document).ready(function(){

alert(isNaN($('#id').val()))

})

</script>可以直接使用

比如设置table的id为tab

var

trHTML

=

"..."

$("#tab").append(trHTML)//在table最后面添加一行

$("#tab

tr:eq(2)").after(trHTML)

//

在table的第3行后面添加一行

这样就可以进行动态的添加行了，至于你是通过什么事件来动态添加那就看你自己的意思了，通过button或者div之类的点击事件添加，只要把上面的两行代码放进去就ok，注意，要把var

trHTML那行代码放进添加事件里面，不然不管点击多少下，都只能添加一行

$(function()

{

$(":button").click(function()

{

var

tr

=

"new"

//$("table").append(tr)

$("table

tr:eq(2)").after(tr)

})

})

这是我测试用的代码，你可以运行看看

---