跳过表javascript中的列

时间:2014-09-20 02:31:04

标签: javascript jquery

美好的一天,

我试图跳过我桌子上的某些列,因为它不能存储到我的变量中,但是我无法让它工作。

我只想在我想要跳过的每个“th”元素上添加一个“skip”类,然后该列不应该包含在循环中。

但我仍然坚持迭代我的数组,我的条件在下一个循环中将是假的,导致它在下一个循环中存储在我的变量中。

继承人js

var i = [];
var value = [];

$('.report-table tr').each(function(){     

 $('th', this).each(function(index){
            if($(this).hasClass('skip'))
            {
            console.log(index);
            i.push(index);
            }
            else
            {
               value.push($(this).text());
            }


        }); 

 $('td', this).each(function(index){
            if(i.length!=0){ //this is where i am stuck right now
                for(var t = i.length-1; t>=0;t--){
                    if(i[t]==index)
                    {
                        console.log("skip :"+index);
                    }
                    else{
                         value.push($(this).text());
                    }
                }
            }
            else{
                value.push($(this).text());
            }

        }); 

});

和html

  <table class="report-table table" id="dynamic-report">

              <thead>
                  <th width="50%">Period Ending</th>
                  <th width="5%" class="rowValue">Jan 31, 2010</th>
                  <th width="5%" class="rowValue skip">Feb 31, 2011</th>
                  <th width="5%" class="rowValue">Mar 31, 2012</th>
                  <th width="5%" class="rowValue">Apr 31, 2010</th>
                  <th width="5%" class="rowValue skip">May 31, 2011</th>
                  <th width="5%" class="rowValue">Jun 31, 2012</th>
                  <th width="5%" class="rowValue">Jul 31, 2010</th>
                  <th width="5%" class="rowValue">Aug 31, 2011</th>
                  <th width="5%" class="rowValue">Sep 31, 2012</th>
              </thead>
              <tbody>
             <tr class="indent-0 highLight bold">
                 <td>Asset</td>
                 <td class="emptyRow"></td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
             </tr>
             <tr class="indent-1 bold ">
                 <td >Current Assets</td>
                 <td class="emptyRow"></td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>

             </tr>
             <tr  class="indent-2">
                <td>Bank Accounts</td>
                <td class="emptyRow"></td>
                <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>


             </tr>
    </tbody>
</table>

2 个答案:

答案 0 :(得分:1)

你让它变得比它需要的更复杂。使用jQuery index函数来使用当前td的索引并将其与th的索引匹配,并查看是否具有跳过类。单击下面的按钮以查看此操作。 (undefined只是因为我懒得检查空值!)

做一些像:

$(function() {
	var results = '';
	$('.report-table tr').each(function (row) {
	
		$('td', this).each(function (index) {
          var th;
		  $th = $('.report-table tr th:nth-of-type(' + index + ')');
          if ($th.hasClass('skip')) {
            results += 'skipping: ' + row + ' / ' + $th.html() + "\n";
          } else {
            results += 'not skipping: ' + row + ' / ' + $th.html() + "\n";
          }
	
		});
	
	});
	alert (results);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="report-table table" id="dynamic-report">

              <thead>
                  <th width="50%">Period Ending</th>
                  <th width="5%" class="rowValue">Jan 31, 2010</th>
                  <th width="5%" class="rowValue skip">Feb 31, 2011</th>
                  <th width="5%" class="rowValue">Mar 31, 2012</th>
                  <th width="5%" class="rowValue">Apr 31, 2010</th>
                  <th width="5%" class="rowValue skip">May 31, 2011</th>
                  <th width="5%" class="rowValue">Jun 31, 2012</th>
                  <th width="5%" class="rowValue">Jul 31, 2010</th>
                  <th width="5%" class="rowValue">Aug 31, 2011</th>
                  <th width="5%" class="rowValue">Sep 31, 2012</th>
              </thead>
              <tbody>
             <tr class="indent-0 highLight bold">
                 <td>Asset</td>
                 <td class="emptyRow"></td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
             </tr>
             <tr class="indent-1 bold ">
                 <td >Current Assets</td>
                 <td class="emptyRow"></td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>

             </tr>
             <tr  class="indent-2">
                <td>Bank Accounts</td>
                <td class="emptyRow"></td>
                <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>
                 <td class="rowValue">9,999,999.00</td>


             </tr>
    </tbody>
</table>

答案 1 :(得分:0)

这是一个FIDDLE,它提供了一种稍微不同的方法。

创建要跳过的列的变量。

使用两个.each循环,遍历整个表,并使用:nth-​​child确定要跳过的列。

这是最重要的一句话:

if( $(this).is( 'td:nth-child(' + coltoskip + ')' ) )

JS

var coltoskip = 2;
$('.testtable tr').each( function(){

    $(this).find('td').each( function(index){
    console.log( this );
        if( $(this).is( 'td:nth-child(' + coltoskip + ')' ) )
          {
           $('.putmehere').append( "skip" ); 
           }
        else
          {
           $('.putmehere').append( '-' );
           }
    });
    $('.putmehere').append('<br />');

});