JavaScript - インデックスからテーブルの列を取得

インデックスに基づいてカラムを取得する方法が必要です。インデックス番号は<td>を検索し、cellIndexを返します。私がこれをやりたい理由は、<col>のクラスをつかんで、それをすべて<td>に適用できるからです。各<td>は、ライブラリ（List.js）を使用しているので、適用されるクラスが必要です。個々の<td>が適切にラベル付けされていないと、ソート/フィルタリング/検索のいずれも行うことができません（残念ながら、 <col>しか持っていなければ働きません）。また、<col> sがなど、他の属性は、ID、名前のように追加されていませんJavaScript - インデックスからテーブルの列を取得

function addClassesToCells(table) { 
     var col = ; // hoping to identify col using index here 
     var classname = col.className; 

     // rest of function 
    } 

function getIndex() { // test function to find index 
    document.addEventListener("click", function (e) { 
     e = e || window.event; 
     var target = e.target || e.srcElement; 
     var td = "TD"; 

     if (target.tagName == td) { 
      console.log(target.cellIndex); 
     } 

    }, false); 
}

行うには、他の/よりよい方法があるので、もし目標は、クラスを適用するには、特定の下のすべての<td> Sを得ていますこれは、私は何でも歓迎します。ありがとうございました。

出典

2016-06-01 LaLaLottie

あなたはまだクラスを追加しようとしていない、それはあなたがに関連するあなたの（「* [MCVE] *」）HTMLは何 –

で困難を抱えているどの部分伝えるのは難しいです質問？最初の関数が特定の '

'要素、つまり 'HTMLTableElement'ノードを受け取って、自動的に列名をクラス名で設定するようにしますか？あなたの試行はどこで失敗しましたか？ *どのように失敗したのですか？何をしたらいいのでしょうか？それは何をしてはいけないのですか？ ''、または ''の下でターゲットにしようとしているので、私が慣れていないクラスを適用しています。 – LaLaLottie

答えて

colおよびtdsのリストを取得するには、クエリを使用してインデックスを照合します。

var table = document.querySelector('table'); 
 

 
var cols = table.querySelectorAll('col'); 
 

 
var trs = table.querySelectorAll('tr'); 
 

 
var tds = [].map.call(trs, tr => tr.querySelectorAll('td')); 
 

 
for (var i = 0; i < trs.length; i++) { 
 
    for (var j = 0; j < tds[i].length; j++) { 
 
    tds[i][j].className = cols[j].className; 
 
    } 
 
}

.a { 
 
    color: red; 
 
} 
 
.b { 
 
    color: blue; 
 
} 
 
.c { 
 
    color: green; 
 
}

<table> 
 
    <colgroup> 
 
    <col class="a" /> 
 
    <col class="b" /> 
 
    <col class="c" /> 
 
    </colgroup> 
 
    <tr> 
 
    <td>Lime</td> 
 
    <td>Lemon</td> 
 
    <td>Orange</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Green</td> 
 
    <td>Yellow</td> 
 
    <td>Orange</td> 
 
    </tr> 
 
</table>

出典

2016-06-01 17:26:33

ありがとう、私はこのアプローチが本当に好きです。私はいくつかの混乱を抱えています：なぜ私たちは、 'tr'を収集して、後でそれらの関数を反復するというステップをスキップできないのだろうと思います。もしそれを省略してテーブルの 'td'をすべて持っていれば、インデックス/ iは' col'sのjとまだ一致しませんか？違いは何ですか？ – LaLaLottie

'cols [i％cols.length]'を実行した場合、それらは一致します。それは有効なアプローチでもあります。私はテーブル構造にマッチするので、2次元配列を理解しやすくしました。 –

JavaScript - インデックスからテーブルの列を取得

答えて

関連する問題