セルの選択時にテーブルの列をハイライト表示するには

Question

ユーザーがクリックすると、セル（td要素）を「強調表示」することができました。
しかし、私は、列全体が強調表示され、セル自体がわずかに異なることを望みます。
最後の部分を完了できません（列全体がハイライト表示されます）。 これですべての助けに感謝します。

望ましい結果は以下のようになります。今では、ネイティブのDOM APIを使用してjQueryのことなく、容易にこれを行うことができます

function handleBlur(event) { 
 
\t \t event.target.contentEditable = false; 
 
\t } 
 
\t 
 
\t document.querySelector('body').addEventListener('click', function(event) { 
 
\t \t if (event.target.tagName.toLowerCase() === 'td') { 
 
\t \t \t event.target.contentEditable = true; 
 
\t \t \t event.target.focus(); 
 
\t \t \t event.target.addEventListener("blur", handleBlur);  
 
    } 
 
\t });

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 500px; 
 
    margin: 50px 0 0 50px; 
 
} 
 

 
td, 
 
th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 
th { 
 
    background-color: white; 
 
} 
 

 
table td[contentEditable=true]{ 
 
\t \t -webkit-box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51); 
 
\t \t -moz-box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51); 
 
\t \t box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51); 
 
\t \t outline: 3px solid #086AA7;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Maria Anders</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Centro comercial</td> 
 
    <td>Francisco Chang</td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ernst Handel</td> 
 
    <td>Roland Mendel</td> 
 
    <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>Helen Bennett</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus </td> 
 
    <td>Yoshi Tannamuri</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari </td> 
 
    <td>Giovanni Rovelli</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
</table>

Answer 1

。

それの子供で選択したセルのインデックスが（cellIndexを使用して）親だし、COLSを反復し、colgroupに関連colの背景を変更して下さい：

function handleBlur(event) { 
 
    event.target.contentEditable = false; 
 
} 
 

 
var cols = document.querySelectorAll('col'); // find the cols and cache 
 

 
document.querySelector('body').addEventListener('click', function(event) { 
 
    var t = event.target; 
 
    if (t.tagName.toLowerCase() !== 'td') { 
 
    return; 
 
    } 
 

 
    t.contentEditable = true; 
 
    t.focus(); 
 
    t.addEventListener("blur", handleBlur); 
 

 
    var highlightIndex = t.cellIndex; // the index of the clicked item in the row 
 

 
    cols.forEach(function(col, index) { // iterate the cols 
 
    col.style.background = index === highlightIndex ? 'lightblue' : null; // set the background to the clicked col, remove from others 
 
    }); 
 
});

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 500px; 
 
    margin: 50px 0 0 50px; 
 
} 
 

 
td, 
 
th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
table td[contentEditable=true] { 
 
    box-shadow: inset 0px 0px 0px 200px rgba(186, 210, 225, 0.51); 
 
    outline: 3px solid #086AA7; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <colgroup> <!-- add a colgroup with a col item for each column --> 
 
    <col> 
 
    <col> 
 
    <col> 
 
    </colgroup> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Maria Anders</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Centro comercial</td> 
 
    <td>Francisco Chang</td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ernst Handel</td> 
 
    <td>Roland Mendel</td> 
 
    <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>Helen Bennett</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus </td> 
 
    <td>Yoshi Tannamuri</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari </td> 
 
    <td>Giovanni Rovelli</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
</table>