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;

<table

class="table

table-hover"

id="test123">

<tr>

<th

width="45">选择</th>

<th

width="100">驾校名称</th>

<th

width="100">合作驾校名称</th>

<th

width="100">申请时间</th>

<th

width="100">申请状态</th>

<th

width="100"> *** 作</th>

</tr>

<tr>

<td><input

type="checkbox"

name="id"

value="1"

/></td>

<td>中大驾校</td>

<td>潇湘驾校</td>

<td>2016-04-15

14:40:20</td>

<td

class="tablestate">未处理</td>

<td><a

class="change

button

border-blue

button-little

update"

href="#">修改申请状态</a></td>

</tr>

<tr>

<td><input

type="checkbox"

name="id"

value="1"

/></td>

<td>中大驾校</td>

<td>潇湘驾校</td>

<td>2016-04-15

14:40:20</td>

<td

class="tablestate">未处理</td>

<td><a

class="change

button

border-blue

button-little

update"

href="#">修改申请状态</a></td>

</tr>

</table>

扩展资料：

遍历同胞：

siblings（）：被选中时找到自己的兄弟姐妹，写法有siblings（所有的兄弟姐妹）和siblings（“同级的兄弟姐妹”）。

next（）：被选中时找到自己的下级，写法有

nextAll（找到所有的下级）和next（“找到下一个元素”）和nextuntil（"被选中的元素的范围内的元素"）。

prev(),

prevAll()

以及

prevUntil()

方法的工作方式与上面的方法类似，只不过方向相反：它们返回的是前面的同胞元素（在

DOM

树中沿着同胞元素向后遍历，而不是向前）。

first（）：返回被选中的第一元素

，写法

$("div

p")first()css("样式")

。

last（）：被选中的最后一个元素，写法

$("div

p")last()css(”样式“)

。

eq（）：返回被选中元素中有索引的元素，索引号，是从0开始不是从1开始比如treq(0)id

==dataeq[i-1]id

或者

tr[0]id

=

data[i-1]id。

filter（）：删除真正意义上的过滤，写法

$("div

")filter("span")hide()

。

not（）：就是跟filter（）相反的用法。

这个应该很简单啊。

var tds = $("#btSave tr td");

for(var i=0;i<tdslength;i++){

alert($(tds[i])text());

}

这样就可以得到所有行中列的值了。不行再找我！

获取值：

文本框，文本区域：$("#txt")attr("value")；

多选框checkbox：$("#checkbox_id")attr("value")；

单选组radio： $("input[@type=radio][@checked]")val();

下拉框select： $('#sel')val();

控制表单元素：

文本框，文本区域：$("#txt")attr("value",'');//清空内容

$("#txt")attr("value",'11');//填充内容

多选框checkbox： $("#chk1")attr("checked",'');//不打勾

$("#chk2")attr("checked",true);//打勾

if($("#chk1")attr('checked')==undefined) //判断是否已经打勾

单选组radio： $("input[@type=radio]")attr("checked",'2');//设置value=2的项目为当前选中项

下拉框select： $("#sel")attr("value",'-sel3');//设置value=-sel3的项目为当前选中项

$("<option value='1'>1111</option><option value='2'>2222</option>")appendTo("#sel")//添加下拉框的option

$("#sel")empty()；//清空下拉框

1、在html中定义一个表格table，并且给其这只一个id

2、定义一个js函数，在函数中利用jquery的链式语法获取table下的所有td

3、结果得到一个包含table下的所有td的数组

示例：

html代码：

<table id="mytable">

    <tr><td>第一行</td></tr>

    <tr><td>第二行</td></tr>

    <tr><td>第三行</td></tr>

</table>

js代码：

function getAllTd(){

    var tdArr = $('#mytable tr td');

    alert(tdArrlength);

}

jQuery 遍历的 eq() 方法将匹配元素集缩减值指定 index 上的一个，index表示元素的位置（最小为 0）。所以获取Table第 i 行第 j 列的内容可用如下代码

$("table")find("tr")eq(i-1)find("td")eq(j-1)text(); // 注意-1是因为index从0开始计数

实例演示

创建Html元素

<div class="box">

<span>填写行列数，点击按钮后获取对应位置的数值：</span><br>

<div class="content">

<table>

<tr><td>1</td><td>2</td><td>3</td></tr>

<tr><td>4</td><td>5</td><td>6</td></tr>

<tr><td>7</td><td>8</td><td>9</td></tr>

</table>

</div>

第<input type="text" name="row">行，第<input type="text" name="col">列<input type="button" class="btn" value="确定">

</div>

添加css样式

divbox{width:300px;height:250px;padding:10px 20px;border:4px dashed #ccc;}

divbox>span{color:#999;font-style:italic;}

divcontent{width:250px;height:100px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}

input[type='text']{width:35px;height:30px;border:1px solid #99ccff;}

input[type='button']{width:100px;height:30px;margin:10px;border:2px solid #ebbcbe;}

selected{background:#99ccff;}

table{border-collapse:collapse;}

td{padding:5px 10px;border:1px solid green;}

编写jquery代码

$(function(){

$("input:button")click(function() {

row = $("input[name='row']")val() - 1;

col = $("input[name='col']")val() - 1;

val = $("table")find("tr")eq(row)find("td")eq(col)text();

alert(val);

});

})

观察显示效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 40 Transitional//EN">

<html>

<head>

<meta >

以上就是关于jQuery *** 作table表格全部的内容，包括:jQuery *** 作table表格、jQuery怎么遍历表格，获取每一列的值、一个id为btSave的表格5行4列，用jQuery获取里面所有行中列的值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！