jQuery操作表格

最新推荐文章于 2023-11-08 14:03:06 发布

happymagic

最新推荐文章于 2023-11-08 14:03:06 发布

阅读量393

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<html>

<head>

<scripttype="text/javascript"src="/jquery/jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

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

$("li").each(function(){

alert($(this).text())

});

</script>

</head>

<body>

<button>输出每个列表项的值</button>

<ul>

<li>Coffee</li>

</ul>

</body>

</html>

http://m.blog.csdn.net/anhuidelinger/article/details/17024491

<html>

<head>

<scripttype="text/javascript" src="/jquery/jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$("td").each(function(index){

if (index%5 == 4){

$(this).css("background-color","#B2E0FF");

}

});

$("tr").each(function(index) {

$(this).find("td").eq(1).css("background-color","#B2E0FF");

});

</script>

</head>

<body>

<html>

<body>

<h1>Welcome toMy Web Page</h1>

<table>

jQuery 选择表格(table)里的行和列

jQuery对表格(table)的处理提供了相当强大的功能，比如说对表格特定行(row)或列(column)进行排序、样式改变等等。如果你的英文够好，你可以读读这篇文章：jQuery table manipulation。本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变，希望它可以对jQuery表格处理的深层学习提供一些帮助。

比如我们有这样一个表格：

第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列

对行进行操作比较简单：

1. 如果我们要选择第一行，我们可以用 $('tr:eq(0)')

2. 如果我们要选择第N行，我们可以用 $('tr:eq(n-1)')

3. 如果我们要选择奇数行，我们可以用 $('tr:odd')

4. 如果我们要选择偶数行，我们可以用 $('tr:even')

对列的操作相对麻烦一点，但是如果我们知道了其中原理也不难。表格里没有列的元素，第一列实际上是每一行的第一个区域(td)的组合。所以我们可以用循环来实现对行的选择。

1. 如果我们要选择第一列并且对其样式进行改变，我们可以用下面的语句来实现

2. $(document).ready(function(){

3. $('table').find('td').each(function(i){//搜寻表格里的每一个区间

4. if(i%4 == 0){ //‘4’代表表格总共有4列，如果区间编号被4整除，那么它就属于第一列

5. $(this).addClass('col_1');}//给区间加上特定样式

6. });

});

1. 如果我们要选择其它列，只需把上述代码里的i%4==0,进行相应的改变。记住：4代表表格的列数，如果你有10列就用10代替；选择第一列，余数等于0，选择第二列，余数应该等于1，如此类推。

演示：点击改变以上表格的第一列

更新(2009/10/20)：感謝JOE的補充！我的方法要人為的更改表的列數，而JOE的方法不但代碼簡單而且不受列數的限制。

$(document).ready(function(){

$('#button1').click(function(){

$('#demo1 tr').each(function() {

$(this).find("td:first").css({color:"red",fontWeight:"bold"});

});

演示：点击改变以上表格的第一列

另外還可以改變選擇器從而改變偶數列或者奇數列。注意：第一列從0開始，所以td:odd代表偶數列。

$(document).ready(function(){

$('#10200902').click(function(){

$('#demo1 tr').each(function() {

//alert("me");

$(this).find("td:odd").css({color:"green",fontWeight:"bold"});

});

</script>

//注意：第一列從0開始，所以td:odd代表偶數列

<button id="10200902">点击改变以上表格的偶數列</button>

用一句JQuery代码实现表格的简单筛选

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryTableFilter.aspx.cs" Inherits="JqueryTableFilter" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Script/jquery-1.3.2-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#Text1").keyup(function() { var filterText = $(this).val(); $("#<%=GridView1.ClientID %> tr").not(":first").hide().filter(":contains('" + filterText + "')").show();; }).keyup(); }); </script> </head> <body> <form id="form1" runat="server"> <div style="width:60%;"> <input id="Text1" type="text" /> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="OrderID" DataSourceID="SqlDataSource1" HorizontalAlign="Left" PageSize="50" > <Columns> <asp:BoundField DataField="OrderID" HeaderText="OrderID" ReadOnly="True" SortExpression="OrderID" InsertVisible="False" /> <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID" /> <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" SortExpression="EmployeeID" /> <asp:BoundField DataField="OrderDate" HeaderText="OrderDate" SortExpression="OrderDate" /> <asp:BoundField DataField="RequiredDate" HeaderText="RequiredDate" SortExpression="RequiredDate" /> <asp:BoundField DataField="ShippedDate" HeaderText="ShippedDate" SortExpression="ShippedDate" /> <asp:BoundField DataField="ShipVia" HeaderText="ShipVia" SortExpression="ShipVia" /> <asp:BoundField DataField="Freight" HeaderText="Freight" SortExpression="Freight" /> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT top 50 * FROM [Orders]"></asp:SqlDataSource> </div> </form> </body> </html>

效果：

这里是经过筛选的截图；

JQuery代码就：

代码

$(function() { $("#Text1").keyup(function() { var filterText = $(this).val(); $("#<%=GridView1.ClientID %> tr").not(":first").hide().filter(":contains('" + filterText + "')").show();; }).keyup(); });

里面最重要的就是JQuery的选择器：

1：$("#<%=GridView1.ClientID%> tr")选择表格的所有行；

2：not(":first")：除去第一行表头行；

3：filter(":contains('"+ filterText + "')"):从上面所选择的行里面筛选出行文本中包含filterText 的行显示出来；

4：最后加一句keyup()是为了在提交后重新触发keyup事件。（但是在这里没有作用因为我用的客户端控件没有ViewState

若是服务器端控件就会看见他的作用）。

JQuery的选择器的强大之处，让我们能救这么简单的实现客户端的简单筛选。最后加一句关于表格筛选有JQuery插件提供

给我们选择，但是这种简单的功能，我不会去选择加入一个JavaScript文件库，呵呵。

http://www.cnblogs.com/whitewolf/archive/2010/07/26/1784971.html

Example:

Give TDs less than the one with the 4thindex (TD#4) a yellow background and TDs less than the one with -2nd index ared text color.

<!doctype html>

<head>

</head>

<body>

</table>

$( "td:lt(4)" ).css( "backgroundColor", "yellow" );

$( "td:lt(-2)" ).css( "color", "red" );

</script>

</body>

</html>

Demo:

asp.net中GridView和jquery操作(转)

原文：http://www.cnblogs.com/automation/archive/2012/12/28/2837794.html

一：奇偶行变色

jQuery :even 选择器

选择每个相隔的（偶数） <tr> 元素：$("tr:even")

jQuery :odd 选择器

选择每个相隔的（奇数) <tr> 元素：$("tr:odd")

让GridView隔行变色

$(document).ready(function() {

$("#<%=gdRows.ClientID%>tr").filter(":odd").css("background-color", "grey");

});

我们当然也可以让奇数行变色

$("#<%=GridView1.ClientID%>tr").filter(":even").css("background-color", "#00ff00");

使用hover()让行变色

$(document).ready(function() {

$("#<%=gdRows.ClientID%> tr").hover(function(){

$(this).css("background-color", "Lightgrey");

}, function() {

$(this).css("background-color", "#ffffff");

});

这种是针对没有表头th的，有表头的使用has选择器如下：

$(document).ready(function() {

$("#<%=gdRows.ClientID%> tr:has(td)").hover(function(){

$(this).css("background-color", "Lightgrey");

}, function() {

$(this).css("background-color", "#ffffff");

});

使用JQUERY在GridView中删除一行

$(document).ready(function () {

$("#<%=GridView1.ClientID%>tr:has(td)").click(function () {

$(this).remove();

});

如果我们想要一个动画效果，让删除的行慢慢消失

$(document).ready(function () {

$("#<%=GridView1.ClientID%>tr:has(td)").click(function () {

$(this).fadeOut(1000, function() {

$(this).remove();

});

让鼠标hover的鼠标变成手型

$(document).ready(function () {

$("#<%=GridView1.ClientID%> tr:has(td)").hover(function (){

$(this).css("cursor", "pointer");

});

拖拽GridView中的行

$(document).ready(function () {

$("#<%=GridView1.ClientID%>").tableDnD({

onDragClass: "myDragClass"

});

</script>

.myDragClass

{

font-family: Arial;

font-size : 18pt;

color : Red

background-color:yellow

}

遍历GridView中行

$(document).ready(function() {

$("#<%=gdRows.ClientID%> tr:has(td)").each(function() {

alert($(this).html());

});

如果我们想包括表头遍历

$(document).ready(function() {

$("#<%=gdRows.ClientID%> tr").each(function() {

alert($(this).html());

});

如果我们仅仅想得到表头

$(document).ready(function() {

$("#<%=gdRows.ClientID%> th").each(function() {

alert($(this).html());

});

遍历GridView中单元格中数据

$(document).ready(function () {

$("#<%=GridView1.ClientID%>tr:has(td)").each(function () {

var cell = $(this).find("td:eq(1)");

alert(cell.html());

});

将会得到表格中第二行的数据，依次弹出张三，李四，王五。。

单击得到GridView单元格的数据

$(document).ready(function () {

$("#<%=GridView1.ClientID%>tr:has(td)").hover(function (e) {

$(this).css("cursor", "pointer");

});

$("#<%=GridView1.ClientID%>tr:has(td)").click(function (e) {

var selTD =$(e.target).closest("td");

$("#<%=GridView1.ClientID%>td").removeClass("selected");

selTD.addClass("selected");

$("#<%=lblSelected.ClientID%>").html('Selected CellValue is: <b> ' + selTD.text() + '</b>');

});

})

让选中的行变色

$(document).ready(function()

{

$('#<%=gdRows.ClientID %>').find('input:checkbox[id$="chkDelete"]').click(function(){

var isChecked = $(this).prop("checked");

var $selectedRow = $(this).parent("td").parent("tr");

var selectedIndex =$selectedRow[0].rowIndex;

var sColor = '';

if(selectedIndex%2 == 0)

sColor = 'PaleGoldenrod';

else

sColor = 'LightGoldenrodYellow';

if(isChecked)

$selectedRow.css({

"background-color" : "DarkSlateBlue",

"color" : "GhostWhite"

});

else

$selectedRow.css({

"background-color" : sColor,

"color" : "black"

});

.prop()获取匹配的元素的属性值。

happymagic

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery操作表格

$(document).ready(function(){ $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); });});输出每个列表项的值CoffeeMilkSodahttp://m.
复制链接

扫一扫