请问用jquery怎么判断表格的奇偶行,有插件还是要明白原理啊 JQuery 轻量级的表格控件,需要实现基本的分页,表头固定...

\u5982\u4f55\u7528jquery\u63a7\u5236\u8868\u683c\u5947\u5076\u884c\u53ca\u6d3b\u52a8\u884c\u989c\u8272

$("tr:even").css("background-color","red"); \u5076\u6570\u884c \u7ea2\u8272
$("tr:odd").css("background-color","gray"); \u5947\u6570\u884c \u7070\u8272
\u6d3b\u52a8\u884c\u7528css\u63a7\u5236\u5427
tr\uff1ahover {background-color\uff1askyblue} \u6d3b\u52a8\u884c \u5929\u84dd\u8272

jQuery\u5728\u6700\u65b0\u76841.9\u7248\u672c\u4e2d\u5c06\u63a8\u51fa\u4e30\u5bcc\u7684\u9875\u9762\u8868\u683c\u63a7\u4ef6\uff0c\u8bf7\u5750\u7b49\u3002

:odd 奇数 :even 偶数

<table border="1">
<tr><td>第一行</td></tr>
<tr><td>第二行</td></tr>
<tr><td>第三行</td></tr>
<tr><td>第四行</td></tr>
</table>

$("tr:odd").css({background: "#f00"}); // 1, 3 行
$("tr:even").css({background: "#00f"}); // 2, 4 行

even: function(elem, i){
return i % 2 === 0;
},
odd: function(elem, i){
return i % 2 === 1;
},
POS: function(elem, match, i, array){
var name = match[2], filter = Expr.setFilters[ name ];

if ( filter ) {
return filter( elem, i, match, array );
}
}
看看这三个函数你就明白了...POS:name='even'是,filter为even函数,elem为当前元素,匹配的selector,i所在位置,反之亦然~!

判断表格的奇偶行是为了隔行换色吗?因为jquery插件很多,不知道你说的是哪一个。基本上隔行换色的原理就是取道所有的表格行数存入数组,以数组的0,2,4,6...位为奇数,1,3,5..偶数,遍历addClass(),如果奇数行变色,就在数组的0,2,4,6...位的表格的<tr>标签加上css,通过addClass()。

$("tr:even");查找表格的1、3、5...行(即索引值0、2、4...)
$("tr:odd");查找表格的2、4、6行(即索引值1、3、5...)
原理通过获取表格的索引值、判断索引的奇偶性、应该是这样子的哦.....(个人理解、我看了jQuery源码、没怎么看懂)

只需要有插件就可以

  • 璇烽棶鐢╦query鎬庝箞鍒ゆ柇琛ㄦ牸鐨勫鍋惰,鏈夋彃浠惰繕鏄鏄庣櫧鍘熺悊鍟
    绛旓細:odd 濂囨暟 :even 鍋舵暟 绗竴琛 绗簩琛 绗笁琛 绗洓琛 ("tr:odd").css({background: "#f00"}); // 1, 3 琛 ("tr:even").css({background: "#00f"}); // 2, 4 琛
  • jquery濡備綍鍒ゆ柇澶氳鐩稿悓name鐨勫璞$殑琛ㄦ牸涓槸鍚︽湁閲嶅琛?
    绛旓細(document).ready(function () { ("input[type='text']").focusout(function () { var orginValue = $(this);("input[type='text']").not(orginValue).each(function () { if (orginValue.val() == $(this).val())alert("鏈夐噸澶嶅");});});});
  • jquery鍒ゆ柇琛ㄦ牸涓槸鍚︽湁琛岃閫変腑
    绛旓細js:$(function(){var myRows = $('table tr').click(function(){alert('Row #' +myRows.index(this) + ' value=' + $(this).children('td').text());});});html: 0-1 0-2 1-1 1-2 2-1 2-2 3-1...
  • jquery濡備綍鍒ゆ柇涓涓琛ㄦ牸涓竴浜泃d鏄惁涓虹孩鑹插瓧浣 濡傛灉瀛樺湪绾㈣壊灏变細鎬庢牱...
    绛旓細浣琛ㄦ牸閲岀殑鏁版嵁鍝噷鏉ョ殑锛熻繖鏍风殑闇姹傚簲璇ュ湪琛ㄦ牸鏁版嵁鐨勫弬鏁伴噷鍒ゆ柇鍟 浣犻潪瑕佹牴鎹鑹插垽鏂氨绫诲瀷杩欐牱锛<TABLE id='table1'> <TR style="color:red"> <TD>123</TD> <TD>123</TD> </TR> <TR> <TD>123</TD> <TD>123</TD> </TR> 123 </TABLE> <SCRIPT LANGUAGE="JavaScript"> <!-- ...
  • jquery濡備綍瀹炵幇涓涓琛ㄦ牸鐨勭瓫閫,涔熷氨鏄寜鏉′欢鏌ユ壘绛涢
    绛旓細1銆侀鍏堟柊寤篽tml鏂囨。锛屽悜涓嬫煡鎵惧厔寮熸爣绛撅細.next()銆2銆jquery鏀寔閾惧紡鎿嶄綔锛屽悜涓嬫煡鎵惧厔寮熸爣绛剧殑鍏勫紵鏍囩锛.next().next()銆3銆佹帴鐫鍚戜笅鏌ユ壘鎵鏈夊厔寮熸爣绛撅細nextAll()锛屽悜涓嬫煡鎵句竴鐩存壘鍒版煇涓潯浠朵负姝細nextUntil('鏉′欢')銆4銆佸悜涓婃煡鎵惧厔寮熸爣绛撅細.prev()锛屽悜涓婃煡鎵炬墍鏈夊厔寮熸爣绛撅細prevAll()锛屽悜涓婃煡鎵句竴鐩存壘鍒...
  • ...濡傛灉涓涓猼r鐨勭涓涓猼d涓虹┖,鍒欓殣钘忔暣涓猼r,jQuery鑳藉疄鐜颁箞
    绛旓細 (document).ready(function(){ ("#h").click(function(){ ("#t tr").each(function(){ if($("td:first",this).html() == ""){ (this).hide();} });});}); hide 1 <
  • 濡備綍鐢╦Query鎿嶄綔琛ㄥ崟鍜琛ㄦ牸
    绛旓細杩欐缁欏ぇ瀹跺甫鏉濡備綍鐢╦Query鎿嶄綔琛ㄥ崟鍜琛ㄦ牸浠ュ強涓浜涘叾瀹冨簲鐢紝涓嬮潰璺熼殢灏忕紪锛屼竴璧锋潵鐪嬩竴涓嬨備竴.琛ㄥ崟搴旂敤 涓涓〃鍗曟湁涓変釜鍩烘湰缁勬垚閮ㄥ垎锛 锛1锛夎〃鍗曟爣绛撅細鍖呭惈澶勭悊琛ㄥ崟鏁版嵁鎵鐢ㄧ殑鏈嶅姟鍣ㄧ绋嬪簭URL浠ュ強鏁版嵁鎻愪氦鍒版湇鍔″櫒鐨勬柟娉曘 锛2锛夎〃鍗曞煙锛氬寘鍚枃鏈銆佸瘑鐮佹銆侀殣钘忓煙銆佸琛屾枃鏈銆佸閫夋銆佸崟閫夋銆佷笅鎷...
  • jquery 鍒ゆ柇鏄惁閫変腑鐢╥s(":checked")杩欓噷涓轰粈涔堢敤:checked,杩欎釜鍐掑彿鏄...
    绛旓細鐐癸紝渚嬪f.function()琛ㄧずf鏄痜unction锛堟垨鑰呮槸鍖呭惈function鐨勫璞℃垨鍑芥暟锛夌殑瀵硅薄锛宖璋冪敤function杩涜宸ヤ綔銆傦細锛屽啋鍙凤紝鍐掑彿鍓嶉潰鐨勫睘浜庤繖涓睘鎬х殑鍚嶅瓧锛屽悗闈㈢殑鏄繖涓睘鎬х殑鍊
  • jquery濡備綍鑾峰緱琛ㄦ牸鎵鍦ㄧ殑琛屾暟鍜屽垪鏁
    绛旓細 2銆jquery浠g爜 (function(){ ("table td").click(function() { var row = $(this).parent().index() + 1; // 琛屼綅缃 var col = $(this).index() + 1; // 鍒椾綅缃 alert("褰撳墠浣嶇疆锛氱"+row+"琛岋紝绗"+col+"鍒")});});3銆佹晥鏋滄紨绀 ...
  • jQuery鎿嶄綔琛ㄦ牸鐨勬彃浠禿atatables濡備綍搴旂敤
    绛旓細杩欐缁欏ぇ瀹跺甫鏉jQuery鎿嶄綔琛ㄦ牸鐨勬彃浠禿atatables濡備綍搴旂敤,jQuery鎿嶄綔琛ㄦ牸鐨勬彃浠禿atatables搴旂敤娉ㄦ剰浜嬮」鏈夊摢浜,涓嬮潰灏辨槸瀹炴垬妗堜緥,涓璧锋潵鐪嬩竴涓嬨備竴銆丏atatables绠浠婦ataTables鏄竴涓猨Query鐨勮〃鏍兼彃浠躲傝繖鏄竴涓珮搴︾伒娲荤殑宸ュ叿,渚濇嵁鐨勫熀纭閫愭澧炲己,杩欏皢澧炲姞鍏堣繘鐨勪簰鍔ㄦ帶鍒,鏀寔浠讳綍HTML琛ㄦ牸銆備富瑕佺壒鐐:鑷姩鍒嗛〉澶勭悊鍗虫椂琛ㄦ牸鏁版嵁杩...
  • 扩展阅读:java windowbuilder ... jquery表单怎么添加 ... xbox series x ... jquery获取表单的所有值 ... javascript jquery ... java blockingqueue ... jquery清空radio值 ... jquery怎么禁用按钮 ... jquery表格隔行变色 ...

    本站交流只代表网友个人观点,与本站立场无关
    欢迎反馈与建议,请联系电邮
    2024© 车视网