javascriptを使用して各表の列を選択してください

Question

javascriptを使用して各列の配列を戻す「div> span」表の各列を指定します。

fiddle:

誰かがこれで私を助けることができる場合、私は、それを行う方法見当もつかない：|

あなたはこれをしたい...

Answer 1

を私はdocument.querySelectorAll("")で何かを試してみましたが、私は上から下に反復する方法がわかりませんか？フルページで開く例

var temp = -1; 
 
var arr = []; 
 

 
$('span').on('click', function(){ 
 
    
 
    if(temp !== -1){ 
 
    $('div.row span:nth-child(' + (temp + 1) + ')').css({'color': 'black', 'font-weight': 'normal'}); 
 
    } 
 

 
    var index = $(this).index(); 
 
    arr = $('div.row span:nth-child(' + (index + 1) + ')').css({'color': 'red', 'font-weight': 'bold'}); 
 
    temp = index; 
 
    
 
    Array.prototype.forEach.call(arr, x => console.log(x)); 
 
})

.table { 
 
    display:table; 
 
    border: 3px solid #555; 
 
    border-collapse: collapse; 
 
    margin: 0 auto; 
 
    width: 50%; 
 
    margin-top:20px; 
 
} 
 

 
.row { 
 
    display:table-row; 
 
} 
 

 
.rowGroup { 
 
    display:table-row-group; 
 
} 
 

 
.cell { 
 
    display:table-cell; 
 
    width:2%; 
 
    text-align: center; 
 
    border: 2px dotted green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="table"> 
 
    <div class="rowGroup"> 
 
    <div class="row"> 
 
     <span class="cell cas4">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
    </div> 
 
    </div> 
 
    <div class="rowGroup"> 
 
    <div class="row"> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
    </div> 
 
    </div> 
 
    <div class="rowGroup"> 
 
    <div class="row"> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
    </div> 
 
    </div> 
 
    <div class="rowGroup"> 
 
    <div class="row"> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
    </div> 
 
    </div> 
 
    <div class="rowGroup"> 
 
    <div class="row"> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
    </div> 
 
    </div> 
 
    <div class="rowGroup"> 
 
    <div class="row"> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
    </div> 
 
    </div> 
 
    <div class="rowGroup"> 
 
    <div class="row"> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
    </div> 
 
    </div> 
 
    <div class="rowGroup"> 
 
    <div class="row"> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
    </div> 
 
    </div> 
 
    <div class="rowGroup"> 
 
    <div class="row"> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
     <span class="cell">X</span> 
 
    </div> 
 
    </div> 
 
</div>