高分求解！jquery为表格自动添加class
表格一开始时没有任何class的，想通过jquery添加.有以下要求:
1.为所有加上class，实现迭代计数，如果到下一个节点，重新计数。(tr为row1 th和td为col1)
2.tbody偶数行加上alt
3.若为第一或最后一项，则加上first/last
若只有一项，则first last
4.注意一个页面有可能有多个table
生成的样例如下:
<!DOCTYPE html><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // </script></head><body><table> <thead> <tr> <th class="col0 first">A</th> <th class="col1">B</th> <th class="col2">C</th> <th class="col3">D</th> <th class="col4 last">E</th> </tr> </thead> <tbody> <tr class="row0 first"> <td class="col0 first">A</td> <td class="col1">B</td> <td class="col2">C</td> <td class="col3">D</td> <td class="col4 last">E</td> </tr> <tr class="row1 alt"> <td class="col0 first">A</td> <td class="col1">B</td> <td class="col2">C</td> <td class="col3">D</td> <td class="col4 last">E</td> </tr> <tr class="row2"> <td class="col0 first">A</td> <td class="col1">B</td> <td class="col2">C</td> <td class="col3">D</td> <td class="col4 last">E</td> </tr> <tr class="row3 last alt"> <td class="col0 first">A</td> <td class="col1">B</td> <td class="col2">C</td> <td class="col3">D</td> <td class="col4 last">E</td> </tr> </tbody> <tfoot> <tr class="row0 first"> <td class="col0 first">A</td> <td class="col1">B</td> <td class="col2">C</td> <td class="col3">D</td> <td class="col4 last">E</td> </tr> </tfoot> </table> <table> <thead> <tr> <th class="col0 first">A</th> <th class="col1">B</th> <th class="col2">C</th> <th class="col3">D</th> <th class="col4 last">E</th> </tr> </thead> <tbody> <tr class="row0 first"> <td class="col0 first last">A</td> <td class="col1">B</td> <td class="col2">C</td> <td class="col3">D</td> <td class="col4 last">E</td> </tr> </tbody> <tfoot> <tr class="row0 first"> <td class="col0 first">A</td> <td class="col1">B</td> <td class="col2">C</td> <td class="col3">D</td> <td class="col4 last">E</td> </tr> </tfoot> </table></body>
<script type="text/javascript"> $(function () { var fn_handle = function ($jq) { $jq.first().addClass('first').end().last().addClass('last').end().each(function (i) { $(this).addClass('row' + i + ((i + 1) % 2 == 0 ? ' alt' : '')).find('td').first().addClass('first').end().last().addClass('last').end().each(function (i) { $(this).addClass('col' + i); }); }); } $('table').each(function () { //处理thead $(this).find('thead th').first().addClass('first').end().last().addClass('last').end().each(function (i) { $(this).addClass('col' + i); }); //处理tbody fn_handle($(this).find('tbody tr')); //处理tfoot fn_handle($(this).find('tfoot tr')); }); }); </script>
[解决办法]
那是因为你在样例里面就这样写
<tbody> <tr class="row0 first"> <td class="col0 first last">A</td> <td class="col1">B</td> <td class="col2">C</td> <td class="col3">D</td> <td class="col4 last">E</td> </tr> </tbody>
[解决办法]
1.修改"tfooter"为"tfoot"；
2.选择器使用:first-child
$('#btnBuild').click(function () {$('table').each(function () { var i = 0; $(this).find('thead th').each(function () { $(this).addClass('col' + i); i++; }); $(this).find('thead th:first-child').addClass('first'); $(this).find('thead th:last-child').addClass('last'); i = 0; $(this).find('tbody tr').each(function () { $(this).addClass('row' + i.toString() + ((i % 2 === 1) ? ' alt' : '')); i++; var j = 0; $(this).find('td').each(function () { $(this).addClass('col' + j); j++; }); $(this).find('td:first-child').addClass('first'); $(this).find('td:last-child').addClass('last'); }); $(this).find('tbody tr:first-child').addClass('first'); $(this).find('tbody tr:last-child').addClass('last'); i = 0; $(this).find('tfoot tr').each(function () { $(this).addClass('row' + i + i % 2 ? ' alt' : ''); var j = 0; $(this).find('td').each(function () { $(this).addClass('col' + i); j++; }); $(this).find('td:first-child').addClass('first'); $(this).find('td:last-child').addClass('last'); }); $(this).find('tfoot tr:first-child').addClass('first'); $(this).find('tfoot tr:last-child').addClass('last');});
[解决办法]
jQuery(function(){ jQuery("table[class^=tableStyle]").each(function(){ var $thead=jQuery(this).children("thead"); if($thead!=null){ //will udpate to th var $thead_tr=$thead.children("tr"); if($thead_tr.length>1){ $thead.children("tr").each(function(index){ jQuery(this).addClass("row"+index); jQuery(this).children("th").each(function(index){ jQuery(this).addClass("col"+index); }).first().addClass("first").end().last().addClass("last"); }).first().addClass("first").end().last().addClass("last"); }else{ $thead.children("tr").each(function(){ jQuery(this).children("th").each(function(index){ jQuery(this).addClass("col"+index); }).first().addClass("first").end().last().addClass("last"); }); } if(jQuery(this).hasClass("sortable")){ $thead.children("tr").last().addClass("sortableRow"); } } var $tbody=jQuery(this).children("tbody"); if($tbody!=null){ $tbody.children("tr").each(function(index){ jQuery(this).addClass("row"+index); jQuery(this).children("td").each(function(col_index){ jQuery(this).addClass("col"+col_index); }).first().addClass("first").end().last().addClass("last"); if(index%2==1){ //even jQuery(this).addClass("alt"); } }).first().addClass("first").end().last().addClass("last"); } //tfoot var $tfoot=jQuery(this).children("tfoot"); if($tfoot!=null){ //will udpate to th $tfoot.children("tr").each(function(){ jQuery(this).children("td").each(function(index){ jQuery(this).addClass("col"+index); }).first().addClass("first").end().last().addClass("last"); }); } });});