使用javascript選擇每個表格列

Question

使用javascript返回每列的數組來標識“ div> span”表的每一列。

小提琴：

如果有人可以幫助我，我不知道該怎么做：|

我已經嘗試了document.querySelectorAll("")東西，但我不知道如何從上到下進行迭代...

Answer 1

你要這個 ？ 全頁打開示例

 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>