唉，最近有点忙，没来及更新博客和主题，大家见谅~~(●'?'●)如果本站的内容帮助到了您，请帮忙点击页面上的广告，万分感谢！
> JavaScript实现table排序前段时间一道笔试题，假设有一个记录成绩单的table,是让我们说说如何实现点击一个位置，然后对table按照其中成绩按顺序排列，再点击一次就可以按倒序排列。当时刚接触DOM不懂，现在刚刚接触了一点，就自己试着实现一下，心里也是知道必然会有很多问题，而且方法可能会很蠢。我的方法先获取table对象，再使用rows数组获取table[0]的每一行信息建立数组score,获取每一行的td的内容，本例其中td有三个，分别记录了when,where和score根据td中的score对数组进行排序建立一个二维数组text存储score中每一个td的innerHTML用数组text来修改table中的内容，根据标记ifg判断是正序还是倒序注意：第四步本来是没有的，最初的想法是将排好序的score直接赋值给table，用来修改其内容，然后，果然就踩坑了；因为开始我按照以前的经验，这样是没有问题的，但是，每次我的排序都会有问题，调试发现，一旦修改了table中的某一行的内容，那么score数组中的某些数据也会发生改变!也就是说，score数组 是和table有关联的，修改table会影响到score,同时修改score也会改变table,果然是很蠢的方法，但是现阶段我所学只能让我这样做，不得已添加了一个数组来存储score中各个元素的innerHTML，也就是实际用来更新table的数据，这个是不会随着table改变而改变的。HTML:&!DOCTYPE html&
lang="en"&
http-equiv="content-type" content="text/ charset=utf-8" /&
rel="stylesheet" type="text/css" media="screen" href="styles/format.css" /&
type="text/javascript" src="scripts/addLoadEvent.js"&&
type="text/javascript" src="scripts/clickScore.js"&&
&Itinerary&
id="scores"&Scores&
&June 9th&
&Portland,
title="Oregon"&OR&
&June 10th&
&Nanchang ,
title="Jiangxi"&NC&
&June 12th&
&Sacramento,
title="California"&CA&
&June 30th&
title="Washington"&WA&
&June 30th&
title="Beijing"&BJ&
&June 12th&
title="Jiangshu"&NJ&
&June 10th&
&Shanghai,
title="Huadong"&SH&
&clickScore函数function clickScore() {
if (!document.getElementById("scores")) return false;
var scores = document.getElementById("scores");
scores.onmouseover = function() {
this.style.backgroundColor = "#2aa8c6";
this.style.cursor = "pointer";
scores.onmouseout = function() {
this.style.backgroundColor = "#99cccc";
var ifg = true;
scores.onmouseup = function() {
var tables = document.getElementsByTagName("table");
var rows = tables[0].getElementsByTagName("tr");
var score = [];
for (var i = 1; i & rows. i++) {
score[i] = rows[i].getElementsByTagName("td");
for (i = 2; i & score. i++) {
var temp = score[i][2].innerHTML;
var temps = score[i];
for (var j = i - 1; j &= 1; j--) {
var now = score[j][2].innerHTML;
if (temp & now) {
score[j + 1] = score[j];
score[j + 1] =
var text = [];
for (i = 1; i & rows. i++) {
text[i] = [];
for (i = 1; i & rows. i++) {
for (j = 0; j & score[i]. j++) {
text[i][j] = score[i][j].innerHTML;
if (ifg) {
for (i = 1; i & rows. i++) {
for (j = 0; j & score[i]. j++) {
rows[i].cells[j].innerHTML = text[i][j];
for (i = 1; i & rows. i++) {
for (j = 0; j & score[i]. j++) {
rows[i].cells[j].innerHTML = text[rows.length - i][j];
addLoadEvent(clickScore);附上一个很好的方法注意sort()的功能appendChild有一个属性:如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置.
如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置.这个属性存在所以可以使用oTbody.appenChild更新table
window.onload = function() {
var oTable = document.getElementById('tableTest');
var oTbody = oTable.tBodies[0];
var oBtn = document.getElementById('sort');
var arr = [];
var isAsc = true;
oBtn.onclick = function() {
for (var i = 0; i & oTbody.rows. i++) {
arr[i] = oTbody.rows[i];
arr.sort(function(td1, td2) {
if (isAsc) {
return parseInt(td1.cells[0].innerHTML) - parseInt(td2.cells[0].innerHTML);
return parseInt(td2.cells[0].innerHTML) - parseInt(td1.cells[0].innerHTML);
for (var j = 0; j & arr. j++) {
oTbody.appendChild(arr[j]);
isAsc = !isA
&/script&本文由【】发表在 本文固定链接： 欢迎关注本站官方公众号，每日都有干货分享！
赏分享 (0)jQuery怎样选择表格中每一行的第一列?_百度知道
jQuery怎样选择表格中每一行的第一列?
我有更好的答案
选择表格中每一行的第一列可以使用jquery的遍历实现$(&table&tr&).each(function()&{&&&&//&遍历每一行&&&&$(this).children('td:eq(0)');&&//&td:eq(0)选择器表示第一个单元格});下面给出实例演示：点击按钮后表格的第一列将被加上背景色创建Html代码&div&class=&box&& &span&点击按钮后，第一列将被加上背景色：&/span&&br& &div&class=&content&&
&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=&button&&class=&btn&&value=&选中第一列&&&/div&简单添加一点css样式div.box{width:300height:250padding:10px&20border:4px&dashed&#}div.box&span{color:#999;font-style:}div.content{width:250height:100margin:10px&0;padding:5px&20border:2px&solid&#ff6666;}input[type='button']{width:200height:35margin:10border:2px&solid&#}.selected{background:#99}table{border-collapse:}td{padding:5px&10border:1px&solid&}编写jquery代码$(function(){ $(&input:button&).click(function()&{
$(&table&tr&).each(function()&{
$(this).children('td:eq(0)').addClass('selected');
}); });})观察显示效果初始状态点击按钮选择第一列后
采纳率：91%
来自团队：
$(&#table1 tr:eq(N) td:nth-child(N)&).html();获取id为table1表格第N+1个tr第N个td的值。
本回答被网友采纳
$(&table tr:first td:first&)
为您推荐：
其他类似问题
jquery的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。要求：点击表头排序时，"分组"及"分组明细"的数据层次关系不变
从网上找了一段常规的table排序，改了改，以满足&分组支持&，贴在这里备份
1 &!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&style type="text/css"&
.tbl-list, .tbl-list td, .tbl-list th {
border: solid 1px #000;
border-collapse: collapse;
padding: 10px;
margin: 15px;
&script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"&&/script&
&title&table sort&/title&
&script type="text/javascript"&
//排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型
function sortAble(th, tableId, iCol, dataType) {
var ascChar = "▲";
var descChar = "▼";
var table = document.getElementById(tableId);
//排序标题加背景色
for (var t = 0; t & table.tHead.rows[0].cells. t++) {
var th = $(table.tHead.rows[0].cells[t]);
var thText = th.html().replace(ascChar, "").replace(descChar, "");
if (t == iCol) {
th.css("background-color", "#ccc");
th.css("background-color", "#fff");
th.html(thText);
var tbody = table.tBodies[0];
var colRows = tbody.
var aTrs = new A
//将得到的行放入数组，备用
for (var i = 0; i & colRows. i++) {
//注：如果要求&分组明细不参与排序&，把下面的注释去掉即可
//if ($(colRows[i]).attr("group") != undefined) {
aTrs.push(colRows[i]);
//判断上一次排列的列和现在需要排列的是否同一个。
var thCol = $(table.tHead.rows[0].cells[iCol]);
if (table.sortCol == iCol) {
aTrs.reverse();
//如果不是同一列，使用数组的sort方法，传进排序函数
aTrs.sort(compareEle(iCol, dataType));
var oFragment = document.createDocumentFragment();
for (var i = 0; i & aTrs. i++) {
oFragment.appendChild(aTrs[i]);
tbody.appendChild(oFragment);
//记录最后一次排序的列索引
table.sortCol = iC
//给排序标题加&升序、降序& 小图标显示
var th = $(table.tHead.rows[0].cells[iCol]);
if (th.html().indexOf(ascChar) == -1 && th.html().indexOf(descChar) == -1) {
th.html(th.html() + ascChar);
else if (th.html().indexOf(ascChar) != -1) {
th.html(th.html().replace(ascChar, descChar));
else if (th.html().indexOf(descChar) != -1) {
th.html(th.html().replace(descChar, ascChar));
//重新整理分组
var subRows = $("#" + tableId + " tr[parent]");
for (var t = subRows.length - 1; t &= 0 ; t--) {
var parent = $("#" + tableId + " tr[group='" + $(subRows[t]).attr("parent") + "']");
parent.after($(subRows[t]));
//将列的类型转化成相应的可以排列的数据类型
function convert(sValue, dataType) {
switch (dataType) {
case "int":
return parseInt(sValue, 10);
case "float":
return parseFloat(sValue);
case "date":
return new Date(Date.parse(sValue));
case "string":
return sValue.toString();
//排序函数，iCol表示列索引，dataType表示该列的数据类型
function compareEle(iCol, dataType) {
return function (oTR1, oTR2) {
var vValue1 = convert(removeHtmlTag($(oTR1.cells[iCol]).html()), dataType);
var vValue2 = convert(removeHtmlTag($(oTR2.cells[iCol]).html()), dataType);
if (vValue1 & vValue2) {
return -1;
//去掉html标签
function removeHtmlTag(html) {
return html.replace(/&[^&]+&/g, "");
//jQuery加载完以后，分组行高亮背景，分组明细隐藏
$(document).ready(function () {
$("tr[group]").css("background-color", "#ff9");
$("tr[parent]").hide();
//点击分组行时，切换分组明细的显示/隐藏
function showSub(a) {
var groupValue = $(a).parent().parent().attr("group");
var subDetails = $("tr[parent='" + groupValue + "']");
subDetails.toggle();
142 &/head&
144 &body&
&table id="tableId" class="tbl-list" cellpadding="0" cellspacing="0"&
&th&序号&/th&
&th onclick="sortAble(this,'tableId', 1,'string')"
style="cursor:pointer"&姓名&/th&
&th onclick="sortAble(this,'tableId', 2, 'date')"
style="cursor:pointer"&生日&/th&
&th onclick="sortAble(this,'tableId', 3, 'int')"
style="cursor:pointer"&年龄&/th&
&th onclick="sortAble(this,'tableId', 4, 'float')"
style="cursor:pointer"&工资&/th&
&tr group="A"&
&td&1&/td&
&td&&a href="#" onclick="showSub(this)"&Group-A&/a&&/td&
&td&01/12/1982&/td&
&td&25&/td&
&td&1000.50&/td&
&tr parent="A"&
&td&2&/td&
&td&A-01&/td&
&td&01/09/1982&/td&
&td&25&/td&
&td&2000.10&/td&
&tr parent="A"&
&td&3&/td&
&td&A-02&/td&
&td&01/10/1982&/td&
&td&26&/td&
&td&2000.20&/td&
&tr group="B"&
&td&4&/td&
&td&&a href="#" onclick="showSub(this)"&Group-B&/a&&/td&
&td&10/14/1999&/td&
&td&18&/td&
&td&1000.20&/td&
&tr parent="B"&
&td&5&/td&
&td&B-01&/td&
&td&02/12/1982&/td&
&td&19&/td&
&td&3000.20&/td&
&tr parent="B"&
&td&6&/td&
&td&B-02&/td&
&td&03/12/1982&/td&
&td&20&/td&
&td&3000.30&/td&
&tr group="C"&
&td&7&/td&
&td&&a href="#" onclick="showSub(this)"&Group-C&/a&&/td&
&td&10/14/1980&/td&
&td&8&/td&
&td&1000.30&/td&
&tr parent="C"&
&td&8&/td&
&td&C-01&/td&
&td&03/12/1981&/td&
&td&17&/td&
&td&3100.30&/td&
219 &/body&
220 &/html&
阅读(...) 评论()JS table新增一行的时候 如何在新增的这一行把样式也加进去 例如变成&tr class=&trd0&& - ITeye问答
JS：
var tab = document.getElementById("tab");
var newTr = tab.insertRow(-1);&&
newTr.id = "tr_" + trId;
var newTdContent = newTr.insertCell(1); //第一列
var newTdCaoZuo& = newTr.insertCell(2); //第二列&&&&&&&&
//设置二列的数据&
newTdContent.innerHTML& = "&textarea rows='5' cols='40'name='getContent' id='getContent'&" + content.value + "&/textarea&";
newTdCaoZuo.innerHTML& = "&input type='button' onclick='moveTr("+trId+")' value='移除'&";
现在是，新增的一行在table里面跟被新增行的table里面的行表示出来的不同，因为被新增的table里面样式是有限定的
table
&tr class="trd0"&
&td&..&/td&
&tr&
所以现在希望能在新增的时候能不能把 newTr 的样式 class="trd0" 增加进去。
在线求！
采纳的答案
newTr.setAttribute("class", "trd0");
既然创建了新的tr对象.那么,就直接修改它的class属性为指定值就可以了.
可以直接:
newTr.className = "trd0";
直接newTr.className="'trd0";就行
建议用jquery的append 实现
这个比较简单 里面可以直接写html代码&
&body&
&table id="tab" border="2"&
&tr id="tr0"&
&td id="td0"&123&/td&
&td&123123&/td&
&/table&
&/body&
&script type="text/javascript"&
var tab = document.getElementById("tab");
var newTr = tab.insertRow(-1);&
newTr.id = "tr_" ;
var newTdContent = newTr.insertCell(); //第一列
var newTdCaoZuo& = newTr.insertCell(0); //第二列&&&&&&&
//设置二列的数据
newTdContent.innerHTML& = "&textarea rows='5' cols='40'name='getContent' id='getContent'&" + "content.value" + "&/textarea&";
newTdCaoZuo.innerHTML& = "&input type='button' onclick='moveTr' value='移除'&";
//document.getElementById("tr_2").cells[0].className = "td11";
//以下2行都可以实现给tr增加新样式
//document.getElementById("tr_").className="tr11";
document.getElementById("tr_").setAttribute("className","tr11");
&/script&
&style type="text/css"&
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2
text-transform:
text-align:
padding: 6px 6px 6px 12
background: #CAE8EA& no-
newTr.className = 'trd0;
已解决问题
未解决问题tablesorter.js表格排序使用方法(支持中文排序)
转载 & & 作者：renling
这篇文章主要为大家详细介绍了tablesorter.js表格排序使用方法，支持中文排序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近，因为项目需要，对表格排序做了一下摸索，整理如下：
1. 首先，可从官网下载tablesorter.js，但并不支持中文的排序，对其源码进行修改：
部分源码：
function sortText(a, b) {
return ((a & b) ? -1 : ((a & b) ? 1 : 0));
function sortTextDesc(a, b) {
return ((b & a) ? -1 : ((b & a) ? 1 : 0));
function sortText(a,b) {
return a.localeCompare(b);
function sortTextDesc(a,b) {
return b.localeCompare(a);
修改完之后的js可支持中文的排序。
2.建立一个表格，格式如下：
&tr&&th&&/th&&/tr&
&tr&&td&&/td&&/tr&
&title&jquery.tablesorter&/title&
&script language="JavaScript" type="text/javascript" src="jquery-1.3.2.min.js"&&/script&
&script type="text/javascript" src="/manage/plugin/tablesorter/tablesorter.js"&&/script&
&link rel="stylesheet" href="/manage/plugin/tablesorter/blue/style.css type=" rel="external nofollow" text/css" /&
&script type="text/javascript"&
$("#mytable").tablesorter();
&table id="mytable" border="1" class="tablesorter"&
&th class="header"&First Name&/th&
&th class="header"&Last Name&/th&
&th class="header"&Age&/th&
&th class="header"&Total&/th&
&th class="header"&Discount&/th&
&th class="header"&Date&/th&
&th class="header"&State&/th&
&td&Peter&/td&
&td&Parker&/td&
&td&28&/td&
&td&$9.99&/td&
&td&20%&/td&
&td&Jul 6,
&td&已审核&/td&
&td&John&/td&
&td&Hood&/td&
&td&33&/td&
&td&$19.99&/td&
&td&25%&/td&
&td&Dec 10,
&td&已审核&/td&
&td&Clark&/td&
&td&Kent&/td&
&td&18&/td&
&td&$15.89&/td&
&td&44%&/td&
&td&Jan 12,
&td&已作废&/td&
&td&Bruce&/td&
&td&Almighty&/td&
&td&45&/td&
&td&$153.19&/td&
&td&44%&/td&
&td&Jan 18,
&td&待审核&/td&
&td&Bruce&/td&
&td&Evans&/td&
&td&22&/td&
&td&$13.19&/td&
&td&11%&/td&
&td&Jan 18,
&td&已生效&/td&
页面显示如图所示：
点击表头，就能够排序。
1).若是第五列、第六列不需要排序，代码如下：
$("#mytable").tablesorter({headers:{4:{sorter:false},5:{sorter:false}}});
（顺便需要去掉对应列的样式）
2).若是第五列需要自定义排序方式，第六列不排序，代码如下：
$.tablesorter.addParser({
id: "grade", //指定一个唯一的ID
is: function(s){
format: function(s){
return s.toLowerCase().replace(/已作废/,1).replace(/待审核/,2).replace(/已审核/,3).replace(/已生效/,4); //将中文换成数字
type: "numeric" //按数值排序
$("#mytable").tablesorter({headers:{4:{sorter:"grade"},5:{sorter:false}}});
需要更多例子，可以到官网研究。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具