jquery表格列,jquery树形表格

jQuery怎么获取某表格中的一列td的值？

需要准备的材料分别有：电脑、html编辑器、浏览器。

创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于网站建设、成都网站制作、临泉网络推广、微信小程序开发、临泉网络营销、临泉企业策划、临泉品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联建站为所有大学生创业者提供临泉建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery，编写问题基础代码。

2、在index.html中的script标签，输入jquery代码：

$('body').append($('tr').find('td:eq(0)').text());

3、浏览器运行index.html页面，此时成功取到了表格的第一页数据并打印。

jQuery怎样选择表格中每一行的第一列?

选择表格中每一行的第一列可以使用jquery的遍历实现$("table tr").each(function() {    // 遍历每一行

$(this).children('td:eq(0)');  // td:eq(0)选择器表示第一个单元格

});下面给出实例演示：点击按钮后表格的第一列将被加上背景色

创建Html代码

div class="box"

span点击按钮后，第一列将被加上背景色：/spanbr

div class="content"

table

trtd1/tdtd2/tdtd3/td/tr

trtd4/tdtd5/tdtd6/td/tr

trtd7/tdtd8/tdtd9/td/tr

/table

/div

input type="button" class="btn" value="选中第一列"

/div

简单添加一点css样式

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

div.boxspan{color:#999;font-style:italic;}

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

input[type='button']{width:200px;height:35px;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() {

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

$(this).children('td:eq(0)').addClass('selected');

});

});

})

观察显示效果

初始状态

点击按钮选择第一列后

jquery怎么获取表格的行列

jQuery 提供了index()方法用于获取第一个匹配元素相对于其同胞元素的 index 位置（从0开始计数），基本语法为：$(selector).index()。因此当前 tr 的 index 可以得到行数，当前 td 的 index 可以得到列数。实例演示如下:

1、HTML结构

table id = "test"

trtd1/tdtd2/tdtd3/tdtd4/td/tr

trtd2/tdtd4/tdtd5/tdtd6/td/tr

trtd3/tdtd7/tdtd8/tdtd9/td/tr

trtd4/tdtd1/tdtd2/tdtd3/td/tr

/table

2、jquery代码

$(function(){

$("table td").click(function() {

var row = $(this).parent().index() + 1; // 行位置

var col = $(this).index() + 1; // 列位置

alert("当前位置：第"+row+"行，第"+col+"列")

});

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实现表格列排序？

$(document).ready(function()

{

//插件的形式

jQuery.fn.alterRowColors = function()

{

$('tbody tr:odd', this).removeClass('even').addClass('odd');

$('tbody tr:even', this).removeClass('odd').addClass('even');

return this;

}

//1.此时的函数是作为jQuery.fn的一个新属性定义的，不是孤立的函数，这样就把该函数注册成了一个插件，

//2.使用关键字this，在一个插件内部，this表示的是调用该插件的jQuery对象，

//3.最后在函数的末尾返回this,返回这个值可以使这个新方法能够继续连缀其他的方法。

var $sortOrder = 0; //排序类型 1表示升序，0表示降序

var $table = $('table#shop');

$table.alterRowColors();

$('th', $table).each(function( column )

{

//处理三种有可能存在的排序字段，比较方法

var findSortKey;

if( $(this).is('.sort-title') || $(this).is('.sort-author') )

{

findSortKey = function( $cell )

{

return $cell.find('.sort-title').text().toUpperCase()+ '' +$cell.text().toUpperCase();

}

}

else if( $(this).is('.sort-date') )

{

findSortKey = function( $cell )

{

return Date.parse('1' + $cell.text());

}

}

else if( $(this).is('.sort-price') )

{

findSortKey = function( $cell )

{

var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''))

return isNaN(key) ? 0 : key;

}

}

//排序

if( findSortKey )

{

$(this).addClass('clickable').hover(function()

{

$(this).addClass('hover');

var $title = $sortOrder == 0 ? '升序' : '降序';

$(this).attr('title', '按'+ $(this).html() + $title +'排列');

}, function()

{

$(this).removeClass('hover');

}).click(function()

{

$sortOrder = $sortOrder == 0 ? 1 : 0;

var rows = $table.find('tbody tr').get();

$.each( rows, function( index, row )

{

row.sortKey = findSortKey($(row).children('td').eq(column));

});

//排序方法

rows.sort(function( a, b )

{

if( $sortOrder == 1 )

{

//升序

if(a.sortKey b.sortKey) return -1;

if(a.sortKey b.sortKey) return 1;

return 0;

}

else

{

//降序

if(a.sortKey b.sortKey) return 1;

if(a.sortKey b.sortKey) return -1;

return 0;

}

});

//排序后的对象添加给$table

$.each( rows, function( index, row )

{

$table.children('tbody').append(row);

row.sortKey = null;

});

//显著标明是通过某一列排序的

$table.find('td').removeClass('sorted')

.filter(':nth-child('+ (column + 1) +')').addClass('sorted');

//重新赋予奇偶行的样式

$table.alterRowColors();

});

}

});

//分页效果

var currentPage = 0; //当前页

var pageSize = 10; //每页行数（不包括表头）

//绑定分页事件

$table.bind('repaginate', function()

{

$table.find('tbody tr').hide()

.slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();

});

var numRows = $table.find('tbody tr').length; //记录宗条数

var numPages = Math.ceil(numRows/pageSize); //总页数

var $pager = $('div class="page"/div'); //分页div

for( var page = 0; page numPages; page++ )

{

//为分页标签加上链接

$('a href="#" span'+ (page+1) +'/span/a')

.bind("click", { "newPage": page }, function(event)

{

currentPage = event.data["newPage"];

$table.trigger("repaginate");

})

.appendTo($pager);

$pager.append("  ");

}

$pager.insertAfter($table); //分页div插入table

$table.trigger("repaginate"); //初始化

});

jQuery怎样选择表格中每一行的第一列

选择表格中每一行的第一列可以使用jquery的遍历实现$("table tr").each(function() { // 遍历每一行 $(this).children('td:eq(0)'); // td:eq(0)选择器表示第一个单元格});下面给出实例演示：点击按钮后表格的第一列将被加上背景色创建Html代码 ...