高分求解！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>

解决方案 »

  1.   

    <p>
    <input type="button" id="btnClear" value="Clear" />
    <input type="button" id="btnBuild" value="Build" /></p>$(document).ready(function () {
    $('#btnClear').click(function () {
    $('tr,th,td').removeClass();
    }); $('#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').addClass('first');
    $(this).find('thead th:last').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').addClass('first');
    $(this).find('td:last').addClass('last');
    });
    //$(this).find('thead tr:first').addClass('first');
    //$(this).find('thead tr:last').addClass('last'); i = 0;
    $(this).find('tfooter 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').addClass('first');
    $(this).find('td:last').addClass('last');
    });
    $(this).find('tfooter tr:first').addClass('first');
    $(this).find('tfooter tr:last').addClass('last');
    });
    });
    });
      

  2.   

    有问题啊,第二个生成<td class="col0 first last">A</td>
    <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>
      

  3.   

    //试试这个。<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>
      

  4.   

    那是因为你在样例里面就这样写
     <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>
      

  5.   

    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');
    });
      

  6.   


    4楼更好，因为tbody与tfoor逻辑相同，thead不一样，所以提取出来了，而且链式连接更精简。
      

  7.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <table>
    <thead>
    <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    </tr>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    </tr>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    </tr>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    </tr>
    </tfoot>
    </table>
    <table>
    <thead>
    <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    </tr>
    </tfoot>
    </table>
    <script src="jquery.js"></script>
    <script>
    (function($, window, undefined){
    $.fn.autoTable = function(){
    if(this.length === 0){
    return;
    }
    this.each(function(index, elem){
    var $thead_tr = $('thead', this).children(),
    $tbody_tr = $('tbody', this).children(),
    $tfoot_tr = $('tfoot', this).children();

    $thead_tr.autoClass();
    $tbody_tr.autoClass();
    $tbody_tr.autoEvenClass();
    $tfoot_tr.autoClass();

    $thead_tr.each(function(){
    $(this).children().autoClass();
    });
    $tbody_tr.each(function(){
    $(this).children().autoClass();
    });
    $tfoot_tr.each(function(){
    $(this).children().autoClass();
    });
    });
    }
    $.fn.autoClass = function(){
    var len = this.length;
    this.each(function(index, elem){
    var $elem = $(elem),
    clz = '';
    switch($elem.prop('tagName')){
    case 'TR':
    clz = 'row';
    break;
    case 'TD':
    case 'TH':
    clz = 'col';
    break;
    }
    $elem.addClass(clz + index);
    if(index === 0){
    $elem.addClass('first');
    }
    if(index === len - 1){
    $elem.addClass('last');
    }

    });
    }
    $.fn.autoEvenClass = function(){
    this.each(function(index, elem){
    if(index % 2 === 1){
    $(elem).addClass('alt');
    }
    });
    }
    })(jQuery, window);

    $(function(){
    $('table').autoTable();
    });
    </script>
    </body>
    </html>
      

  8.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <table>
    <thead>
    <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    </tr>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    </tr>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    </tr>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    </tr>
    </tfoot>
    </table>
    <table>
    <thead>
    <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    </tr>
    </tfoot>
    </table>
    <script src="jquery.js"></script>
    <script>
    (function($, window, undefined){
    $.fn.autoTable = function(){
    if(this.length === 0){
    return;
    }
    this.each(function(index, elem){
    $('thead', this).children().autoClass().each(function(){
    $(this).children().autoClass();
    });
    $('tbody', this).children().autoClass().autoEvenClass().each(function(){
    $(this).children().autoClass();
    });
    $tfoot_tr = $('tfoot', this).children().autoClass().each(function(){
    $(this).children().autoClass();
    });
    });
    return this;
    }
    $.fn.autoClass = function(){
    var len = this.length;
    this.each(function(index, elem){
    var $elem = $(elem),
    clz = '';
    switch($elem.prop('tagName')){
    case 'TR':
    clz = 'row';
    break;
    case 'TD':
    case 'TH':
    clz = 'col';
    break;
    }
    $elem.addClass(clz + index);
    if(index === 0){
    $elem.addClass('first');
    }
    if(index === len - 1){
    $elem.addClass('last');
    }
    });
    return this;
    }
    $.fn.autoEvenClass = function(){
    this.each(function(index, elem){
    if(index % 2 === 1){
    $(elem).addClass('alt');
    }
    });
    return this;
    }
    })(jQuery, window);

    $(function(){
    $('table').autoTable();
    });
    </script>
    </body>
    </html>
      

  9.   

    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");
    });
    }

    });
    });