正文
jquery表格列,jquery树形表格
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jQuery怎么获取某表格中的一列td的值？
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery，编写问题基础代码。
2、在index.html中的script标签，输入jquery代码：
$('body').append($('tr').find('td:eq(0)').text());
3、浏览器运行index.html页面，此时成功取到了表格的第一页数据并打印。
相关问答
Q1: 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');
});
});
})
观察显示效果
初始状态
点击按钮选择第一列后
Q2: 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+"列")
});
Q3: 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;
Q4: 用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"); //初始化
});
Q5: jQuery怎样选择表格中每一行的第一列
选择表格中每一行的第一列可以使用jquery的遍历实现$("table tr").each(function() { // 遍历每一行 $(this).children('td:eq(0)'); // td:eq(0)选择器表示第一个单元格});下面给出实例演示：点击按钮后表格的第一列将被加上背景色创建Html代码 ...
